jQuery sequence and function call problem
- by Jonas
Hi everyone, I'm very new to jquery and programming in general but I'm still trying to achieve something here.
I use Fullcalendar to allow the users of my web application to insert an event in the database. The click on a day, view changes to agendaDay, then on a time of the day, and a dialog popup opens with a form. I am trying to combine validate (pre-jquery.1.4), jquery.form to post the form without page refresh
The script calendar.php, included in several pages, defines the fullcalendar object and displays it in a 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');;
}
}
}
});
});
The script json-events.php contains the form and also the code to process the data from the submitted form.
What happens when I test the whole thing:
- first user click on a day, then time of day. Popup opens with time and date indicated on the form. When user submits the form, dialog closes and calendar refreshes its events.... and the event added by the user appears several times (from 4 to up to 11 times!). The form has been processed several times by the receiving php script?!
- second user click, the popup opens, user submit empty form. Form is submitted (validate function not triggered) and user redirected to empty page json-events.php (ajaxForm not triggered either)
Obviously, my code is wrong (and dirty as well, sorry). Why is the submitted form, submitted several time to receiving script and why is the javascript function EventLoad triggered only once ?
Thank you very much for you help. This problem is killing me !
