jquery-ui datepicker with jquery .on() event

Question

i'm using asual jquery-address, tabs example and want to add datepicker to the "Extra" tab. If i'm just adding

$(document).ready(function() {
    $( "#datepicker" ).datepicker();
});

it wont work. So i found out i have to use .live(). As im using jquery-1.7 .live() has changed to .on().

If i add this code datepicker only works on the second click.

$(document).ready(function() {
  $(document).on('click', '#datepicker', function () {
    $(this).datepicker();
  });
});

I saw in another thread a not recommended way to make it work like this

$(document).ready(function() {
  $(document).on('click', '#datepicker', function () {
    $(this).datepicker().datepicker( "show" );
  });
});

How am i using it correctly? Is there a recommended way to make datepicker work like i want in this example?

I think i need to use .on() because i want to reload the form that's including #datepicker with a .load() event.

Confederacy

Answer 1

To walk through your three approaches, the first one is failing because your is set up in a way such that #datepicker is not yet defined. You could check this by replacing it with alert($('#datepicker').length) and seeing that it is zero.

The second approach is taking two clicks because the datepicker is unaware of the first click because it was created after the click occured.

The third approach works because it forces the datepicker to appear after the first click. That is fine but a little wasteful because after you set up the datepicker, it has its own event listener that will make it appear when the click starts.

Going back to your first approach, it wasn't working because #datepicker didn't exist yet. You could make this work by moving ('#datepicker').datepicker() to after the point in the code where it is created.

If this is not possible, you can make it so your function only fires on the first click by using the third approach but switching from on to one. This will make it so the first click is your event listener that creates and shows the date picker. After that, your event listener will be removed and only the built-in date picker listener will exist.

That said, I really hate $(document).on('click', ... because it evaluates every time you click on the page. It captures the event at the document level and then compares every element in the target list to the selector. This is slow and really adds up if you have a lot of them. If you must use a delegated listener, you should move it to the closest parent. For example, if #datepicker always appears in #form1, you could do $('#form1').on('click', ... instead and reduce your processing.

Kleiman

I think i need to use .on() because i want to reload the form that's including #datepicker with a .load() event. i forgot to mention it in the Q. – Confederacy

If that's the case you could do: $(...).load(url, function() {$('#datepicker').datepicker()}); – Kleiman

This answer is no good. Switching from on to one doesn't work, when the target is loaded with ajax after DOM loads. You still have to click twice for datepicker to work. – Venepuncture

@DanStayntouch See this fiddle demonstrating my changes to the third approach. Once the element loads, the very first click presents the date picker. – Kleiman

Answer 2

Try code sample below:

$(document).on("focus", "#datepicker", function () {
    $("#datepicker").datepicker();
});

Diddle

Answer 3

Your solution turns the field with id 'datepicker' into a datepicker on clicking on it. So the first click turns the input field into a datepicker. The second click opens the datepicker (and by the way again turns the input field into a datepicker using jQuery).

How about adding the script to create the datepicker to the end of the Extra Tab HTML (the HTML that is loaded with this link: http://www.asual.com/jquery/address/samples/tabs/extras.html)?

<!-- This is "Extra" Tab -->
<input id="datepicker">
<script>
    $('#datepicker').datepicker();
</script>

Twelvemonth

yes that is working. what if i want to reload the form with .load() ? I would be forced to use the .on() / .live() event again? – Confederacy

"reload the form": Do you mean, reload the tab content, i.e. "Extra" tab? In this case the script is contained and executed again in the reloaded content. And datepicker will work again. So everthing fine. – Twelvemonth

Answer 4

I would use an event binder since it is using jquery.tab widget.

so something like,

$( ".selector" ).tabs({
activate: function( event, ui ) {

    if(window.location.indexOf("#Extra") >= 0)
    {
      $("#datepicker").datepicker();
    }
}
});

Then it should work. Please note if this does not work try binding the event like this

$(".selector").bind("activate",function(){});

Regards

Traduce

Answer 5

If you not found the solution within above reply.. Try this as last resort.

change load method.

You must load the content as html not text. Sometime we load it as text. The different will not visible. If you use jquery ajax, exchange load() to html(). This is not tested yet, by theory is posible

Reload again the script or command within the response.

Before we type like this

your html here

fix

your html here 
{script} you js code {/script}

This is happen if you load response as text ( load?? ), not as html. This method has been used on my (complicated) source code. This method cost lot bandwiths than normal, because loading again the code.

note:

$(document).on(..) is best practice

Robbirobbia