पूर्ण कैलेंडर को फिर से लोड करने के लिए कैसे करें जब मेनू का मान jQuery का उपयोग करके बदलता है?

Question

मैं कैलेंडर ईवेंट प्रदर्शित करने के लिए अपनी साइट में FullCalendar प्लगइन का उपयोग कर रहा हूं। जो मैं अब जोड़ने की कोशिश कर रहा हूं वह नाम के साथ एक ड्रॉप डाउन मेनू है और यदि ड्रॉप डाउन मेनू मूल्य बदलता है तो मेनू के मान के आधार पर ईवेंट को दोबारा लोड करें।

यदि कोई अन्य शब्द, डिफ़ॉल्ट रूप से मैं अपने स्वामित्व वाली घटनाओं को लोड करता हूं। ड्रॉप डाउन मेनू में सभी उपयोगकर्ता एक मेनू में होंगे। उस मेनू से मैं उसी पृष्ठ पर अन्य उपयोगकर्ता ईवेंट देखने के लिए उपयोगकर्ता नाम बदल सकता हूं।

मैंने ड्रॉप डाउन मेनू पर एक .change() ईवेंट जोड़ने और पूर्ण कैलेंडर पर रीफेट इवेंट जोड़ने की कोशिश की है लेकिन यह काम नहीं कर रहा है।

क्या कोई मुझे $ ('# users_menu') के मूल्य को पार करके इस घटना को पुनः लोड करने में मेरी सहायता कर सकता है।

मेरे वर्तमान कोड निम्नलिखित

$(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'); 
    }); 

}); 

ध्यान दें कि मैं अपने डेटा विधि में मेरी user_id मान पास है।

यह कोड लोड पर काम करता है लेकिन जब मैं ड्रॉप डाउन मेनू में उपयोगकर्ता नाम बदलता हूं तो यह नई घटनाओं को फिर से लोड नहीं करता है।

मैं इसे काम करने के लिए कैसे प्राप्त कर सकता हूं?

Answer 1

मैंने अंत में इसे ठीक किया। मैं removeEventSource तो addEventDource तो refetchEvents इस काम करने के लिए जो शांत :) नहीं है

यहाँ इस

$('#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

के लिए मेरे समाधान कोड है इस प्रयास करें था ..... इस समारोह फिर से घटना ajax को सक्रिय कर देगा .....

$('#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); 
      } 
     }); 
    }); 
}