ASP.Net web application Jquery Photoviewer and Ajaxical Update

Question

There is a bug in my website.

Please go to the third menu from the right :

There are images which onlclick would be shown with jquery photoviewer . This works fine .

Now problems comes when , I click on the Ajaxical update button on the bottom of the page below :

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

.

Here is the code for the tab:

<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">

And here is what ajaxical button does :

 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

Any help would be highly appreciated .

*The solution given below is working correctly . Now after ajaxical update when I click on first tab(Last Video) , the videos aren't coming there .

Answer 1

Your issue is that you do not update the JavaScript code after the UpdatePanel has finished. Taking the JavaScript code from your page, I changed it to:

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

}

Your question is similar to these:

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

You might need some more changes; I do not know what other libraries you call or other JavaScript files, but this is the general idea.

Also your view state is huge. Reduce it by closing the viewstate on the controls that you do not need, and compress it.

Video initialize:

The pages use the "flowplayer" to show and play video. To make it work correctly you need to make the initialization of the flowplayer after the load of each new content through UpdatePanel.

What you do now is to call the script as you go. Here is a line from your page:

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>

Each video, is following by the script that initializes it. This can not work with Ajax, neither with UpdatePanel because as you load new content the full line is like text and is not compiled by the browser when you render it on the page (the JavaScript will not run).

The correct way is to write the video tag, and when the page is fully loaded, to initialize the video. From the "initialize" documents of the Flowplayer, you need to define the video place holder as:

Must be as:

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

and each video will have a line as above, and then initialize all lines as:

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

The final code will be:

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

}