大佬教程收集整理的这篇文章主要介绍了jquery – fullCalendar 1.5.3创建了多个事件,无法删除未选中的事件,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
每当用户在#cal_small中选择一个事件(一小时或一小时)时,我将@L_674_1@一个确认/取消模式.确认/取消模式允许用户确认预订或取消预订(在语义上意味着用户并不真的想要预订该时段).
如果用户确认预订,我会向服务器发出ajax呼叫并注册预订.一旦ajax调用成功返回,我只需隐藏当前模态并@L_674_1@“您的预订成功!”新模式中的消息.这部分完美无瑕.
如果用户取消预订,则确认/取消模式被隐藏,我尝试以编程方式取消选择当前选择,这就是问题开始的地方.取消选择不起作用,似乎fullCalendar会记住所有这些未经确认的选择,当用户最终确认他的选择时,一大堆先前未经证实的选择都会在多个ajax调用中重复发送到服务器.
为什么会如此?如何阻止fullCalendar记住未经证实的选择?
这是代码: –
$(document).ready(function() { var todayDate = new Date(); var myDate = todayDate.setDate(todayDate.getDate() - 1); var csrfmiddlewaretoken = '{{ csrf_token }}'; var condo_slug = '{{ condo.slug }}'; var facility = $("#id_facility"); var cal_small_options = { titleFormat: { day: 'dddd' },header: { left: '',center:'title',right:'',},height: 520,defaultView: 'agendaDay',editable: true,minTime: '10:00',maxTime: '23:00',slotminutes: 60,SELEctable: true,SELEct: function(startDate,endDate,allDay,jsEvent,view) { console.log("SELEction triggered",jsEvent.handLeobj.guid) checkAvailability(csrfmiddlewaretoken,condo_slug,facility,startDate,endDatE); $('#confirm').click(function(){ confirmBooking(csrfmiddlewaretoken,facility.val(),endDatE) }); },events: function(start,end,callBACk) { // start and end marks the current date range shown on the calendar ajaxShowEvents(facility.val(),start,callBACk); },eventClick: function(event) { console.log(event.titlE); },viewDisplay: function(view) { // Clear the calendar and retrieve event objects when user SELEcts a facility. $('#id_facility').change(function(){ ajaxShowEvents(facility_id = $(this).val(),start = view.start,end = view.end); }); } }; var cal_big_options = { header: { left: '',right: '' },dayClick: function(date,view) { if (date < myDatE) { alert('You cAnnot book on this day!'); } if (allDay) { $('#cal_small').fullCalendar('gotoDate',datE); } else { alert('Clicked on the slot: ' + datE); } },unSELEctCancel: '',end = view.end); }); },eventClick: function(event,view) { if(event.start < myDatE) { alert('You cAnnot book on this day!'); } else { // check to see if the booking belongs to user ajaxcheckBooking(csrfmiddlewaretoken,event); $('#confirm').click(function(){ ajaxdeleteBooking(csrfmiddlewaretoken,event) }); } } }; $('#cal_small').fullCalendar(cal_small_options); $('#cal_big').fullCalendar(cal_big_options); $('.cancel,.btn_close').click(function() { $('#cal_big,#cal_small').fullCalendar('unSELEct') $('#modal-window').modal('hide'); }); }); // END document ready
confirmBooking函数按要求: –
function confirmBooking(csrfmiddlewaretoken,facility_id,endDatE) { // Given condo slug,facility id and the user SELEcted startDate and endDate,// send an ajax post request to confirm the booking post_data = {Csrfmiddlewaretoken: csrfmiddlewaretoken,condo_slug: condo_slug,facility_id: facility_id,start_date: startDate.toUTCString(),END_DATE: endDate.toUTCString()} $.ajax({ url: '/facility/ajax-confirm-booking/',data: post_data,type: 'POST',dataType: 'json',success: function(data) { if (data['status']=='success') { message = "Your booking is confirmed!" event = new Object(); event.id = data['id']; event.title = "Your Booked Event"; event.start = startDate; event.end = endDate; event.allDay = false; $("#cal_big").fullCalendar('renderEvent',event); $("#cal_small").fullCalendar('renderEvent',event); // TODO: // * disable the submit and reset buttons // * email notification to end user and property manager } else if (data['status']=='not logged in') { message = "You are not yet logged in!" // TODO: // * Provide fb login button so user can login. } else { message = "I am sorry. Something went wrong with your booking" // TODO: // * Work on an email notification to site admin if a booking has Failed for some reason } displaymodal(message,falsE); } }); }; // END confirmBooking
感谢是否有人可以详细说明为什么.fullCalendar(‘unSELEct’)调用无法删除未经证实的事件以及如何解决此问题.
这是一个我完全错过的死亡简单的bug.
SELEct: function(startDate,view) { console.log("SELEction triggered",jsEvent.handLeobj.guid) checkAvailability(csrfmiddlewaretoken,endDatE); $('#confirm').click(function(){ confirmBooking(csrfmiddlewaretoken,endDatE) }); },
每次在日历上选择事件时,都会将click事件绑定到#confirm按钮.因此,如果用户在未确认的情况下继续选择事件,则#confirm按钮将继续使用不同的startDate和endDate累积不同的点击事件.当用户在重复犹豫不决后最终点击#confirm按钮时,所有点击事件一次性触发,导致先前未选择的事件作为ajax帖子发送到服务器.
要解决这个问题,我必须记住在用户点击.cancel或.close按钮时指定$(‘#confirm’).unbind().
以上是大佬教程为你收集整理的jquery – fullCalendar 1.5.3创建了多个事件,无法删除未选中的事件全部内容,希望文章能够帮你解决jquery – fullCalendar 1.5.3创建了多个事件,无法删除未选中的事件所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。