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

One Response to “jQuery Plugin: Live Query”

  1. Avatardiyism
    Posted: Aug 24th, 2008 at 6:31 pm

    Why not give a try to “jQuery Live Bind”:
    http://plugins.jquery.com/project/live_bind

    Reply to this comment.
    		1
SexyComments by BorkWeb

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 (188) - jquery live (58) - jquery ajax search (48) - live search jquery (46) - jquery onclick (43) - jquery database (31) - livesearch jquery (27) - jquery click return false (27) - jquery bind click (26) - jquery bind (23) - jquery href (18) - jquery right click (17) - jquery databind (14) - jquery livequery (14) - livequery (14) - jquery link preview (13) - livequery examples (10) - jquery live preview (10) - jquery live query (10) - jquery rebind (9) - jquery click bind (9) - jquery append href (9) - jquery click counter (9) - jquery remote (9) - jquery alert (9) - jquery bind function (9) - live query (9) - jquery return false (8) - whatever (8) - jquery onclick href (7) - jcarousellite ajax (7) - jquery search live (7) - jquery append event (7) - jquery onclick return false (7) - jquery search (6) - jquery live_bind (6) - ajax search jquery (6) - jquery attr onclick (6) - jquery predictive search (5) - jquery ajax bind (5) - JQUERY onclick function (5) - link preview jquery (5) - jquery ajax live search (5) - jquery query database (5) - jquery append (5) - jquery href click (5) - jquery onclick alert (4) - live jquery (4) - jquery append onclick (4) - jquery ul (4) - jquery duplicate Form (4) - jquery onclick append (4) - jquery live search results (4) - jquery counter (4) - jquery and database (4) - jquery append bind (4) - domain name checker jquery (4) - jquery live bind (4) - ajax jquery database (4) - jquery database search (4) - livequery tutorial (4) - right click jquery (4) - jquery livesearch (4) - jquery manipulate href (4) - jquery assign onclick (4) - jquery onclick event (4) - jquery cross domain plugin (4) - jquery add onclick (3) - livequery javascript (3) - jquery ul append (3) - jquery live search database (3) - database and jquery (3) - jquery livequery tutorial (3) - livequery bind (3) - jquery bind ajax (3) - javascript live query (3) - live query ajax (3) - jquery bind change (3) - jquery cross domain ajax plugin (3) - form plugin jquery bind ajax (3) - jquery click() return false (3) - jquery href function (3) - jQuery a href onclick (3) - ajax live search jquery (3) - jquery a click return false (3) - jquery href click event (3) - jquery live search plugin (3) - livequery example (3) - jquery live search with database (3) - jquery click (3) - jquery append events (3) - jquery search plugin (3) - jquery life query (3) - href jquery (3) - live search with jquery (3) - jquery livesearch plugin (3) - jquery click href (3) - ajax live query (3) - jquery bind event (3) - jquery search from database (3) - jquery domain check (3) - jquery ajax live (3) - live query jquery (3) - append in jquery (3) - jquery cross domain scripting (3) - ajax jquery bind (3) - jquery auto preview (2) - search jquery ajax (2) - jquery db search (2) - jquery form onclick (2) - jquery with a href click (2) - DUPLICATE FORM SUBMISSION JQUERY (2) - livequery function document.ready (2) - jquery append to href (2) - jquery return (2) - jquery bind plugin (2) - jQuery Live Ajax Search Plug-in (2) - jquery bind click duplicate (2) - jquery append example (2) - jquery live plugin (2) - livequery and jquery form plugin (2) - live query ajax form submission (2) - live AJAX search query (2) - livequery 1.2 (2) - jquery ajax queries (2) - jquery predictive (2) - jquery .click return false (2) - jQuery domain (2) - livesearch plugin jquery (2) - click counter jquery (2) - bind function jquery (2) - jquery append rebind events (2) - domain check jquery (2) - jQuery Live Ajax Search (2) - jquery database query (2) - livequery plugin (2) - append to href jquery (2) - jquery ajax database (2) - jquery wordpress live search (2) - ajax search jquery wordpress (2) - live query tutorial (2) - jquery livequery form (2) - livequery examples ajax (2) - jquery remote domain queries (2) - append tag with jquery (2) - cross domain jquery plugin (2) - ajax query link click (2) - append href jquery (2) - jquery plugin livesearch (2) -