一般来说,我对 jquery 和编程很陌生,但我仍在努力在这里取得一些成就。
我使用 Fullcalendar 允许我的 Web 应用程序的用户在数据库中插入一个事件。单击一天,查看对议程日的更改,然后单击一天中的某个时间,并打开一个带有表单的对话框弹出窗口。我正在尝试结合 validate (pre-jquery.1.4), jquery.form 来发布表单而不刷新页面
包含在多个页面中的脚本 calendar.php 定义了 fullcalendar 对象并将其显示在 div 中:
$(document).ready(function() {
function EventLoad() {
$("#addEvent").validate({
rules: {
calendar_title: "required",
calendar_url: {
required: false,
maxlength: 100,
url: true
}
},
messages: {
calendar_title: "Title required",
calendar_url: "Invalid URL format"
},
success: function() {
$('#addEvent').submit(function() {
var options = {
success: function() {
$('#eventDialog').dialog('close');
$('#calendar').fullCalendar( 'refetchEvents' );
}
};
// submit the form
$(this).ajaxSubmit(options);
// return false to prevent normal browser submit and page navigation
return false;
});
}
});
}
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
theme: true,
firstDay: 1,
editable: false,
events: "json-events.php?list=1&<?php echo $events_list; ?>",
<?php if($_GET['page'] == 'home')
echo "defaultView: 'agendaWeek',";
?>
eventClick: function(event) {
if (event.url) {
window.open(event.url);
return false;
}
},
dayClick: function(date, allDay, jsEvent, view) {
if (view.name == 'month') {
$('#calendar').fullCalendar( 'changeView', 'agendaDay').fullCalendar( 'gotoDate', date );
}else{
if(allDay)
{
var timeStamp = $.fullCalendar.formatDate( date, 'dddd+dd+MMMM_u');
var $eventDialog = $('<div/>').load("json-events.php?<?php echo $events_list; ?>&new=1&all_day=1×tamp=" + timeStamp, null, EventLoad).dialog({autoOpen:false,draggable: false, width: 675, modal:true, position:['center',202], resizable: false, title:'Add an Event'});
$eventDialog.dialog('open').attr('id','eventDialog');
}
else
{
var timeStamp = $.fullCalendar.formatDate( date, 'dddd+dd+MMMM_u');
var $eventDialog = $('<div/>').load("json-events.php?<?php echo $events_list; ?>&new=1&all_day=0×tamp=" + timeStamp, null, EventLoad).dialog({autoOpen:false,draggable: false, width: 675, modal:true, position:['center',202], resizable: false, title:'Add an Event'});
$eventDialog.dialog('open').attr('id','eventDialog');;
}
}
}
});
});
脚本 json-events.php 包含表单以及处理来自提交表单的数据的代码。
当我测试整个事情时会发生什么:
-首先用户点击一天,然后点击一天中的时间。弹出窗口将打开,并在表格上显示时间和日期。当用户提交表单时,对话框关闭并且日历刷新其事件......并且用户添加的事件出现多次(从 4 次到最多 11 次!)。表单已经被接收的php脚本处理了几次?!
-第二次用户点击,弹出窗口打开,用户提交空表单。提交表单(未触发验证功能)并将用户重定向到空页面 json-events.php(也未触发 ajaxForm)
显然,我的代码是错误的(也很脏,抱歉)。为什么提交的表单,多次提交到接收脚本,为什么javascript函数EventLoad只触发一次?
非常感谢您的帮助。这个问题要死我了!