ASP.Net Web 应用程序 Jquery Photoviewer 和 Ajaxical 更新

有一个错误我的网站 http://new.mnarfezhom.com/.

请进入右数第三个菜单：

有些图像只能通过 jquery photoviewer 显示 onlclick 。这很好用。

现在，当我单击页面底部的 Ajaxical 更新按钮时，问题就来了：

响应出现后，jquery 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(); }
    });*/

}

你的问题与这些类似：

• Gridview Jquery DatePicker 中的 Asp.Net UpdatePanel https://stackoverflow.com/questions/3341623/asp-net-updatepanel-in-gridview-jquery-datepicker/3341741#3341741
• jquery Accordion 在 asp.Net 回发后不会重新启动 https://stackoverflow.com/questions/13856717/jquery-accordion-not-re-initiating-after-an-asp-net-postback/13856997#13856997

你可能需要更多的改变；我不知道你调用了什么其他库或其他 JavaScript 文件，但这是总体思路。

而且你的视图状态也很大。通过关闭不需要的控件上的视图状态来减少它，并压缩它。

视频初始化：

这些页面使用“流动播放器 http://flowplayer.org/”来显示和播放视频。为了使其正常工作，您需要在通过 UpdatePanel 加载每个新内容后对 FlowPlayer 进行初始化。

您现在要做的就是随时调用脚本。这是您页面上的一行：

Now:

<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 将不会运行）。

正确的方法是编写video标签，并在页面完全加载时初始化视频。来自 ”初始化 http://flowplayer.org/docs/在 Flowplayer 的文档中，您需要将视频占位符定义为：

必须是这样的：

<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(); }
    });*/

}