Wednesday, August 22nd, 2007

jQuery Live

Category: jQuery

Brandon Aaron has written a new jQuery plugin Live Query:

Live Query utilizes the power of jQuery selectors by binding events or firing callbacks for matched elements auto-magically, even after the page has been loaded and the DOM updated. It is like Behaviors 2.0. Live Query also unbinds events or fires a second callback for elements that are changed and no longer matched. Live Query gives you a live DOM experience.

The following code uses a function based Live Query to implement the jQuery hover helper method and remove it when the element is no longer matched.

javascript

  1. $('li')
  2.   .livequery(function() {
  3.     $(this)
  4.       .hover(function() {
  5.         $(this).addClass('hover');
  6.       }, function() {
  7.         $(this).removeClass('hover');
  8.       });
  9.   }, function() {
  10.     $(this)
  11.       .unbind('mouseover')
  12.       .unbind('mouseout');
  13.   });

It may also be included into the core of jQuery v1.2 with more information found in the jQuery roadmap.

Take a look at demos in action, read the docs, and download it.

Posted by Dion Almaer at 8:14 am
16 Comments

++---
2.6 rating from 213 votes

16 Comments »

Comments feed TrackBack URI

Just a quick note, for those of you wondering how this is different from Prototype Behaviour or Dojo Behavior – this takes a normal jQuery selector and persists it, in real time, across the whole DOM. This means that you can set one query (and without ever having to re-call it, or re-initialize it) its effects will be felt everywhere: Just like CSS. This is a really important distinction, and I’m happy that it was able to be done with virtually no speed-hit overhead.

As another note, this probably won’t be included in jQuery 1.2, but it is shaping up to become a fantastic plugin.

Comment by John Resig — August 22, 2007

Looking at the source, LiveQuery works by looping through the list of selectors and performing a jQuery query every 20 milliseconds to see if there are any new elements and then running the init code if they exist.

Comment by Jordan — August 22, 2007

@Jordan: That’s correct – the important point is that it’s all done asynchronously, so it doesn’t disturb the normal operation of the page – which means that there’s no performance hit whenever you modify the page or whenever you do normal selectors.

Comment by John Resig — August 22, 2007

@Jordan: There is some discussion of the purpose of the 20 millisecond interval over in the comments on my blog. It is not exactly as simple as you put it.

Comment by Brandon Aaron — August 22, 2007

with virtually no speed-hit overhead.

I see, a lightweight queue of jQuery-event-bound triggers. Why check for elements when you get get DOM changes to announce themselves? Smart solution, tiny code, I know I’ll be liveQuery-ing very soon. Many thanks!

Comment by Charles — August 22, 2007

Oh no:

$(‘a’).livequery( function()
{
$(this).after(‘<a href=”#”>Another anchor</a>’);
return false;
});

Comment by Karel Fučík — August 22, 2007

how much CPU does it use to check the entire DOM every 20 seconds? seems you could be more efficient wrapping append/prepend/html to just check when something actually changes?

is there an onDOMChange event for the entire page, regardless of child nodes stopping the bubbling etc?

Comment by carmen — August 22, 2007

er.. 1 millisecond is 1 second in ‘web time’. i only ask because i just had ctrl-l take 20 seconds (no joke) as a bunch of tabs were restoring, and i cant imagine the thought of firepig getting even slower thanks to some new jQuery ‘hack’ that everyone starts using..

Comment by carmen — August 22, 2007

I just don’t know what to say… Two hours ago, while reflecting on a recently completed project, I concluded that someone has to write JQuery Lite or I will do it myself. This will definitely make code management and maintenance of larger projects easier.

Comment by Blago — August 22, 2007

@carmen – We do wrap the change events. There’s no hit if you don’t do anything, and the loop doesn’t run if there’s nothing to watch for. For example, if you perform an action which modifies the document (like doing an append) then a “check the page” operation gets thrown on the queue. When the timeout gets called it sees if there’s any “check the page” actions waiting, and if so, re-runs the queries. But this is nice because of two things:

* There’s no performance hit when you perform the page manipulation.
* There’s no overall performance degradation since the query happens asynchronously.

It’s really pretty cool.

Comment by John Resig — August 22, 2007

@carmen: Sorry you are having browser issues but Live Query is no ‘hack’ nor does it check the entire or even part of the DOM every 20 milliseconds.

Comment by Brandon Aaron — August 22, 2007

sorry, should have read the code before commenting :) hopefully with the native selectors API and hooks into internal change notifications, this plugin isn’t necessary one day. but a great solution for now as well..

Comment by carmen — August 22, 2007

jQuery Lite : jQuery :: Coke Zero : Diet Coke ??
More taste, even less calories, sounds good to the Marketing department?

I feel a breeze, is that Vaporware or can we see an alpha soon?

Comment by Charles — August 22, 2007

Definitely a cool plugin with lots of potential, I’ll have to try it out later.

Comment by Andy Kant — August 22, 2007

Its a really good plugin, but is not a complete solution for the event attaches in a dom change. I a large project I noticed that I lost a lot of performance, make the page really slow across a lot of request. Im in a project all in ajax, and when I make this control of events by hand, the performance goes up again. Its very more hard, but I was addict with livequery using like a click, but in a large project, you have to take a control of him.

There´s some tool to see this happenning? See the events attached in DOM and see if they are increasing to make a comparison???

thanks everyone….

Comment by Alexandre Magno — November 27, 2007

Why not give a try to “jQuery live bind”?

You even could use it like this(bind an element before create it):
$.live_bind(“.kkkk .ppp[title=’333′]:nth-child(3)”, ‘click’, alr1);
$(‘.kkkk’).append(‘<div class=”ppp” title=”333″>hello</div>’);

http://plugins.jquery.com/project/live_bind

Comment by diyism — November 12, 2008

Leave a comment

You must be logged in to post a comment.