部分的なポストバックとjquery

Question

私は、部分的なポストバックで、私のjqueryのいくつかが動作を停止しているという問題に遭遇しました。私は2つのラジオボタン、1つはデータを表示するページ、もう1つは画像ギャラリーを表示するページを持っています。私はjqueryを使って、どちらかを見せたり隠したりします。

また、更新パネルの内側にあるモーダルポップアップエクステンダもあります。 mpeを終了して画像ギャラリーに戻ったとき、コードの一部が機能しなくなります。基本的には、ある間隔で画像を切り替えるギャラリーです。同じことをするサムネイル（間隔で切り替える）と、機能しないサムネイルもあります。

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

基本的に私は、更新パネルが.ready $（文書）を影響する方法を知りたいですか？

おかげ

Answer 1

$(document).ready内のコードが部分ポストバックのために再び呼び出されることはありません。 $(document).ready関数の中にいくつかの機能が必要な場合は、これらのコードを関数（例えばinitAll()）にリファクタリングして、部分的なポストバック後に、（イベントハンドラ内の）サーバー側からClientScriptManager.RegisterClientScriptBlock関数を使用して関数を呼び出します：

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

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