jQuery date picker not working on ajax-generated input field

Question

I have an input field that is generated via Ajax from the server-side, and inserted into the current page. My problem is: the jQuery date picker is not working on the input field when it is generated via Ajax, but it works when the field is directly placed in the page.

Below, I include a scaled-down version of my code.

HTML code:

<form id="user-form"></form>

And here's the jQuery code that's supposed to activate the datepicker on it.

$.ajax({
    type: "GET",
    url: "/inputfield-loader.php" ,
    success: function(data) {
        $('#user-form').html(data);
        $("#datefield").datepicker();
    } 
});

And here's inputfield-loader.php

<input type="text" name="firstname" id="firstname"></div>
<div><input type="text" name="email" id="email"></div>
<div><input type="text" name="birthdate" id="datefield"></div>
<div><input type="submit"></div>

As I already said, this works well if the input field is just hard-coded into the page. But when inserted into the DOM as the return string of an Ajax call, the date picker no longer works.

Anybody has any idea how to fix this?

NOTE I have updated the question to include codes showing exactly what is happening, as per the comment by @AkshayKhandelwal

execute the datepicker activation code after the ajax generation of the input field — Akshay Khandelwal, May 14 '15 at 11:15
@AkshayKhandelwal, that's exactly what I'm doing and it isn't working — NaijaProgrammer, May 14 '15 at 11:16
Javascript is no magic. It requires the element to bind events, unless the element is present you cannot add the callback on the event on that element — Akshay Khandelwal, May 14 '15 at 11:16
Since you add the element after the dom is loaded you can go only with delegated events in jquery using on(). If you don't manage to load datepicker with a delegated event you can add the input from start on the page, keep it hidden and show it when necessary — Lelio Faieta, May 14 '15 at 11:17
@AkshayKhandelwal, I have updated my question with more code. — NaijaProgrammer, May 14 '15 at 12:16
possible duplicate of [jQuery datepicker not working on dynamic HTML](http://stackoverflow.com/questions/30368314/jquery-datepicker-not-working-on-dynamic-html) — Dropout, May 21 '15 at 08:48

score 2 · Answer 1 · answered May 14 '15 at 11:18

2

Try like this

success: function() {
  $('#datefield').datepicker();
}

answered May 14 '15 at 11:18

Kiren S

3,037
7
41
69

score 1 · Answer 2 · answered May 14 '15 at 11:18

1

The datepicker no longer works, because you replace the existing with a new one. So the binding is not valid anymore, because the referenced datepicker doesn't exist.

You have to rebind the datepicker after inserting the new datepicker into the dom.

answered May 14 '15 at 11:18

Tyr

2,810
1
12
21

gon250 · Answer 3 · 2015-05-14T11:24:20.010

1

You need to reinitialize the date picker in Ajax success, because you replace the existing with a newone.

$.ajax({
        type: "POST",
        url: "path" ,
        success: function(data) {
            $('#content').html(data);
            $("#datefield").datepicker();
        } ,
        error: function () {
            alert('Error');
        }
    });

Hope it's helps!

edited May 14 '15 at 11:24

answered May 14 '15 at 11:18

gon250

3,405
6
44
75

score 1 · Answer 4 · answered May 14 '15 at 12:24

When you are using $.ajax, maybe you should do as below:

var _ajax = function(url, data, type){
    return $.ajax(url, {
        data: data
        type: type
    })
}

And use it as below:

_ajax('handler.ashx', null, 'POST').done(function(response){
    // this block of code will execute when `ajax request` is finished !
    // for you case:
    $('#datefield').datepicker();
 });

jQuery date picker not working on ajax-generated input field

4 Answers4

Linked