partial postbacks and jquery

Question

I have come across a problem where on partial postback some of my jquery has stopped working. I have a page with two radio buttons, one to show data and the other one to show an image gallery. I use jquery to show and hide one or the other.

I also have a modal popup extender which is inside the update panel. When I close the mpe and switch back to the image gallery some of the code stops working. Basically its a gallery which switches images on an interval. There are also thumbnails that do the same (switch on an interval) and its the thumbnails that don't work.

Html

<%@ Register Src="~/User_Controls/modify_image_table.ascx" TagName="IMG" TagPrefix="uc2" %>
<%@ Register Src="~/User_Controls/ImageLoaderUC.ascx" TagName="ImageLoader" TagPrefix="uc8" %>

<asp:Content ID="Content1" ContentPlaceHolderID="PageContent" runat="server">
<asp:UpdatePanel ChildrenAsTriggers="true" ID="Upd1" runat="server">
    <ContentTemplate>

        <div class="radioSelection">
            <asp:RadioButtonList ID="selectionby" runat="server" Font-Bold="true" RepeatDirection="Horizontal"
                RepeatColumns="2" CssClass="bodycopy">
                <asp:ListItem Text="Image Library" Selected="True" Value="Libr"></asp:ListItem>
                <asp:ListItem Text="Image Loader" Value="Load"></asp:ListItem>
            </asp:RadioButtonList>
        </div>
        <div id="mpe" style="width: 600px; padding: 5px;">
            <uc2:IMG ID="IMG1" cssclass="bodycopy" runat="server" />
        </div>
        <div id="imgLoader">
            <uc8:ImageLoader ID="ImageLoader" runat="server" />
        </div>
        <asp:UpdateProgress ID="upp1" runat="server" AssociatedUpdatePanelID="Upd1">
            <ProgressTemplate>
                <div id="progressBackgroundFilter">
                </div>
                <div id="modalPopup">
                    &nbsp; &nbsp; Loading...
                    <img align="middle" src="../images/Ajax/loading_1.gif" />
                </div>
            </ProgressTemplate>
        </asp:UpdateProgress>
    </ContentTemplate>
</asp:UpdatePanel>

Javascript

$(document).ready(function (e) {
    // Execute the slideShow
    slideShow(6000);
    thumbInt(); // Assign int to thumbnail list items
    clearShowClass(); // Prevents multiple li having .show

    function clearShowClass() {
        setTimeout(timedInterval, 1000);
    };

    function timedInterval() {
        $('ul.slideshow li').not('.show').css("opacity", 0);
        clearShowClass();
    }

    $('#footer img').mouseover(

function () {
    $(this).animate({
        opacity: 3.7
    })
});

    $('#footer img').mouseout(
  function () {

      $(this).animate({
          opacity: 0.7
      })
  });

    function thumbInt() {
        for (i = 1; i <= $('ul.slideshow li').length; i++) {
            $('#footer .thumbnail' + i).bind('click', { iteration: i }, function (event) {
                $('ul.slideshow li').removeClass('show').css("opacity", 0).add($('ul.slideshow li:nth-child(' + event.data.iteration + ')').addClass('show').css("opacity", 0.0).animate({
                    opacity: 1.0
                }, 1000));

                $('#footer li').removeClass('highlight').add($('#footer li:nth-child(' + event.data.iteration + ')').addClass('highlight').add($('#footer li:nth-child(' + event.data.iteration + ') img')));

            });
        };
    };
});


function slideShow(speed) {

    //Set the opacity of all images to 0
    $('ul.slideshow li').css({
        opacity: 0.0
    });

    //Get the first image and display it (set it to full opacity)
    $('ul.slideshow li:first').css({
        opacity: 1.0
    }).addClass('show');


    //Get the first thumbnail and change css
    $('#footer li:first').css({
        opacity: 1.0
    }).addClass('highlight');


    //Call the gallery function to run the slideshow
    var timer = setInterval('gallery()', speed);

    //Pause the slideshow on mouse over content
    $('#footer, ul.slideshow').hover(

function () {
    clearInterval(timer);
},

function () {
    timer = setInterval('gallery()', speed);
});
}

function gallery() {
    //if no IMGs have the show class, grab the first image
    var current = ($('ul.slideshow li.show') ? $('ul.slideshow li.show') : $('#ul.slideshow li.first'));

    //Get next image, if it reached the end of the slideshow, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption') ? $('ul.slideshow li:first') : current.next()) : $('ul.slideshow li:first'));


    //Set the fade in effect for the next image, show class has higher z-index
    next.css({
        opacity: 4.0
    }).addClass('show').animate({
        opacity: 4.0
    }, 1000);

    // Hide the current image
    current.animate({
        opacity: 0.0
    }, 1000).removeClass('show');

    //if no thumbnails have the highlight class, grab the first thumbnail
    var currentThumb = ($('#footer li.highlight') ? $('#footer li.highlight') : $('#footer li:first'));

    var nextThumb = ($('#footer li:last').hasClass('highlight')) ? $('#footer li:nth-child(1)') : $('#footer li.highlight').next($('#footer li'));


    nextThumb.addClass('highlight');
    currentThumb.removeClass('highlight');
}

Basically I want to know how update panel would effect $(document).ready?

Thanks

Answer 1

The code inside $(document).ready will not be called again for a partial postback; If you need some of the functionality inside your $(document).ready function then I suggest to refactor those code into a function (say initAll()) and after partial postback, from server side (in your event handler) use ClientScriptManager.RegisterClientScriptBlock function to call that function like:

...
// last line in your partial postback handler

ScriptManager.RegisterClientScriptBlock(Upd1,typeof(UpdatePanel),"__updp__", "initAll();", true);