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

Question

我的网站有一个错误。

请转到右数第三个菜单：

在此处输入图像描述

有些图像会在 jquery photoviewer 中显示 onlclick。这很好用。

现在问题来了，我点击下面页面底部的 Ajaxical 更新按钮：

在此处输入图像描述

响应后 jquery photoviewer 无法正常工作。它将图像作为单独的链接打开，而不是在 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 更新后，视频不会出现。

score 5 · Accepted Answer

您的问题是在 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(); }
    });*/

}

你的问题类似于这些：

您可能需要进行更多更改；我不知道您调用了哪些其他库或其他 JavaScript 文件，但这是一般的想法。

您的视图状态也很大。通过关闭不需要的控件上的视图状态来减少它，然后压缩它。

视频初始化：

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

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

现在：

<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标签，当页面完全加载后，初始化video。在 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(); }
    });*/

}

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

1 回答 1

视频初始化：

现在：

必须为：

Related

Reference