Simon Hibbard's Web Apps Blog

ASP.Net UpdatePanel breaks Javascript/JQuery e.g. Slimbox, Tooltip…


After using ASP.Net Ajax components such as an updatepanel on your page you may see that some of your Javascript/JQuery functions do not seem to work once a partial page update has been done. This is because thanks to the partial page update those items contained within it have been reloaded but no functions have been rebound to them.

I have used 2 solutions for this, one is JQuery Live Query. You can use this to simply rebind to any item reloaded for example I used this to rebind the elements I had previously set for Slimbox and set the rel=lightbox attribute for them:

$(“a[rel^=’lightbox’]”).livequery(function() {
$(this).slimbox();
});

This finds any anchor element with the rel=”lightbox” tag and binds the slimbox function.

Alternativly to this you can replace the

‘$(document).ready(function() {

// do stuff

});

with

function pageLoad(sender, args)
{
// do stuff

if (args.get_isPartialLoad())
{
//Specific code for partial postbacks can go in here.
}
}

But be aware this can only be used once on the document, if you need to do this in multiple places use:

Sys.Application.add_load(function() {

// do stuff

});

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s