简体   繁体   中英

jQuery date picker not working on ajax-generated input field

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

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM