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 !
