javascript - jQuery date picker not working on ajax-generated input field - Stack Overflow

admin管理员组

文章数量:1024630

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 ment by @AkshayKhandelwal

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 ment by @AkshayKhandelwal

• javascript
• jquery
• ajax

Share Improve this question Follow edited May 14, 2015 at 12:15 NaijaProgrammer asked May 14, 2015 at 11:14 NaijaProgrammerNaijaProgrammer 2,96322 gold badges2626 silver badges3333 bronze badges 7

• execute the datepicker activation code after the ajax generation of the input field – Akshay Khandelwal Commented May 14, 2015 at 11:15
• @AkshayKhandelwal, that's exactly what I'm doing and it isn't working – NaijaProgrammer Commented May 14, 2015 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 Commented May 14, 2015 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 Commented May 14, 2015 at 11:17
• @AkshayKhandelwal, I have updated my question with more code. – NaijaProgrammer Commented May 14, 2015 at 12:16

 |  Show 2 more ments

4 Answers 4

Sorted by: Reset to default 2

Try like this

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

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.

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!

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();
 });

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 ment by @AkshayKhandelwal

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 ment by @AkshayKhandelwal

• javascript
• jquery
• ajax

Share Improve this question Follow edited May 14, 2015 at 12:15 NaijaProgrammer asked May 14, 2015 at 11:14 NaijaProgrammerNaijaProgrammer 2,96322 gold badges2626 silver badges3333 bronze badges 7

• execute the datepicker activation code after the ajax generation of the input field – Akshay Khandelwal Commented May 14, 2015 at 11:15
• @AkshayKhandelwal, that's exactly what I'm doing and it isn't working – NaijaProgrammer Commented May 14, 2015 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 Commented May 14, 2015 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 Commented May 14, 2015 at 11:17
• @AkshayKhandelwal, I have updated my question with more code. – NaijaProgrammer Commented May 14, 2015 at 12:16

 |  Show 2 more ments

4 Answers 4

Sorted by: Reset to default 2

Try like this

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

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.

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!

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();
 });

本文标签： javascriptjQuery date picker not working on ajaxgenerated input fieldStack Overflow