javascript - Datepicker ajax 调用 beforeShow;不起作用

Question

我有一个页面显示数据库中的可用日期。它运行良好，但我必须刷新页面才能使其正常工作。如果不这样做，则日期选择器类就像一个文本框。另外，我需要它在显示之前进行 ajax 调用。

总而言之，我转到“/tasks/new”。页面加载正确。我单击日期选择器字段，但没有日历。控制台中没有错误。我刷新页面，它就可以工作了。我需要做什么？我最初的想法是它需要等待页面加载，但这似乎不起作用(除非我做错了)。

相关代码如下:

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

我找到了解决问题的方法。这一切都与我何时调用函数以及何时输入初始 $ ->:

相关。

$ ->
  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()