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);
}
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.
No comments:
Post a Comment