jQuery plugin and Ajax

In the time when a data driven website’s only way to deliver the tiniest information to the user was a full-fledged web request, the advent of AJAX (Asynchronous JavaScript and XML) was one of the most significant milestone in dynamic web development. The browsers were able to do partial updates to their DOM (Document Object Model) and developers rejoiced to make web browsing experience more efficient and smoother.

AJAX came with the price of pitfalls like lower control to the browser user as well as bookmark unfriendliness among other things. But when compared to the amount of ease of use it brings to your web application, I believe introducing AJAX in your web application is more of a requirement that just a fancy addon at this point.

One of the benefits of having the capacity to do partial updates is the ability to create HTML elements on the fly based on the data retrieved from these AJAX requests. This dynamic restructuring of the DOM ( a fancy Acronym for HTML structure on the page :)) sometimes changes the location of elements on the page and hence messing up any jQuery events that might have been attached to these elements.

Well on a normal day you would have a simple routine to re-attach all the events on your page every time you make restructuring on your page (AJAX calls or DOM manipulation using Javascript). But when it comes to jQuery plugins this is not that simple as most jQuery plugins tend to create a lot of HTML elements to serve their purpose. Like for example jGeez creates toggle buttons and help button around the target input element. Obviously we can’t simply reapply the plugins to the elements as that would cause your plugin to regenerate the adorning elements. So the jQuery plugin author has the responsibility to empower the developers with a method to reattach the plugin events when he/she moves the target element around.

So the bottom line is the previous version of jGeez stops working when you are using AJAX or javascript to restructure your DOM, Thanks to Getnet from ethiowire.com who pointed out this bug. But in the new version of jGeez(1.2.0.0) I have added features where the plugin detects whenever the page does AJAX calls and reattaches all the events after the AJAX call is completed. I will just try to go through the technical details of how I have implemented the fix, if you are not interested in the inner workings click here to jump start your experience the latest and greatest jgeez library.

The first thing you need to do is to make sure you make the event handlers independent of (loosely couple) the business logic used to modify the DOM structure when the plugin is first applied, meaning avoid a code like this

$(this).click(function(event){

//do stuff

});

Instead use

//hold the reference in a local variable array

eventHandlers=[];

eventHandlers.push({element:$(this),eventName:’click’,handler:function(event){//do stuff});

Because you can iterate through each of the objects, you can reattach the event handlers whenever you want to. Well that is the methodology I used to make sure the utility is available for developers to invoke “reattaching” on jgeez plugins.