jQuery 使用jQuery更改菜单值时如何重新加载FullCalendar联系人？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18727954/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to reload FullCalendar Contact when the value of a menu change using jQuery?
提问by Jaylen
I am using the FullCalendarplugin in my site to display calender event. What I am trying to add now is a drop down menu with name and if the drop down menu change value then Reload the events based on the value of the menu.
我在我的网站中使用FullCalendar插件来显示日历事件。我现在要添加的是一个带有名称的下拉菜单，如果下拉菜单更改值，则根据菜单的值重新加载事件。
If another words, by default i load events owned by me. The drop down menu will have all users in one menu. From that menu I can change the user name to view other users events on the same page.
换句话说，默认情况下我加载我拥有的事件。下拉菜单将所有用户都包含在一个菜单中。从该菜单中，我可以更改用户名以查看同一页面上的其他用户事件。
I have tried to add a .change() event on the drop down menu and refetchEvents on the fullCalendar but it is not working.
我试图在下拉菜单上添加一个 .change() 事件并在 fullCalendar 上添加 refetchEvents 但它不起作用。
Can someone please help me with reloading this events by passing the value of the $('#users_menu').
有人可以通过传递 $('#users_menu') 的值来帮助我重新加载此事件。
The following is my current code
以下是我目前的代码
$(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' );
});
});
Note that i pass my user_id value in my data method.
请注意，我在我的数据方法中传递了我的 user_id 值。
This code works on the load but when I change the user name in the drop down menu it does not reload the new events.
此代码适用于加载，但是当我在下拉菜单中更改用户名时，它不会重新加载新事件。
How can I get this to work?
我怎样才能让它发挥作用？
回答by Jaylen
I finally fixed it.
我终于修好了。
I had to removeEventSourcethen √then refetchEventsfor this to work which is not cool :)
我不得不removeEventSource然后√再refetchEvents为这个到是不冷静的工作:)
Here is my solution code for this
这是我的解决方案代码
$('#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();
回答by Shanka SMS
Try this..... this function will fire event ajax again.....
试试这个..... 这个函数会再次触发事件ajax.....
$('#conrollerId').on('change', loadEvents);
function loadEvents() {
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('refetchEvents');
}
回答by DARSHAN SHINDE
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);
}
});
});
}
