jQuery fullCalendar + Fancybox弹出窗口来编辑事件 [英] jQuery fullCalendar + Fancybox popup to edit event
问题描述
我使用此代码在fullCalendar上生成事件
< script type =text / javascript>
$ b $（文档）.ready（函数（）{
$（'＃calendar'）。fullCalendar（{
//将您的选项和回调放在这里
header：{
right：'today month，agendaweek，agendaDay prev，next'
}，
events：[
<？php foreach（$ cal_data as $ row $>
title ='<？php echo $ row-> plant_name。'。$ row-> value_2;？>'，
start：'<？php echo $ row-> date。''。$ row-> time;？>'，
allDay：false，
url：'<？php echo '
}，
<？php endforeach;？>
]，
}）;
}）;
< / script>
这适用于数据显示。当我点击这个事件时，一个新页面被加载进行编辑。
现在我需要在jQuery Fancybox弹出窗口中编辑。
基于fullCalendar API，我将使用
eventClick：function（event）{
if （event.url）{
window.open（event.url）;
返回false;
$ b我在整个项目中使用这个Fancybox代码来成功编辑弹出窗口中的其他内容： $。fancybox（{
'transitionIn'：'none'，
'transitionOut'：'none'，
'type'：'ajax'，
'href'：link，
'onClosed'：function（）{
parent.location .reload（true）;
}
}）;
$ .bind（submit，function（）{
$ .fancybox.showActivity（）;
$ .ajax（{
type ：POST，
cache：false，
data：$（this）.serializeArray（），
success：function（data）{$ b $ .fancybox（data）;
}
}）;
返回false;
}）;
但我无法将其整合到fullCalendar脚本中。
例如，这不起作用：
eventClick：function（event）{
if（event.url）{
$ .fancybox（{
'transitionIn'：'none'，$ b $'transitionOut'：'none'，
'type'： 'ajax'，
'href'：link，
'onClosed'：function（）{
parent.location.reload（true）;
}
}） ;
$ .bind（submit，function（）{
$ .fancybox.showActivity（）;
$ .ajax（{
type ：POST，
cache：false，
data：$（this）.serializeArray（），
success：function（data）{$ b $ .fancybox（data）;
}
}）;
返回false;
}）;
返回false;
$ / code $ / pre
任何建议如何完成这项工作？
非常感谢您的帮助！
解决方案理论上，您的代码看起来像它会工作。但是你要告诉你的fancybox打开一个未定义的变量 link ，而不是使用 event.url 。此外，不要使用 parent.location.reload（this）这有点沉重（您可以随时添加事件，所以不需要重新加载整个页面），您可以取消 onClosed（）事件：
eventClick：function（event）{
if（event.url）{
$ .fancybox（{$ b $'transitionIn'：'none'，
'transitionOut'：'none'，
'type'：'ajax'，
'href'：event.url
}）;
.....................
然后在你的 .ajax（）的成功方法中，你可以返回一个json字符串 events / events_edit / page （包含新事件数据，与页面加载时添加的样式相同），则在成功方法中使用fullcalendars addEventSource 并传递json对象以添加到callendar：
$。ajax（{
type：POST，
cache：false，
data：$（this）。 serializeArray（），
success：function（data）{
//添加事件：
$（'＃calendar'）。fullCalendar（'addEventSource'，data）;
//关闭fancybox窗口：
$（'＃fancy_close'）。trigger（'click'）;
}
}）;
在没有完成所有设置的情况下很难测试这些，但它可能会给你一些想法指向正确的方向。
I am generating events on fullCalendar with this code
<script type="text/javascript">
$(document).ready(function() {
$('#calendar').fullCalendar({
// put your options and callbacks here
header: {
right: 'today month,agendaWeek,agendaDay prev,next'
},
events: [
<?php foreach($cal_data as $row): ?>
{
title : '<?php echo $row->plant_name . ' ' . $row->value_2; ?>',
start : '<?php echo $row->date . ' ' . $row->time; ?>',
allDay: false,
url : '<?php echo base_url() . 'events/events_edit/' . $row->record_id; ?>'
},
<?php endforeach; ?>
],
});
});
</script>
This works fine for data display. When I click on the event a new page is loaded for editing.
Now I need to edit inside a jQuery Fancybox popup.
Based on the fullCalendar API, I would use
eventClick: function(event) {
if (event.url) {
window.open(event.url);
return false;
}
}
I am using this Fancybox code throughout the project to successfully edit other things inside popups:
$.fancybox({
'transitionIn': 'none',
'transitionOut': 'none',
'type': 'ajax',
'href': link,
'onClosed': function() {
parent.location.reload(true);
}
});
$.bind("submit", function() {
$.fancybox.showActivity();
$.ajax({
type: "POST",
cache: false,
data: $(this).serializeArray(),
success: function(data) {
$.fancybox(data);
}
});
return false;
});
But I haven't been able to integrate it into the fullCalendar script.
For example this doesn't work:
eventClick: function(event) {
if (event.url) {
$.fancybox({
'transitionIn': 'none',
'transitionOut': 'none',
'type': 'ajax',
'href': link,
'onClosed': function() {
parent.location.reload(true);
}
});
$.bind("submit", function() {
$.fancybox.showActivity();
$.ajax({
type: "POST",
cache: false,
data: $(this).serializeArray(),
success: function(data) {
$.fancybox(data);
}
});
return false;
});
return false;
}
}
Any suggestions how to get this done?
Thanks a lot for helping!
解决方案 In theory your code looks like it would work. But you are telling your fancybox to open an undefined variable link, instead use event.url. Also, instead of using parent.location.reload(this) which is a bit heavy here (you can add events on the fly, so there is no need to reload the entire page), you could do away with the onClosed() event:
eventClick: function(event) {
if (event.url) {
$.fancybox({
'transitionIn': 'none',
'transitionOut': 'none',
'type': 'ajax',
'href': event.url
});
.....................
Then in your .ajax()'s success method, you could return a json string from your events/events_edit/ page (containing the new event data, same style as you add when the page loads), then in the success method use fullcalendars addEventSource and pass the json object over to be added on to the callendar:
$.ajax({
type: "POST",
cache: false,
data: $(this).serializeArray(),
success: function(data) {
// Add the event:
$('#calendar').fullCalendar('addEventSource', data);
// Close the fancybox window:
$('#fancy_close').trigger('click');
}
});
Its difficult to test any of this without having it all setup, but it may give you some ideas to point you towards the right direction.
这篇关于jQuery fullCalendar + Fancybox弹出窗口来编辑事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
