jQuery datepicker not working on dynamically inserted html element

Question

This same question has been asked repeatedly, and the only time it has been answered is the one where the fellow was trying to initialise datepicker in the .onReady() function. I am not doing that. In fact, I am actually doing what that solution is doing; implementing datepicker immediately after creating the element.

Here is my template code:

<input type=text name="txt_you_History_From_Date_XXX" id="txt_you_History_From_Date_XXX" class="month-picker inputField" size=16 maxlength=16>

You will notice the month-picker class. Also, you will notice the "XXX" placeholders.

Here is the code that inserts that template code:

//
// find the next available id
//

for (var i = 0; ; i++) {
    if (!$("#divEmployer_" + i.toString()).length) {
        break;
    }
}


//
// get html, and replace the placeholders with id, then append.
//

$.get("content/contentHistoryEmployerTemplate.html", function (data) {

    while (data.indexOf("XXX") >= 0) {
        data = data.replace("XXX", i.toString());
    }

    $("#employerDIV").append(data);
});


//
// activate datepicker on all month-picker class elements
//

$('.month-picker').datepicker({
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'MM yy',
    onClose: function (dateText, inst) {
        $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
    }
});

//alert("here");

I do see the "here" alert if I uncomment it, so I know the code is being run.

The datepicker() throws no error.

I know the function is available because if I comment out my jquery-ui-min.js in my <HEAD>, a reference to datepicker() does then throw an error.

But the field does not respond when it receives focus. The datepicker does not appear.

Can anyone tell me what's wrong? Thanks!

Evan Davis · Accepted Answer · 2016-02-19 20:53:15Z

1

You are trying to instantiate the datepicker before the element exists. Put that code inside the async callback.

$.get("content/contentHistoryEmployerTemplate.html", function (data) {

    while (data.indexOf("XXX") >= 0) {
        data = data.replace("XXX", i.toString());
    }

    $("#employerDIV").append(data);

    // PUT DATEPICKER HERE
});

answered Feb 19, 2016 at 20:53

Evan Davis

36.7k7 gold badges53 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

KWallace Over a year ago

Are you sure? I employ .datepicker() after the .get() is complete. And the .get() includes the append(). I will try it, though. Thanks.

KWallace Over a year ago

Well, son of a gun! That worked! Can you take a moment and explain how the element does not exist in the way I was doing it originally? Is .get() an asynchronous call, maybe?

Evan Davis Over a year ago

100% yes, $.get is asynchronous. But like I said, you are trying to instantiate the datepicker before the element you want to bind it to has been inserted into the DOM (that's what your append call is doing.)

KWallace Over a year ago

Just so I'm clear.... I am trying to instantiate the picker before the element exists BECAUSE .get() is asynchronous. Right? .get() is triggered, and immediately after, the date picker is referenced. But because .get() is async, the .append() has not occurred yet. Is that the correct understanding? And, again, thanks!

Evan Davis Over a year ago

Yes; the callback (which contains the append) won't run until the get request returns. As you have it, the datepicker code runs before that callback fires. My update fixes it.

Collectives™ on Stack Overflow

jQuery datepicker not working on dynamically inserted html element

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related