Add jquery datepicker dynamically after page load

Question

Upon a button click, I have some jquery that will add some html to the 'body' element. In that html, I have a datepicker input field which refuses to appear when it should.

I use the ui-datepicker in several other spots in my app, and it works perfectly.

I have tried calling the datepicker when the document loads:

jQuery ->
  $('.my-datepicker-class').each ->
    input = $(this)
    input.datepicker()

and after the click event which adds the new html to the page:

$('.my-button').click ->
  $('body').ipadoverlay
    titleStyle: false
    contentWidth: 500
    topSpc: true
    content: $('#popup-for-' + thing_id).html()
  $('.my-datepicker-class').each ->
    input = $(this)
    input.datepicker()

But the picker refuses to show up. My guess is that it has to do with when jquery builds and places the datepicker, but I really don't know.

Let me know if you have any ideas or could use more information.

UPDATE I changed the way I call datepicker() so that it only applies to the element I want the datepicker attached to.

$('.ipadoverlay .date-picker').datepicker()

This eliminates the first issue with the .each =>.
Now it silently fails. No error or warning. The datepicker simply does not show up.

I am going to begin digging into jquery.ui.datepicker.js to see if I can figure out whats going on, but if you have any ideas why the datepicker fails to response, please let me know.

UPDATE 2 Ok, I got a step further. The class 'hasDatepicker' was already attached to the element I want add the datepicker to (which means $('.date-picker').datepicker() was being called somewhere else, while the element was hidden and unused), but the datepicker didn't work. I fixed this by removing the class from my element, and calling .datepicker() again

$('.ipadoverlay .date-picker').removeClass('hasDatepicker')
$('.ipadoverlay .date-picker').datepicker()

Now the datepicker shows up on click, but selecting a date doesn't do anything... Help would be much appreciated

mattmc3 mattmc3 · Accepted Answer · 2013-11-11T00:45:21

You need to use the fat arrow. Your use of 'this' loses its context.

jQuery ->
  $('.my-datepicker-class').each => # <-- Fat arrow
    input = $(this)
    input.datepicker()

I'd explain, but coffeescript.org does a better job than I ever could.

Add jquery datepicker dynamically after page load

1 Answers