teilweise Postbacks und jquery

Question

Ich bin auf ein Problem gestoßen, wo auf teilweise Postback einige meiner jQuery nicht mehr funktioniert. Ich habe eine Seite mit zwei Radiobuttons, eines zum Anzeigen von Daten und das andere zum Anzeigen einer Bildergalerie. Ich benutze jquery, um das eine oder andere zu zeigen und zu verstecken.

Ich habe auch eine modale Popup-Erweiterung, die im Update-Bereich ist. Wenn ich den MPE schließe und zurück zur Bildergalerie wechsle, funktioniert ein Teil des Codes nicht mehr. Grundsätzlich ist es eine Galerie, die Bilder in einem Intervall wechselt. Es gibt auch Thumbnails, die das gleiche tun (ein Intervall einschalten) und die Thumbnails, die nicht funktionieren.

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'); 
} 

Grundsätzlich Ich möchte wissen, wie Update-Panel $ bewirken würde (document) .ready?

Dank

Answer 1

Der Code innerhalb $(document).ready wird nicht wieder für ein teilweise Postbacks genannt werden; Wenn Sie einige der Funktionalität innerhalb Ihrer $(document).ready Funktion benötigen, dann empfehle ich, diese Code in eine Funktion (z. B. initAll()) zu reformieren und nach teilweisem Postback von Server-Seite (in Ihrem Event-Handler) ClientScriptManager.RegisterClientScriptBlock Funktion, um diese Funktion wie aufrufen:

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

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