jQuery Plugin: Live Query

August 22, 2007 | Filed Under Blog, Technology 

My hear is exploding with happiness and joy at the existence of Brandon Aaron. He has built a sweet jQuery plugin (Live Query) that reduces complexity in Ajax and general DOM manipulation coding by a great deal (when it comes to applying behaviors). First, let me tell you the problem (if you don't already know):

Say I build a web application where I want to assign an onClick event to an <a> tag. In jQuery I'd do it like this:

First the HTML:

PLAIN TEXT
HTML:
  1. <a href="another.html" class="another">Grab Another!</a>
  2.  
  4.   <li><a href="whee.html" class="whatever">Bork</a></li>
  5.   <li><a href="whee.html" class="whatever">Bork</a></li>
  6.   <li><a href="whee.html" class="whatever">Bork</a></li>
  7. </ul>

Now lets do up the JavaScript:

PLAIN TEXT
JavaScript:
  1. $(document).ready(function(){
  2.   $('a.whatever').bind('click',function(){
  3.     alert('ZOMG Hai');
  4.     return false;
  5.   });
  6. });

Simple, right? Yeah. It is. Nothing new. Now...say that I manipulate the DOM and add in another <a> tag with the class "whatever" that I want the same even applied (with or without Ajax, doesn't matter). Here's what I would have had to do in the past:

PLAIN TEXT
JavaScript:
  1. $(document).ready(function(){
  2.   $('a.another').bind('click',function(){
  3.     $('ul').append('<a href="whee.html" class="whatever">Bork</a>');
  4.  
  5.     $('a.whatever').bind('click',function(){
  6.       alert('ZOMG Hai');
  7.       return false;
  8.     });
  9.  
  10.     return false;
  11.   });
  12. });

See that? Kinda complex. Things become quite complex when you begin doing Cross Domain Scripting via Remote JavaScript calls (which is what is heavily used in one of the apps I have done front-end development for).

The Live Query plugin is a beautiful thing as it "auto-magically" binds events to dynamically added elements within the page as they appear! So ALL of that JavaScript from both examples becomes:

PLAIN TEXT
JavaScript:
  1. $(document).ready(function(){
  2.   $('a.whatever').livequery('click',function(){
  3.     alert('ZOMG Hai');
  4.     return false;
  5.   });
  6.  
  7.   $('a.another').bind('click',function(){
  8.     $('ul').append('<a href="whee.html" class="whatever">Bork</a>');
  9.     return false;
  10.   });
  11. });

Yup. That's it. Bind a livequery event to an element and as elements that match appear on the page...BAM! The event is applied.

There are some more advanced things you can do with the plugin and you can find those out at the Live Query site.

Tags: , , , , ,

Related Articles:

Discuss This Article

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comment Preview:

 (412) - jquery live search (80) - jquery live (24) - jquery ajax search (18) - live search jquery (14) - jquery onclick (12) - jquery bind click (12) - jquery bind (11) - jquery click return false (9) - jquery database (7) - jquery bind function (6) - jquery append href (4) - JQUERY onclick function (4) - jquery return false (4) - jquery remote (4) - jquery click bind (4) - live query (4) - jquery onclick append (3) - jquery onclick href (3) - domain name checker jquery (3) - jquery append onclick (3) - javascript live query (3) - jquery ajax live (3) - whatever (3) - jquery append bind (2) - jquery live searching (2) - jquery manipulate href (2) - href jquery (2) - jquery ajax database (2) - jquery remote domain queries (2) - jquery ajax bind (2) - jquery bind a href (2) - jquery with a href click (2) - jcarousellite ajax (2) - jquery .click a (2) - jquery bind change (2) - jquery ul append (2) - jquery href click event (2) - jquery click onclick (2) - jquery .click return false (2) - jquery bind jcarousellite (2) - ajax jquery database (2) - live AJAX search query (2) - jquery auto preview (2) - jquery click href (2) - jquery bind ajax (2) - jquery click (2) - jquery bind click duplicate (2) - ajax search jquery (2) - jquery onclick return false (2) - jquery live query (2) - jquery livequery tutorial (2) - jquery livequery (2) - jquery live preview (2) - jquery search from database (2) - querying from ajax (1) - jquery binding function to a (1) - append to href jquery (1) - livequery click change (1) - jquery append element click event (1) - calling jquery function onclick (1) - jquery querying the document (1) - jquery append to event (1) - jquery click return=false (1) - jquery wordpress live search (1) - ajax live counter (1) - jquery domain check (1) - jquery right click (1) - wordpress ajax query (1) - jquery appended manipulate elements (1) - jquery plugin bind (1) - function jquery onclick (1) - ajax cross domain calling jquery (1) - livequery('click', function(event) { ie (1) - ajax databind (1) - ajax plugin for database query search (1) - ajax live query (1) - jquery click() return false problem (1) - jquery onclick dynamically dom (1) - jquery avoid onclick (1) - jquery remote class (1) - jquery find a href (1) - jquery bind to dynamically added element (1) - jquery ajax binding (1) - ajax livequery ready event (1) - jquery 1.2 > livequery (1) - jquery bind ajax dom (1) - jquery click livequery (1) - jquery link preview (1) - jquery db search (1) - jquery ajax live search plugin (1) - ajax jquery return false (1) - using jquery livequery examples (1) - click jquery return (1) - jquery live searhc (1) - bind jquery return false (1) - jQuery Live examples (1) - jQuery in the DOM onclick (1) - jquery manipulate text (1) - livequery jquery functions (1) - jquery ul (1) - jquery .onclick append (1) - jquery databind (1) - manipulate dom with jquery (1) - jquery append to this (1) - jquery live forms (1) - jquery append click (1) - plug in query (1) - jquery bind click layerX (1) - jquery event return false (1) - javascript to bind UL LI to database (1) - jQuery remote DOM (1) - jquery cross-domain query (1) - jquery plugins alert (1) - jquery ajax query (1) - jQuery Live Ajax Search (1) - jquery database search (1) - jQuery Live Ajax Search Plug-in (1) - jquery plugin event binding (1) - jquery plugin livesearch (1) - jquery append element with class (1) - alerts in jquery (1) - click binding jquery (1) - database query with jquery (1) - cross-domain scripting with jquery (1) - jquery click href return false (1) - jquery bind function to class (1) - jquery live link preview (1) - jquery bind problem (1) - live search with jquery (1) - livequery ajax (1) - jquery live counter (1) - jquery ajax bind plugin (1) - jquery database event (1) - jquery search live (1) - bind jquery click (1) - jquery.append() event binding (1) - jquery crossdomain ajax (1) - append to end of href jquery (1) - jquery plugin link preview (1) - jquery: return false (1) - ready function query (1) - jquery function onclick (1) - live jquery (1) - livequery (1) - jquery crossdomain (1) - jquery ajax live search (1) - livequery tutorial (1) - jquery live search plugin (1) - jquery livesearch (1) -