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 !
