Uncaught TypeError：$（...）。當嘗試刪除事件源時，fullCalendar不是函數

我試圖讓fullCalendar刪除其以前的事件源並重新綁定到buttonclick上的新事件源。我一直在尋找幾個小時的答案，但沒有找到我找到的解決方案。

我有一個頁面，它是一個下拉菜單和fullCalendar cal上方的按鈕。在頁面加載時，日曆會從db中加載所有事件列表而不會造成問題。我試圖實現的是一個客戶端過濾器，只會顯示我點擊按鈕後在下拉列表中選擇的名稱。

將名稱過濾爲新的JSON數組的功能正常運行，我的問題是，我得到一個控制檯錯誤，根據標題阻止我從刪除原始源和重新綁定新數組。

這裏是我的代碼：

CSHTML：

<div class="member-filter-section"> 
     <div class="member-filter-container"> 
      <div class="staff-container"> 
       <p class="staff-name">Staff Member:</p> 
       <div class="staff-select"> 
        <select id="staff_list" multiple="multiple"> 
         @foreach (var u in users) 
         { 
          <option value="@u.UserId">@u.UserName</option> 
         } 
        </select> 
       </div> 
      </div> 
      <div class="branch-container"> 
       <p class="branch-name">Branch:</p> 
       <div class="branch-select"> 
        <select id="branch_list"> 
         <option>City Center</option> 
         <option>Foxrock</option> 
         <option>Dalkey</option> 
        </select> 
       </div> 
      </div> 
      <div id="filter" class="nav_button filter-button">Select</div> 
     </div> 
    </div> 
    <div class="calendar-wrapper"> 
     <div id="calendar" class="calendar-body"></div> 
    </div>

JS：

// The ajax to return a correct JSON array 
     var eventsFeed = function (start, end, timezone, callback) { 
      var id = @agentId; 
      $.ajax({ 
       type: "POST", 
       url: "/SystemManagement/Viewings/GetCalendarEventListings", 
       data: { 'agentId' : id ,'start' : start.format(), 'end' : end.format()}, 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       success: function(data) { 
        var events = []; 
        $.each(data, 
         function(obj) { 
          var eventObject = data[obj]; 
          events.push({ 
           title: eventObject.Title, 
           start: eventObject.StartTime, 
           end: eventObject.EndTime, 
           id: eventObject.Id, 
           userId: eventObject.UserId, 
           color: eventObject.AppointmentColour, 
           attendee: eventObject.Attendee, 
           location: eventObject.Location, 
           type: eventObject.AppointmentType 
          }); 
         }); 
        globalEvents = events; 
        callback(events); 
        events = []; 
       }, 
       error: function() { 
        console.log('Error'); 
       } 
      }); 
     } 

     $(document).ready(function() { 
       $('#staff_list').chosen(); 
       $('#branch_list').chosen(); 

       // Gets the JSON array to populate the calendar on page load 
       $('#calendar').fullCalendar({ 
        defaultView: 'agendaDay', 
        header: { 
         left: 'prev,next, today', 
         center: 'title', 
         right: 'month,agendaWeek,agendaDay' 
        }, 
        height: 850, 
        events: eventsFeed, 
        eventClick: function(calEvent) { 
         buildModal(calEvent.type,calEvent.location,calEvent.attendee,calEvent.color, calEvent.start, calEvent.end); 
         modal.style.display = "block"; 
        } 
       }); 

       $('#filter') 
        .on('click', 
         function() { 

          var selectedStaffIds = $("#staff_list").val(); 
          var filteredEvents = []; 

          globalEvents.forEach(function(obj) { 
           if (checkIfIdIsSelected(selectedStaffIds, obj.userId)) { 
            filteredEvents.push(obj); 
           } 
          }); 
          console.log(filteredEvents); 
          rebindCalendar(filteredEvents); 
          filteredEvents.length = 0; 
         }); 

       function checkIfIdIsSelected(staffId, objectId) { 
        return staffId.indexOf(objectId) > -1; 
       } 

       function rebindCalendar(eventsArray) { 
        $('#calendar').fullCalendar('removeEventSource', eventsFeed); 
        $('#calendar').fullCalendar('addEventSource', eventsArray); 
       }

來源

2016-07-11 rocinante

@rocinate我的腳本引用的fullcalendar是刪除,, –

$（'＃日曆'）實際上是否包含rebindCalendar中的任何元素？ – BassT

@BassT我真的不確定嗎？我對JavaScript很新，只是遵循文檔和我看到其他人在線實現 – rocinante

所以不知何故fullCalendar部件丟失我猜。嘗試將DOM元素存儲在var中（如$calendar = $('#calendar')），然後填充日曆並將其重用到rebindCalendar函數中。

來源

2016-07-11 15:12:46 BassT

你的代碼工作正常，在此琴：http://jsfiddle.net/drx389j5/

如果您#calendar不存在的，這意味着它以某種方式從DOM或它的ID刪除被改變，或者你正試圖從另一個文檔處理它（在iframe中），或者$不是jQuery，或者fullCalendar被函數銷燬。

來源

2016-07-11 16:28:53 K48

Uncaught TypeError：$（...）。當嘗試刪除事件源時，fullCalendar不是函數

回答

相關問題