Я очень плохо знаком с jquery и программированием в целом, но я все еще пытаюсь чего-то достичь здесь.
Я использую Fullcalendar, чтобы позволить пользователям моего веб-приложения вставить событие в базу данных. Нажмите на день, просмотрите изменения в повестки дня, затем на время дня, и откроется всплывающее диалоговое окно с формой. Я пытаюсь объединить валидировать (pre-jquery.1.4), jquery.form, чтобы опубликовать форму без обновления страницы
Сценарий calendar.php, включенный в несколько страниц, определяет объект fullcalendar и отображает его в div:
<br>
$(document).ready(function() {</p>
<pre><code> 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 запускается только один раз?
Большое спасибо за помощь. Эта проблема убивает меня!