Handling Thickbox and Facebox jQuery plugins with LiveQuery for AJAX
Posted by admin on February 27th, 2010I found an interesting JQuery plugin to code painless AJAX modules.
It’s called LiveQuery which binds events/callbacks/plugins to the elements, will be loaded into DOM through AJAX requests.
Where to use LiveQuery?
We know that jQuery has most famous ready(); method that executes after DOM completion. So, what’s the point of LiveQuery?
Okay, let’s take an example.
We need to load some healthy amount of HTML elements using AJAX which includes hyperlinks, table, forms etc. and then we want to bind events to them. How would we achieve that?
Simple solution would be write a callback function.
$.get('ajax_url',serialize_params_map,function(data){
// manipulate data variable;
// execute callback to bind events;
});
We may think, it would be great we don’t have to attach manual callback after each and every ajax call and should be simple as
$(document).ready(
function(){
//execute callback to bind events;
}
);
To understand my point more clearly, take a practical example.
- ThickBox Problem
// thickbox.js (jQuery plugin) //on page load call tb_init $(document).ready( function(){ //pass where to apply thickbox tb_init('a.thickbox, area.thickbox, input.thickbox'); imgLoader = new Image();// preload image imgLoader.src = tb_pathToImage; } );Look at line6.
It only executes one time when DOM get completed.What If we need to bind thickbox to new elements, inserted through AJAX request?
One solution could be call tb_init(’..’) as “callback function” to every AJAX request
$.get('ajax_url',serialize_params_map,function(data){ // manipulate data tb_init('a.thickbox, area.thickbox, input.thickbox'); //pass where to apply thickbox });or use LiveQuery ONLY ONCE i.e.
$('a.thickbox').livequery( function(){ tb_init('a.thickbox'); } );So, what would above code do?
It simulates $(document).ready(); function. Also observers for any “set of newly matched elements” inserted in DOM. So whenever “AJAX request” insert new elements in DOM, above function will bind thickbox to them. - FaceBox Problem
The same case with facebox… and could be with many more jquery plugins. To make facebox work properly with post loaded HTML elements, use…jQuery(document).ready(function() { $('a[rel*=facebox]').livequery( function(){ $(this).facebox(); }); });instead of
jQuery(document).ready( function($) { $('a[rel*=facebox]').facebox(); } );
The conclusion is…
jQuery + painless AJAX modules => efficient use of LiveQuery.
Recent Comments