jquery - 修复对完整日历获取资源的多次请求

Question

我有一个带有一些自定义功能的日历。日历构建一次，但在某些情况下，我需要更新最小和最大时间设置。

为了获得正确的最小/最大时间，我有一个 ajax 函数，它的返回如下所示。 {"start":"12:00:00","end":"21:30:00"}

此响应后跟此代码以更新日历。

$('#calendar').fullCalendar('option', 'minTime', minTime);
$('#calendar').fullCalendar('option', 'maxTime', maxTime);

我有一个更新日历数据，它调用获取最小/最大时间的函数。

function updateCalendarData() {

   getCalendarDateField();
   $('#calendar').fullCalendar('refetchResources');
   $('#calendar').fullCalendar('refetchEvents');      
   // min/maxtime function.
   setStudioHours(studioWorkingHours);
}

我有一些按钮，通过单击它们，日历应该像下面这样更新。

$('#calendar_date').change(function(event , element) {
  updateCalendarData();
});

$('#filter_form_submited').click(function(event , element) {
  updateCalendarData();
});
jQuery('body').on('click','button.fc-prev-button, button.fc-next-button',function(event) {
  setStudioHours(studioWorkingHours);
});

$(document).on('keypress',function(event) {
  if(event.which == 13) {
    updateCalendarData();
  }
});

我将其设置refetchResourcesOnNavigate为 true，这是我的资源和事件回调函数。

resources: function(callback){

  timeInfo = $('#calendar').fullCalendar('getView');

  jQuery('input[name="start"], #calendar_date').val(timeInfo.start.format());
  jQuery('input[name="end"]').val(timeInfo.end.format());

  $.ajax({
    url: resourcesCallback,
    type: 'GET',
    dataType: "json",
    data: jQuery('.calendar_filter_form').serialize(),
    error: function() {
      console.log('Oops! Try again.');
    },
    success: function(response){
      $(".fc-widget-header th > div").popover('hide');
      callback(response);
    }
  });
},

events: {
  url: eventsCallback,
  method: 'GET',
  data: function() {
    var fields = jQuery('.calendar_filter_form').serializeArray();
    var datas = {};
    jQuery.each(fields, function(index, val) {
      /* iterate through array or object */
      datas[val.name] = val.value;
    });
    return datas;
  },
  failure: function() {
    alert('there was an error while fetching events!');
  },
},

系统工作正常，没有任何错误，但问题是资源called 3 times。

而且我确信我只是拥有资源，并且路径或操作是独一无二的。但在我的网络日志中，它是 ajax 请求相关路径的 3 倍。

所以出了什么问题，我试图用一些真/假值来停止多次请求，但没有工作。

只是我应该提一下，我有 Drupal 8 和完整日历的 v3。

更新

我更新了代码并且知道我解决了在我的自定义按钮上多次加载的问题。

function updateCalendarData() {
    getCalendarDateField();
    $('#calendar').fullCalendar('refetchEvents');
    setStudioHours(studioWorkingHours);
}

并且只有一次设定时间。

var newTimeConfig = {};
newTimeConfig['minTime'] = matchedDayHours.start;
newTimeConfig['maxTime'] = matchedDayHours.end;
$('#calendar').fullCalendar('option', newTimeConfig);

但是，我仍然有导航更新资源的问题，如果我将其配置设置为 false，那么我将收到此错误。

refetchResourcesOnNavigate: false,

jquery.min.js:2 Uncaught TypeError：无法读取未定义的属性“格式”

检查此演示https://codepen.io/nasser-ali-karimi/pen/gOOMMKN

标签： jqueryajaxrequestfullcalendar