1

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.

As per @dfsq's suggestion, here is the fiddle. It comes closer to the original code: http://jsfiddle.net/35kgsjxk/

Community
  • 1
  • 1
NaijaProgrammer
  • 2,892
  • 2
  • 24
  • 33
  • 1
    Sounds like it could be an event delegation issue, have a look over https://learn.jquery.com/events/event-delegation/ Try outputting the `datefield` field first and then apply the datepicker. – llanato May 21 '15 at 08:29
  • 3
    Your code is fine, datepicker works. This is most likely styling problem. However it's not possible to help you unless you replicate the issue in fiddle with your styles. Otherwise noone can guess the reason. – dfsq May 21 '15 at 08:33
  • I used sample html echo, the code works http://jsfiddle.net/NF2jz/4940/ . What dou you see in `console.log($("#datefield"))` after you append using `.html()` – Shaunak D May 21 '15 at 08:36
  • I agree with dfsq. Also your file inputfield-loader.php is missing its leading `div` tag. – Bob May 21 '15 at 08:37
  • @dfsq, my thoughts exactly. However, I can't seem to figure out what style is causing the problem. As per replicating the issue, the page has a whole lot of codes, you know how it is, constants defined in a separate file, functions, etc that it would be virtually impossible to replicate the entire thing here. I only put the main elements of the datepicker code in the question. – NaijaProgrammer May 21 '15 at 08:46
  • You can extract main styles, copy generated HTML. It can be replicated standalone. If you can't provide a demo, then the best answers you can get are like those already posted, but I doubt they can help you. – dfsq May 21 '15 at 08:55
  • @dfsq, but I'm wondering how it works if the input field is just hard-coded into the page, but doesn't work when the input field comes as an ajax-returned string. – NaijaProgrammer May 21 '15 at 09:13
  • @dfsq, I have updated my post to include the link to the fiddle. http://jsfiddle.net/35kgsjxk/ – NaijaProgrammer May 21 '15 at 09:50
  • But in your fiddle datepicker works? – dfsq May 21 '15 at 09:54
  • @dfsq, yes it does, and that's what's baffling. I have tried disabling every style on the page, still no luck. Like I asked earlier, could you think of any reason why it works when the input element is hard-coded into the page, but doesn't work when it's the result of an Ajax reply? – NaijaProgrammer May 21 '15 at 09:56
  • Did you check headers that are sent with `inputfilelds-loader.php`? Have you tried adding `dataType: html` in `$.ajax{}`? – Tomasz Racia May 21 '15 at 11:22

2 Answers2

0

You're missing opening div tag in your inputfield-loader.php file, which can cause issue of hiding some elements.

If you're using correct headers and data type in $.ajax it should work as it's working on: http://jsfiddle.net/96d8k2m3/

Tomasz Racia
  • 1,786
  • 2
  • 15
  • 23
0

I was also facing the same issue. I fixed this as,

$(document).bind('click','#datefield',function(){
    $('#datefield').datepicker();
})
AmarjaPatil4
  • 1,640
  • 3
  • 28
  • 41