21 Jul
jQuery UI Live
jQuery has some awesome widgets, but all of them need to be attached after an element is added to the page. With some quick changes, your widget can be added dynamically to any element using $.live().
With the release of jQuery 1.3 developers have been give a great new tool to aid in dynamic development, namely live events. We discussed this back in march.
The other day I found myself attaching some jQuery UI widgets to some vague selectors to try and improve usability of form inputs (for instance, adding a date picker for all inputs with that have "date" in their name).
Typical Date Picker
$(function() { $(':text[name*=date]').datepicker(); });
This works very well, and in ways we didn't expect. But what about dynamically adding inputs to a page. You would have to reattach the UI widget each time. Or do you?
New Live Date Picker
We can employ live events to listen for clicks on dynamically inserted inputs. The downside is that you have to listen for a click, as the live function doesn't support onfocus events.
$(':text[name*=date]').live('click', function() { $(this).datepicker({showOn: 'focus'}).focus(); });
This code will add the date picker to any text box that has the word date in it. Note the ({showOn: 'focus'}).focus() portion. This is a way of causing the datepicker to listen for an event which we can invoke.
What's the catch?
You aren't getting something for nothing here. The problem with this approach is that you have to click the elements to bring up the first widget. Every time after that, tabbing through will work just fine. This is only a problem for the minor use case of keyboard input. But since most of the widgets focus on the mouse for input, this may not be a huge problem.
The other problem comes from my use of [name*=date], as this selector will also include [name*=update]. You could use [name*=date]:not([name*=update]), but then [name*=update_date] wont work. Again, this is pretty easy to get around, so I trust you can solve this on your own.
Coding Techniques, Javascript
by Paul Sayre | 7/21/2009 10:36am
by Paul Sayre | 7/21/2009 10:36am
The solution I've worked out is this:
Instead of connecting the .live to a 'click' event, why not connect it to a custom event (say "myEvent"), and then after you dynamically add the new elements, trigger the event:
$(':text[name*=date]').live('myEvent', function(e, myName, myValue) {
$(this).datepicker({showOn: 'focus'}).focus();
});
As the last step of your code that dynamically adds the element, trigger the event (you can also trigger it at document load if there are elements that exist from load time:
$(':text[name*=date]').trigger('myEvent');
Left by Jeremy | Feb 26, 2010
Hi Paul
Thanks for this post, I was wondering how to attach a datepicker to a live event.
What I don't understand is the difference between calling $(this).datepicker() in the function and the usual way (selector).datepicker(). A normal call to datepicker works fine for me, but doing it in the live event, I end up with the error "inst is null". Googling only came up with http://stackoverflow.com/questions/2375280/jquery-datepicker-returns-inst-is-null-error-when-loaded-via-ajax, which was not helpful.
Also, calling the datepicker() would usually already set the onShow to focus, why does it have to be set specifically here?
My code looks like that:
$(document).ready(function() {
$("#start_date").live('click', function() {
$(this).datepicker({showOn: 'both', "dateFormat":"dd.mm.yy"}).focus();
});
});
I know the function is called everytime I click in the box, but that shouldn't be any problem?
Thanks for helping me out
Markus
Left by Markus | Mar 31, 2010