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.
-
-
$('li')
-
.livequery(function() {
-
$(this)
-
.hover(function() {
-
$(this).addClass('hover');
-
}, function() {
-
$(this).removeClass('hover');
-
});
-
}, function() {
-
$(this)
-
.unbind('mouseover')
-
.unbind('mouseout');
-
});
-
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.
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.
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.
@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.
@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.
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!
This sounds very interesting, could be nice for rich AJAX apps.
Just testing recursion, it works :)
$(’a').livequery( function()
{
$(this).after(’Another anchor‘);
return false;
});
Oh no:
$(’a').livequery( function()
{
$(this).after(’<a href=”#”>Another anchor</a>’);
return false;
});
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?
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..
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.
@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.
@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.
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..
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?
Definitely a cool plugin with lots of potential, I’ll have to try it out later.
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….
Looks interesting. Thank you for sharing this with us, I will check it out more later.
Christina, Web Developer currently working on the how to lose 20 pounds project.
Nice code
herbal acne treatment web programmer
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