Datepicker ajax call beforeShow; does not work

Question

I have a page that shows me available dates in a database. It works well, but I have to refresh the page to get it to work. If I don't, the datepicker class just acts like a text box. Also, I need it to make an ajax call before it shows.

So to sum up, I go to '/tasks/new'. The page loads correctly. I click in the datepicker field and no calendar. No errors in the console. I refresh the page and it works. What do I need to do? My initial thought was that it needs to wait until the page is loaded, but that didn't seem to work (unless I did that wrong).

Here is the relevant code:

html

<input class="datepicker" id="task_start_date" name="task[start_date]" type="text">

tasks.js.coffee

full_days =[]
partial_days=[]

getDays = (date) ->
  mmddyyyy = ("0" + (date.getMonth() + 1)).slice(-2) + "-" + ("0" + date.getDate()).slice(-2) + "-" + date.getFullYear()
  jqxhr = $.get("/getdates/"+mmddyyyy, (data) ->
    full_days = data['full']
    partial_days = data['partial']
    formatDays
    return
  )

formatDays = (date) ->
  mmddyyyy = ("0" + (date.getMonth() + 1)).slice(-2) + "-" + ("0" + date.getDate()).slice(-2) + "-" + date.getFullYear()
  if $.inArray(mmddyyyy, full_days) isnt -1
    [
      true
      "full-day"
      "Available"
    ]
  else
    if $.inArray(mmddyyyy, partial_days) isnt -1
      [
        true
        "partial-day"
        "Available"
      ]
    else
      [
        false
        ""
        "unAvailable"
      ]

# manipulate the json to make an array
availableHours = (day) ->
  hours =[]
  for index, hour_obj of day
    hours.push hour_obj['hour']
  return hours

$ ->
  $('.datepicker').datepicker(
    dateFormat: 'mm-dd-yy'
    beforeShow: -> getDays
    beforeShowDay: formatDays
    onChangeMonthYear: (year, month, inst) ->
      target = "#{month}-01-#{year}"
      jqxhr = $.get("/getdates/"+target, (data) ->
        full_days = data['full']
        partial_days = data['partial']
        formatDays
        return
      )
    onSelect: (selectedDay) ->
      box_id = $(this).attr('id')
      box_id = "\##{(box_id.split '_')[1]}_hour"
      new_list_items =[]
      jqxhr2 = $.get('/gethours/'+selectedDay, (data)->
        hours = availableHours(data)
        for k,hour of hours
          new_list_items.push '<option>'+hour+'</option>'
        $(box_id).html('').append(new_list_items)
      )
  )

Answer 1

I found a way to fix my issues. It was all about when I called the functions and when I put the inital $ -> :

$ ->
  full_days = []
  partial_days = []

  getDays = (date) ->
    if (typeof date != 'string')
      date = new Date()
      date = ("0" + (date.getMonth() + 1)).slice(-2) + "-" + ("0" + date.getDate()).slice(-2) + "-" + date.getFullYear()
    jqxhr = $.get("/getdates/" + date, (data) ->
      full_days = data['full']
      partial_days = data['partial']
      formatDays
    )
    return

  getDays()

  formatDays = (date) ->
    mmddyyyy = ("0" + (date.getMonth() + 1)).slice(-2) + "-" + ("0" + date.getDate()).slice(-2) + "-" + date.getFullYear()
    if $.inArray(mmddyyyy, full_days) isnt -1
      [
        true
        "full-day"
        "Available"
      ]
    else
      if $.inArray(mmddyyyy, partial_days) isnt -1
        [
          true
          "partial-day"
          "Available"
        ]
      else
        [
          false
          ""
          "unAvailable"
        ]

  # manipulate the json to make an array
  availableHours = (day) ->
    hours = []
    for index, hour_obj of day
      hours.push hour_obj['hour']
    return hours

  showdatepicker = ->
    $('.datepicker').datepicker(
      dateFormat: 'mm-dd-yy'
      beforeShowDay: formatDays
      onChangeMonthYear: (year, month, inst)->
        target = "#{month}-01-#{year}"
        getDays target
      onSelect: (selectedDay) ->
        getDays()
        box_id = $(this).attr('id')
        box_id = "\##{(box_id.split '_')[1]}_hour"
        new_list_items = []
        jqxhr2 = $.get('/gethours/' + selectedDay, (data)->
          hours = availableHours(data)
          for k,hour of hours
            new_list_items.push '<option>' + hour + '</option>'
          $(box_id).html('').append(new_list_items)
        )
    )

  showdatepicker()