Announcing jQuery Live-Ready 1.0 Release

jQuery Live-Ready is a combination of jQuery.ready and jQuery.live. Often jQuery-Plugins manipulate content by just registering to $.ready and then go modify the DOM. But whenever additional content is added to a page, that won’t benefit from the registrations.

With $.live in turn, you can subscribe to events even for elements to be added in the future. But live does support the ready-event.

This is where liveReady comes in.

Getting Ready

With liveReady, instead of registering to $.ready, you register your callback to $.liveReady like this:

$.liveReady(function () {
  // this is $(document), or the element(s) added
  this.find('a').css('color', 'red');
});

The registered function will be called on Document-ready and whenever the Extension liveReady() is called on jQuery elements.

Attention: When ‘a’ is the top-level element added, this.find(‘a’) will not return anything. Have a look at the ‘Filtering to a Selector’ section.

Now, when you create new content, you can call liveReady() on the new elements before or after adding them to the dom:

// before (no parent)
$(document).append($('<p>Some <a href="#">Link</a></p>').liveReady())

// after, recommended
var $content = $('<p>Some <a href="#">Link</a></p>');
$(document).append($content);
$content.liveReady()

Filtering to a Selector

In many cases, you only do something with a subset of DOM elements within the ready-Event. With liveReady you then register your function to a specific jQuery selector:
$.liveReady('a', function () {
  // this is $(document), or the element(s) added
  this.css('color', 'red');
});

Now, whenever $(‘…’).liveReady() is executed on new content, the registered function will run with the element itself, if it is an ‘a’, or with all ‘a’-elements liveReady finds within.

Download and Live Hosting

The project is in it’s initial release 1.0. The project code is hosted at Bitbucket. If you find any issues feel free to add them there.

I have also submitted the plugin to jQuery Plugins.

You can download the release archive including a demo here. Or just check out the jQuery Live-Ready 1.0 Demo.

Live Hosting from bitbucket CDN is also available:

<!-- full version -->
<script type="text/javascript" src="https://bitbucket.org/larscorneliussen/jquery.liveready/downloads/jquery.liveready-1.0.js"></script>

<!-- minified version -->
<script type="text/javascript" src="https://bitbucket.org/larscorneliussen/jquery.liveready/downloads/jquery.liveready-1.0-min.js"></script>

 

Happy coding.

13 thoughts on “Announcing jQuery Live-Ready 1.0 Release

  1. you code not run for me
    I generated content in a div
    in $.liveReady, I add code js to check a checkbox is checked or not to disable or enable a textbox. but nothing happended.
    I hope that you should review your plugin again.

  2. Hello. I’m using your plugin in a greasemonkey script. It should affect all the posts on a Facebook wall, including the newly loaded ones.

    My code:

    $(document).ready(function() {
    $.liveReady(function(){
    var words = [‘word1’, ‘word2’];

    jQuery.each(words, function() {
    $(“.uiStreamStory:contains(‘”+this+”‘)”).hide();
    });
    });
    $(‘.uiStreamStory’).liveReady();
    });

    It works fine with the firstly shown posts, but doesn’t affect the newly loaded posts (after the user scrolls down or click on the link to load older posts).

    Can you tell me if the mistake is mine, or the problem is in something else?

    • Hi Dejan,

      a couple of things…
      – do not put $.liveREady with in $(document).ready
      – try to use it with a direct selector

      $.liveReady('.uiStreamStory', function(){
      var words = ['word1', 'word2'];
      var $el = this; // equals to .uiStreamStory-element
      jQuery.each(words, function() {
      if ($el.is(“:contains(‘”+this+”‘)”))
      $el.hide();
      });
      });

      The code will run for all .uiStreamStory on document ready.

      When ever you automatically insert new html, just run .liveReady() on the top element of it. If it itself is a .uiStreamStory, it’ll run the registered function. And if it contains any .uiStreamStory, it will run the function on each of them.
      _
      Lars

  3. It seems odd to have to individually call $(‘selector’).liveReady(); after setting up an initial $.liveReady(‘selector’, function() {…});

    With the jQuery live() you just append it to a selector and any time that selector is added to the DOM it has the event handler added to it, you do not need to specifically initialize it as you do here…

    Doesn’t having to explicitly call $(‘selector’).liveReady() sort of defeat the idea of live() to begin with? If I have to make a call every time the new elements are ready I might as well just have done whatever I was going to do anyways by using other JS?

    • Of course, it would be much better, if you hadn’t to call liveReady()…

      But I don’t know how to get to know about new elements added to the dom. I also looked at jquerys source code, but couldn’t find out.

      Still there is much value in the plugin. It applies open/closed principle, and decouples the components/plugins you are running. Everywhere you add new content, you should know about liveReady, but you don’t care about actual implementations hooking in.

      Lets say, you use boxy, jquery.syntaxhighlighter, and lightbox – then all of those you had to configure twice or more: once for document.ready, and then at each location where you add html to your dom. Now, with jquery.liveready you still just configure it one place – and you got one extra line at each place where you add something.

      • Ah, gotcha. I agree it is a nicer, one-implementation system for having this behavior work. It IS a lot nicer than what I had before which was calling a handler method every time any of my AJAX finished up…

        Thanks for getting back to me!

  4. Hello Lars, first of all I want to thank you for your code.. it seems to be what I was looking for, hope you can help me with this.. (it’s not a long code)

    I am using the coda-slider plug in a page which is running fine by itself, but when I want to load that same page through ajax, the code has to be called again in order to work. I’ll post below, the original code, and what I tried, but can’t get to work.

    //original working
    $().ready(function() {
    $(‘#coda-slider-1’).codaSlider({
    dynamicArrows: false,
    dynamicTabs: false,
    });
    });

    //liveReady (pasted in the “loader” page along with the link to your hosted code)
    $().liveReady(function() {
    $(‘#coda-slider-1’).codaSlider({
    dynamicArrows: false,
    dynamicTabs: false,

    });
    });

    Thing is, that even the pictures in the slider won’t get loaded when using this.

    Hope you can help me with this, thank you.

    Mario

  5. Hi, I’m trying to use your liveReady along with the jquery-tablesorter-addon.
    My project is using a table which is completely replaced by a new one with the same id using ajax.

    If I use this:
    $.liveReady(function() {
    $(“#ctl00_Inhalt_gvParticipants”).tablesorter();
    });

    or

    $.liveReady(“#ctl00_Inhalt_gvParticipants”, function() {
    this.tablesorter();
    });

    it will work on first page-load but not after the first ajax-request.

    Didn’t I understand the functionality or is not possible?

    Hope you can help me.

    Stephe

    • Hi Stephe,

      with the calls you register your handlers, and call them once on document.ready. After you do your ajax request, you have to inform liveready by calling .liveReady() on the added content.

      This one was correct for registration:
      $.liveReady(“#ctl00_Inhalt_gvParticipants”, function() {
      this.tablesorter();
      });

      For example:
      $('#ctl00_Inhalt_gvParticipants').liveReady();

      Then all previously registered liveReady-handlers will be called for all matching selectors (self or descendants).

      Did that help?

      _
      Lars

  6. Hey Lars
    thanks for that pretty peace of code, saved me a lot of worktime!

    Unfortunately i have a little question/problem with the plugin. Is it possible to assign an eventhandler to a dom element from within the liveready function, instead of using jquerys live/delegate? Is there any reason not to do that?

    I tried, but couldn’t get it to work. (nothing happens when the event should be triggered) That would be a very nice feature, because it’d be much easier to group/organize my code.

    sebastian

  7. Lars,

    I have a reports page on my site with two levels of ajax. After selecting the report from a side menu, I ajax in a form. Submitting the form then ajaxes in the report (leaving the form on the page in case you want to change parameters). The page and both levels of ajax use assorted jQuery plugins … and they were stepping on each other. Using liveReady, I set up the various jQuery on initial page load, and then wake them up as needed using ‘liveready’ … and it all works fine now. Thanks for that.

    FWIW, without liveReady, there seemed to be order dependency problems such that jQuery multiselect (in level 1 ajax) was broken by subsequent calls to jQuery tablesorter or jQuery button (in level 2 ajax).

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s