jQuery effects not working after UpdatePanel Asynchronous request is over
A few days ago I was working on a project that involves a really good looking design and it had some fancy effects on a page with the help of jQuery library
The fancy effect was about showing a button over the picture with the title “View larger” when the mouse hovered over it and it went off and on with the fade effect and some good looking collapsible panels. The items were shown on the basis of a filtering criteria given by the user and I put that section in an UpdatePanel control. On first page load every thing was working A-OK but as soon as there was any Asynchronous Post back, whether from a drop down list or from any check box, all the jQuery effects just vanished.
So the problem was quite vague when I first looked at it, it wasn’t clear as to why the application is behaving this way so I started testing every peace of javascript I could find and mind you I didn’t know any thing about jQuery by that time so when I came up to this I started googling it too, studied how it worked.
Then I came to know that there’s an event called the Ready event, which is fired once to DOM is fully loaded. and I noticed in the code that there were lots of things that were getting initialized in this event which was found in three different files in my case. So I took out the code in the “ready” events and put them in 3 separate JavaScript functions, called them from the ready event AND then did the part that ACTUALLY solved the issue. WHAT WAS THE ISSUE?? Well, the issue was that after an async post back the ready event isn’t fired. So I had to find a way to actually call a JavaScript function after ANY Async post back. After a little Googling I came up to this fine link
where Zeeshan Malik explains how to do that. So I did it like this:
I wrote this function in the master page
function load(){
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
}
function EndRequestHandler(){
ReadyFunction1();
ReadyFunction2();
ReadyFunction3();
}
and called this in the onload event the body tag as
<body onload=”load()”>
And the problem got knocked out!
For your convenience, here are some useful links.
http://www.sitepoint.com/article/ajax-jquery/
http://docs.jquery.com/Tutorials:AJAX_and_Events
Happy Programming Folks!
Hi Imran
I found an alternative solution that could also work. The problem seems to be like you said: the jQuery ready function is not called on an async postback. The pageLoad() ASP.NET ajax method is called however.
It seems that ASP.NET ajax and jQuery don’t get along together when it comes to the DOM load event, and ASP.NET ajax takes preference to the jQuery ready function.
So in short replace all jQuery: $(document).ready() instances in your code with function pageLoad(). This I think is a more elegant solution then intercepting the end_request event and altering the master page.
Hope this adds to your useful article.
Thank you very much … its a very good article and helped me a lot …. thanks again
Thanks, I appreciate the comment.
Thank you very much for this simple solution.
Hi there,
Thanks for sharing the info, really appreciate this. Yes I think its a much more elegant solution, I’ll definately try and implement that on my end and see what happens.
Cheers.
thanks, very useful, i believe in jquery again
Dnoxs, thank you vary much: it works as you described. You made my day. Just a clarification for novices like me: you need to include the word ‘function’, i.e. ‘function pageLoad()’, not just ‘pageLoad()’.
Glad to know that, you’re most welcome
Hi dnoxs,’
Thanks a lot!!! Your suggestion worked for me!!!
thanks again.
dnoxs,
You rule! Plain and simple… Thanks for the quick tip on the pageLoad function.
Exactly what I was looking for, dnoxs! Thanks a lot; you made my night.
Just the solution i was looking for thanks!
Thanks. Nice informaton
Hi dude
thanks for the nice solution
hey yo! Thanks man, I really appreciate the comment.
Really it work’s great…..
i’m trying since couple of hour
this is exactly what i’looking
thank you, you’re awesome
Hi there,
I got the same problem, anyone mind helping me out?
in init.js i use:
jQuery.noConflict();
jQuery(document).ready(function($){
CODE
});
Can’t seem to figure out where to place
function pageLoad()
Thanks a lot.
I had spend 3 days developing a new Web User Control, and when I added to the main project, it don’t work.
You have saved my day.
Solution
http://encosia.com/2009/03/25/document-ready-and-pageload-are-not-the-same/
Great post, thanks a lot!
I was using the following JQuery tooltip which was not working on post backs:
$(document).ready(function(){
$(‘.tTip’).betterTooltip({speed: 150, delay: 300});
});
I change this to the following to get it working on post backs:
function pageLoad(){
$(‘.tTip’).betterTooltip({speed: 150, delay: 300});
}
nice, that got me what i needed