Search code examples
jqueryasp.netupdatepanel

jQuery UpdatePanels initialization

I'm currently trying to use "colResizable" for a GridView that is located inside an AJAX UpdatePanel. On first load, it works well, but whenever the UpdatePanel gets updated, it stops.

I understand this is caused by a full-refresh of the pannel, which means all the stuff thats gets added by the initialization isn't added back.

I've tried the "add_endRequest" solution

var prm = Sys.WebForms.PageRequestManager.getInstance(); 
prm.add_endRequest(function() { 
    $(".GridViewStyle").colResizable({ liveDrag: true }); 
}

But, it gets called too early and doesn't fix my issue.

I've read about the ".live()" method, but i don't understand how i could use it for initializations. For events like "mouseover", i see how it is used and it is pretty simple... however, for inits, i don't get it.

My current initilization line is : 

$(document).ready(function () {
    $(".GridViewStyle").colResizable({ liveDrag: true });
});

Following the "mouseover" exemple, but i can't figure out which event to hook-up to, as the documentation doesn't list anything like "Load". If it did, i would have used something like this...

$(".GridViewStyle").live("load", function () { $(".GridViewStyle").colResizable({ liveDrag: true }); });

I've searched around, but haven't found something that suits my needs. I'm pretty new to jQuery so i may not be using the right vocabulary/concepts.

Solution

  • You can use pageLoaded event of the PageRequestManager instead of the endRequest. Look at this event documentation:

    Raised after all content on the page is refreshed as a result of either a synchronous or an asynchronous postback.

    Also, in this event handler you may apply colResizable plugin only if UpdatePanel where GridView control located created or updated. This allows you to avoid redundant plugin initialization calls on each async postback that may be raised by control in some other UpdatePanel

    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(initializeResizeable);

function initializeResizeable(sender, args) {
    var context = $(args.get_panelsCreated()).add(args.get_panelsUpdated());
    $(".GridViewStyle", context).colResizable({ liveDrag: true }); 
}

    Also, with this script you can remove plugin initialization from document.ready handler as this script will be executed on first page load as well as on each async postback