javascript – ASP.Net Web应用程序Jquery Photoviewer和Ajaxical Update

my website有一个错误.

请转到右边的第三个菜单：

有些图像会用jquery photoviewer显示onlclick.这很好用.

现在出现问题,我点击下面页面底部的Ajaxical更新按钮：

After the response comes jquery photoviewer doesn’t work correctly .
It opens images as separate link instead of opening inside photoviewer

.

以下是选项卡的代码：

<div class="tab-pane" id="aakhir_alshur">
            <asp:UpdatePanel ID="Up_GQ_Cont" runat="server"  UpdateMode="Conditional">
                <ContentTemplate>
                <asp:ObjectDataSource ID="obj_Photos" runat="server" 
                SelectMethod="Articles_GetBy_Status_and_Type_oreder_by_Insert_Date_DESC" 
                TypeName="CntrlDBFunctions">
                <SelectParameters>
                    <asp:Parameter DefaultValue="published" Name="Status" Type="String" />
                    <asp:Parameter DefaultValue="PHOTOS" Name="Type" Type="String" />
                </SelectParameters>
            </asp:ObjectDataSource>
                <asp:GridView ID="ds_Photos" runat="server" AutoGenerateColumns="False" 
                    DataSourceID="obj_Photos" AllowPaging="True" CellPadding="0" 
                    GridLines="None" PageSize="7" ShowHeader="False">
                    <Columns>
                        <asp:TemplateField>
                            <ItemTemplate>
                                <asp:Label ID="Label1" runat="server" Text='<%# content( eval("Article_ID"), eval("Article_Title"), eval("Article_Subtitle"), eval("Wrote_by"), eval("Main_Photo"), eval("Main_Photo_Caption"), eval("Article_Content"), eval("Attachment"), eval("photo"),eval("video"), eval("Audio"), eval("Article_Type"), eval("Article_Date"), eval("Insert_Date"), eval("Lang"), 3) %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                    <PagerSettings Visible="False" />
                </asp:GridView>
                <div class="last">
                    <asp:Button ID="btn_More_Photos" type="button" runat="server" CssClass="last" Text="المزيد" CausesValidation="False" />
                    <asp:Label ID="lbl_More_Photos" Visible="false" runat="server" Text="<br>لا توجد مواضيع أخرى"></asp:Label></div>
                </ContentTemplate>
                </asp:UpdatePanel>
                <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="Up_GQ_Cont">

以下是ajaxical按钮的作用：

 Protected Sub btn_More_Feeds_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btn_More_Feeds.Click
        DS_post.PageSize = DS_post.PageSize + 15
        DS_post.DataBind()

        If DS_post.Rows.Count < DS_post.PageSize Then
            btn_More_Feeds.Visible = False
            lbl_More_Feeds.Visible = True
        End If
    End Sub

任何帮助将受到高度赞赏.

*下面给出的解决方案正常工作.现在,当我点击第一个标签(最后一个视频)时,ajaxical更新,视频不会到那里.

解决方法:

您的问题是在UpdatePanel完成后您不更新JavaScript代码.从您的页面获取JavaScript代码,我将其更改为：

$(document).ready(function ()
{
    // set the handlers
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_initializeRequest(InitializeRequest);
    prm.add_endRequest(EndRequest);

    // init on page load
    PrettyPhotoInit();
});


function InitializeRequest(sender, args) {
}

function EndRequest(sender, args) {
    // init again after the UpdatePanel
    PrettyPhotoInit();
}

function PrettyPhotoInit()
{
    $("a[rel^='prettyPhoto']").prettyPhoto();

    /*$(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'normal',theme:'light_square',slideshow:3000, autoplay_slideshow: true});
    $(".gallery:gt(0) a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'fast',slideshow:10000, hideflash: true});

    $("#custom_content a[rel^='prettyPhoto']:first").prettyPhoto({
    custom_markup: '<div id="map_canvas" style="width:260px; height:265px"></div>',
    changepicturecallback: function(){ initialize(); }
    });

    $("#custom_content a[rel^='prettyPhoto']:last").prettyPhoto({
    custom_markup: '<div id="bsap_1259344" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div><div id="bsap_1237859" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6" style="height:260px"></div><div id="bsap_1251710" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div>',
    changepicturecallback: function(){ _bsap.exec(); }
    });*/

}

您的问题与以下内容类似：

> Asp.Net UpdatePanel in Gridview Jquery DatePicker
> jquery accordion not re-initiating after an asp.Net postback

您可能需要更多更改;我不知道您调用的其他库或其他JavaScript文件,但这是一般的想法.

你的观点也是巨大的.通过关闭不需要的控件上的视图状态来减少它,然后压缩它.

视频初始化：

页面使用“flowplayer”来显示和播放视频.为了使其正常工作,您需要在通过UpdatePanel加载每个新内容后进行流程图的初始化.

你现在要做的就是随时调用脚本.以下是您网页上的一行：

现在：

<a href='/2011108218271.flv' style='display:block;width:100%; height:201px'  id='player_1184'></a>
<script> flowplayer('player_1184', '/flash/flowplayer-3.2.7.swf', {clip: {autoPlay: false,autoBuffering: true}});</script>

每个视频都跟随初始化它的脚本.这不适用于Ajax,也不适用于UpdatePanel,因为当您加载新内容时,整行就像文本一样,当您在页面上呈现它时,浏览器不会编译它(JavaScript将不会运行).

正确的方法是编写视频标记,并在页面完全加载时初始化视频.从Flowplayer的“initialize”文档中,您需要将视频占位符定义为：

必须如下：

<div class="player" data-engine="flash">
   <video preload="none">
      <source type="video/x-flv" src="/2011108218271.flv"/>
   </video>
</div>

并且每个视频都有一条如上所示的行,然后将所有行初始化为：

   // install flowplayer to an element with CSS class "player"
   $(".player").flowplayer({ swf: "/swf/flowplayer-.swf" });

最终的代码是：

$(document).ready(function ()
{
    // set the handlers
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_initializeRequest(InitializeRequest);
    prm.add_endRequest(EndRequest);

    // init on page load
    PrettyPhotoInit();
    InitFlowPlayer();
});


function InitializeRequest(sender, args) {
}

function EndRequest(sender, args) {
    // init again after the UpdatePanel
    PrettyPhotoInit();
    // init again the videos
    InitFlowPlayer();
}

function InitFlowPlayer()
{
   // install flowplayer to an element with CSS class "player"
   $(".player").flowplayer({ swf: "/swf/flowplayer-.swf" });
}

function PrettyPhotoInit()
{
    $("a[rel^='prettyPhoto']").prettyPhoto();

    /*$(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'normal',theme:'light_square',slideshow:3000, autoplay_slideshow: true});
    $(".gallery:gt(0) a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'fast',slideshow:10000, hideflash: true});

    $("#custom_content a[rel^='prettyPhoto']:first").prettyPhoto({
    custom_markup: '<div id="map_canvas" style="width:260px; height:265px"></div>',
    changepicturecallback: function(){ initialize(); }
    });

    $("#custom_content a[rel^='prettyPhoto']:last").prettyPhoto({
    custom_markup: '<div id="bsap_1259344" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div><div id="bsap_1237859" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6" style="height:260px"></div><div id="bsap_1251710" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div>',
    changepicturecallback: function(){ _bsap.exec(); }
    });*/

}

标签：javascript,jquery,asp-net,vb-net,updatepanel
来源： https://codeday.me/bug/20190901/1783356.html