While playing with jQuery plugins, I observed that some jQuery plugins are not working in asp.net ajax update panel after Asynchronous request.
As most of the jQuery plugins calls there functions on page onload method, So we need to recall plugin functions after an asynchronous postback is finished.
In my previous post Ajax Events I have given basic idea of handling various asp.net Ajax events including endRequest event which raised after an asynchronous postback is finished and control has been returned to the browser.
We can use endRequest event to recall jQuery plugin’s function.
Example
Here I have used vtip tooltip plugin.
Add following script into your page,
<script language="javascript" type="text/javascript">
function pageLoad() {
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(EndRequest);
}
function EndRequest(sender, args) {
// call JTool Tip function..
jQuery(document).ready(function($) { vtip(); })
}
</script>
References:
WebSite:http://amolwable.com/index.php/2009/asp-net-ajax-events
It is better to choose or make plugins that are callable at request, not that are executed on load. This are prone to failure in the case of later DOM changes for example. If you want to add the vtip functionality to elements later inserted in DOM you can use the bubble events to register listeners for upper fixed DOM elements, so the plugin will work even with elements that were not parsed at runtime.
Thanks Amol. u Rock You solved my problem