jQuery datepicker not working on dynamic HTML

I have asked this question before and also here. However, none of the proposed answers worked. And days after, the problem is still not resolved. Hence my asking again, with a few more details to see if someone could help me get it resolved.

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>

Everything works fine 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. However, when I use Chrome to inspect the datefield field, I see that it has added the jQuery datepicker class hasDatepicker to it, indicating that the call to the jQuery.datepicker() method worked. But on click of the field, I don’t see the date picker pop up.


Source: ajax

Leave a Reply