3

私のウェブサイトにバグがあります。

右から 3 番目のメニューに移動してください :

ここに画像の説明を入力

jquery photoviewer で onlclick 表示される画像があります。これは正常に動作します。

次のページの下部にある Ajaxical update ボタンをクリックすると、問題が発生します。

ここに画像の説明を入力

応答が来た後、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">

そして、これがアヤクシカルボタンの機能です：

 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 更新後、ビデオがそこに来ません。

4

1 に答える 1

5

問題は、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 は実行されません)。

正しい方法は、ビデオ タグを記述し、ページが完全に読み込まれたときにビデオを初期化することです。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(); }
    });*/

}
于 2012-12-15T07:58:59.323 に答える