[英]Datepicker ajax call beforeShow; does not work
我有一个页面向我显示数据库中的可用日期。 它运作良好,但我必须刷新页面才能使其正常工作。 如果我不这样做,则datepicker类的作用就像一个文本框。 另外,在显示之前,我需要它进行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)
)
)
我找到了解决问题的方法。 这一切与何时调用函数以及何时将首字母$ ->
:
$ ->
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()
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.