Làm thế nào để tải lại Contact FullCalendar khi giá trị của một menu thay đổi bằng cách sử dụng jQuery?

Question

Tôi đang sử dụng plugin FullCalendar trong trang web của mình để hiển thị sự kiện lịch. Những gì tôi đang cố gắng để thêm bây giờ là một trình đơn thả xuống với tên và nếu trình đơn thả xuống thay đổi giá trị sau đó Tải lại các sự kiện dựa trên giá trị của trình đơn.

Nếu một từ khác, theo mặc định tôi tải các sự kiện thuộc sở hữu của tôi. Trình đơn thả xuống sẽ có tất cả người dùng trong một menu. Từ trình đơn đó, tôi có thể thay đổi tên người dùng để xem các sự kiện người dùng khác trên cùng một trang.

Tôi đã cố gắng thêm sự kiện .change() trên menu thả xuống và refetchEvents trên fullCalendar nhưng nó không hoạt động.

Ai đó có thể vui lòng giúp tôi tải lại sự kiện này bằng cách chuyển giá trị của $ ('# users_menu').

Sau đây là mã hiện tại của tôi

$(document).ready(function() { 

    $('#calendar').fullCalendar({ 

     header: { 
      right: 'prev,next today', 
      center: 'title', 
      left: 'month,agendaWeek,agendaDay' 
     },  

     events: { 
      url: "ajax/getMyEvents.php", 
      type: 'POST', 
      data: { 
       user_id: $('#users_menu').val() 
      } 
     }, 
     timeFormat: 'h:mm TT{ - h:mm} TT', 
     defaultView: 'agendaDay', 


     eventDrop: function(event, delta, minuteDelta, allDay, revertFunc) { 

      if (!confirm("Are you sure about this change?")) { 
       revertFunc(); 
      } 
      updateEvent(event, delta, minuteDelta, allDay, 'Drop', revertFunc); 
     }, 

     eventResize: function(event, delta, minuteDelta, revertFunc) { 

      if (!confirm("Are you sure about this change?")) { 
       revertFunc(); 
      } 
      updateEvent(event, delta, minuteDelta, false, 'endResize', revertFunc); 
     } 


    }); 


    $('#users_menu').change(function(){ 

     $('#calendar').fullCalendar('refetchEvents'); 
    }); 

}); 

Lưu ý rằng tôi vượt qua giá trị user_id của tôi trong phương pháp dữ liệu của tôi.

Mã này hoạt động khi tải nhưng khi tôi thay đổi tên người dùng trong trình đơn thả xuống, nó sẽ không tải lại các sự kiện mới.

Làm cách nào để làm việc này?

Answer 1

Cuối cùng tôi đã sửa nó. Tôi đã phải removeEventSource sau đó addEventDource sau đó refetchEvents để làm việc này mà không phải là mát mẻ :)

Dưới đây là mã giải pháp của tôi cho điều này

$('#users_menu').change(function(){ 

     var events = { 
      url: "ajax/getMyEvents.php", 
      type: 'POST', 
      data: { 
       user_id: $(this).val() 
      } 
     } 

     $('#calendar').fullCalendar('removeEventSource', events); 
     $('#calendar').fullCalendar('addEventSource', events);   
     $('#calendar').fullCalendar('refetchEvents'); 
    }).change(); 

Answer 2

Hãy thử điều này ..... chức năng này sẽ cháy sự kiện ajax nữa .....

$('#conrollerId').on('change', loadEvents); 

function loadEvents() { 
    $('#calendar').fullCalendar('removeEvents'); 
    $('#calendar').fullCalendar('refetchEvents'); 

} 

Answer 3

function bindCal(id) { 
    var ddlStudio1Value = $("#ddlStudio1 option:selected").val(); 
    $('#calendar').fullCalendar('addEventSource', function (start, end, timezone, callback) { 
     $.ajax({ 
      url: '@Url.Action("GetEvents", "FacultySchedule")', 
      data: "{'status':'','StudioId':'" + ddlStudio1Value + "','FacultyId':0,'start':'" + start + "', 'end':'" + end + "'}", 
      dataType: "json", 
      type: "POST", 
      async: false, 
      contentType: "application/json; charset=utf-8", 
      success: function (doc) { 
       var events = []; 
       var EventIds = "0"; 
       $(doc).each(function() { 
        $('#calendar').fullCalendar('removeEvents', $(this).attr('id')); 
        events.push({ 
         id: $(this).attr('id'), 
         title: $(this).attr('title'), 
         start: $(this).attr('start'), 
         end: $(this).attr('end'), 
         color: $(this).attr('color'), 
         textColor: $(this).attr('textColor'), 
         someKey: $(this).attr('someKey'), 
         allDay: $(this).attr('allDay'), 
         CreatedBy: $(this).attr('CreatedBy'), 
         StatusRemark: $(this).attr('StatusRemark'), 
         DurationMnt: $(this).attr('DurationMnt'), 
         Studio: $(this).attr('Studio') 
        }); 
       }); 
       callback(events); 
      }, 
      error: function (response) { 
       alert(response.responseText); 
      } 
     }); 
    }); 
}