jquery accordion not re-initiating after an asp.Ne

Question

I'm firing up a jquery accordion with:

$(document).ready(function(){
   $('#accordion').accordion();
});

Problem is this is an .asp.NET application and if the page fires a postback is destroys the accordion. How do I re-initiate the accordion upon postback?

Sorry I'm not an expert on asp.NET, and also sorry I can't give you a link to the example, this is because it's a password protected application.

Thanks.

Answer 1

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(InitAccordion);
function InitAccordion(){       
   $('#accordion').accordion();}

This will work for postback and asyncpostback Raised after all content on the page is refreshed as a result of either a synchronous or an asynchronous postback. http://msdn.microsoft.com/en-us/library/bb397523(v=vs.100).aspx

Answer 2

You need to re-initlaize the accordion after the post back with the UpdatePanel functions as:

<script type="text/javascript"> 
$(document).ready(function(){
    var prm = Sys.WebForms.PageRequestManager.getInstance();    
        prm.add_initializeRequest(InitializeRequest);
        prm.add_endRequest(EndRequest);
   // on page ready first init of your accordion
   $('#accordion').accordion();
});


function InitializeRequest(sender, args) {      
}

function EndRequest(sender, args) {
     // after the UpdatePanel finish the render from ajax call
     //  and the DOM is ready, re-initilize the accordion
     $('#accordion').accordion();
}
</script>

Relative:
Asp.Net UpdatePanel in Gridview Jquery DatePicker
ASP.Net : Need to run javascript on update panel load completed
How do you get client-side script to execute on an ASP.NET postback? (from an UpdatePanel)