jQuery UI Datepicker with AJAX and LiveQuery

June 3, 2009 | Posted In jQuery by Vance Lucas 9 Comments »

I’ve been a little aggravated lately trying to get jQuery UI Datepicker to work correctly on dynamically added fields for creating additional line items to invoices for InvoiceMore. It works great for fields already displayed on the page, but it tends to have major issues with dynamically added fields through AJAX or AHAH. Of course it won’t work out of the box with elements added dynamically to the DOM, so we can use jQuery’s $.live() event (new in 1.3 – you previously had to use liveQuery) to make it work. The Datepicker works by binding to the focus() event by default, but as of jQuery 1.3.2, the ‘focus’ event cannot be monitored by the ‘live’ event function. So we’re stuck with a little work around:

<script type="text/javascript">
$(function(){
	$('input.calendarSelectDate').live('click', function() {
		$(this).datepicker({showOn:'focus'}).focus();
	});
});
</script>

You would think just a simple “$(this).datepicker()” call wrapped inside the live() event would work, but it doesn’t. Turns out that in order to get it working consistently, you have to add the ‘showOn: focus’ config option as well as manually focusing on the element with the focus() event. Charming.

Tags: AJAX, Javascript, jQuery, jQuery UI, LiveQuery

Hire Me

Have a problem you need help solving?
I'm available for freelance work. (and I love solving hard problems)

Trackbacks

Comments

Jason Long, on June 16th, 2009 at 1:51 pm

Hey Vance – just ran into this today as well. Thanks for the tip!
Dave, on June 27th, 2009 at 10:44 pm

You saved the day. Thanks. I’ll keep you in mind for freelance work.
Jman, on July 22nd, 2009 at 1:36 am

Hi,
Vry nice solution, tnx.
How do you add parameters for datepicker with this solution?

like:
$(this).datepicker(‘option’, ‘dateFormat’, ‘yy-mm-dd’);

/J
Jman, on July 22nd, 2009 at 1:39 am

Found out
$(this).datepicker({dateFormat: ‘yy-mm-dd’, showOn:’focus’}).focus();

Sry for asking…

/J
Antonio, on August 25th, 2009 at 9:42 am

Hi,
Tnx for the hint, i’ve tried and seems to have some issues on FF 3.5, it works just the first time on every button/input.

This is then my workaround:

$(‘input.calendarSelectDate’).live(‘click’, function(){
$(this).datepicker({minDate : 0, maxDate : ‘+8M’}).datepicker(‘show’);
});
Megan, on September 25th, 2009 at 3:59 pm

Wow. I worked on this problem for hours before I found your solution…thank you! <3
Prashant, on September 29th, 2009 at 5:48 am

Nice..!! had been looking for this solution for a long time now…

one query though… since jQuery’s Live() does not support all events, we are still using livequery… so can you please help me by showing how to implement your above solution using livequery…

i know it might be simple, but since me a beginner its way above my head..

thanks in advance…

prashant.
Alex, on September 29th, 2009 at 7:48 pm

As helpful as this is, its still flawed, as it fails to load if the user tabs between fields instead of actually clicking on the input…
zipcoi, on December 14th, 2009 at 11:19 am

thank you so much.. it’s work.. ^^

Vance Lucas