you're reading...
.Net Programming Course, .Net Programming Training, .Net Training, .NET Training Ahmedabad, VB.NET classes

Why jQuery Only Works Once In Some Asp Dot Net Pages

I had a strange problem where a simple jQuery expression worked once only on an ASP.NET page. It turned out that .NET UpdateProgress controls on the same page were causing problems with partial page refreshing from AJAX calls.

I had the simplest of jQuery code on a user control:

$(document).ready(function () { $(‘#mybutton’).click(function () { $(‘.chartwin’).slideToggle(“slow”); }); });

First time in, the page displayed and everything looked good. In fact, I went some time before I realised that when the page was partially refreshed by an auto-postback from a dropdown control my button no longer worked.

On further investigation of the parent page, I found that my user control was sitting in a.NET UpdateProgress control section. The UpdateProgress provides a simple means of applying partial page refreshes; it’s a magical thing when it works but I’ve had trouble with them before, interfering with other javascript (including ASP.NET AJAX controls) on the same page.

The solutions can sometimes be quite involved, but in this particular problem I read of a simple solution.

The problem lies with the fact that the jQuery ready(function() only runs once when the page first starts. When the page is partially refreshed (as in an AJAX call) we need to effectively re-wire the jQuery events.

All.NET programmes will know the function PageLoad event very well, but there is an equivalent javascript event too. We can use this to reload our jQuery events each time the page is refreshed. Our code now becomes:

function pageLoad() { $(function () { $(‘#mybutton’).click(function () { $(‘.chartwin’).slideToggle(“slow”); }); }); }

That fixed it for me! The drawback is the hit that we have to load all the jQuery each time the page refreshes or partially refreshes instead of just once. It wasn’t much of a problem for me in this case.

Note that as we’re not checking the DOM is fully loaded (as when using (document).ready), you should add the code to the bottom of the page and after the scriptmanager has been loaded.

I worry when I have to start bodging javascript code because it can be difficult to test and debug. I’ve seen on the web that there are other more sophisticated fixes to this problem which leads me to think that this is not a definitive solution for all problems, so be careful. If you hear of a better way of doing this, let me know.

Article Source: http://EzineArticles.com/6420742

.Net Training, .Net Programming Course


About DS Training Academy

We provide live international training under all of our Triple Certification courses and trained by industry professionals. We provide Job oriented training course in ASP.NET, PHP, Web Designing, C and C , SEO, Flash, Flex in Ahmedabad We run .NET training centre, PHP Classes in Gujarat, SEO courses in Ahmedabad, Web design institute.


No comments yet.

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s

%d bloggers like this: