Problème d'appel de séquence et de fonction jQuery

Question

Je suis très novice en matière de programmation et de programmation en général, mais j'essaie toujours de réaliser quelque chose ici.

J'utilise Fullcalendar pour permettre aux utilisateurs de mon application Web d'insérer un événement dans la base de données. Le clic sur un jour, l'affichage change à agendaDay, puis à un moment de la journée, et une boîte de dialogue s'ouvre avec un formulaire. J'essaie de combiner valider (pré-jquery.1.4), jquery.form pour poster le formulaire sans rafraîchir la page

Le script calendar.php, inclus dans plusieurs pages, définit l'objet fullcalendar et l'affiche dans un 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&timestamp=" + 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&timestamp=" + 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');; 
       } 
      } 
     } 
    }); 
}); 

le script JSON-events.php contient la forme et aussi le code pour traiter les données du formulaire soumis.

Qu'est-ce qui se passe quand je teste la chose:
- premier utilisateur clique un jour, alors le temps de la journée. Popup s'ouvre avec l'heure et la date indiquées sur le formulaire. Lorsque l'utilisateur soumet le formulaire, la boîte de dialogue se ferme et le calendrier actualise ses événements .... et l'événement ajouté par l'utilisateur apparaît plusieurs fois (de 4 à 11 fois!). Le formulaire a été traité plusieurs fois par le script PHP de réception ?!
- deuxième l'utilisateur clique, la fenêtre contextuelle s'ouvre, l'utilisateur soumet un formulaire vide. Le formulaire est soumis (validation de la fonction non déclenchée) et l'utilisateur redirigé vers la page vide json-events.php (ajaxForm non déclenché non plus)

Évidemment, mon code est faux (et sale aussi, désolé). Pourquoi le formulaire soumis, soumis plusieurs fois à la réception du script et pourquoi la fonction javascript EventLoad n'est déclenchée qu'une seule fois?

Merci beaucoup pour votre aide. Ce problème me tue!

Answer 1

MISE À JOUR: Je crois que je suis sur quelque chose, ce link a apporté de nouvelles lumières à mon problème. Voici le code qui fonctionne bien avec mon application. C'est probablement un peu sale, mais jusqu'à présent, mes tests m'ont donné de bons résultats.

<script type='text/javascript'> 
    // Calendar for all pages except for HOME 
    $(document).ready(function() { 
     $('#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&timestamp=" + timeStamp, null, validForm).dialog({ 
         autoOpen:false, 
         draggable: false, 
         width: 675, 
         modal:true, 
         position:['center',202], 
         resizable: false, 
         title:'Add an Event', 
         buttons: { 
          'Add an Event': function() { 
            var options = { 
             success: function() { 
              $('#eventDialog').dialog().empty().remove(); 
              $("#addEvent").empty().remove(); 
              $('#calendar').fullCalendar('refetchEvents'); 
             } 
            }; 
            // Manually trigger validation 
            if ($("#addEvent").validate().form() == true) { 
             $('#addEvent').ajaxSubmit(options); 
             $('#eventDialog').dialog('close'); 
            } 
          }, 
          Cancel: function() { 
           $("#addEvent").empty().remove(); 
           $(this).dialog().empty().remove(); 
          } 
         } 
         }); 

         //$eventDialog.dialog('open').attr('id','eventDialog'); 
         $eventDialog.dialog('open', { 
          open: function(event, ui) { $validForm; } 
         }).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&timestamp=" + timeStamp, null, validForm).dialog({ 
         autoOpen:false, 
         draggable: false, 
         width: 675, 
         modal:true, 
         position:['center',202], 
         resizable: false, 
         title:'Add an Event', 
         buttons: { 
          'Add an Event': function() { 
            var options = { 
             success: function() { 
              $('#eventDialog').dialog().empty().remove(); 
              $("#addEvent").empty().remove(); 
              $('#calendar').fullCalendar('refetchEvents'); 
             } 
            }; 
            // Manually trigger validation 
            if ($("#addEvent").validate().form() == true) { 
             $('#addEvent').ajaxSubmit(options); 
             $('#eventDialog').dialog('close'); 
            } 
          }, 
          Cancel: function() { 
           $("#addEvent").empty().remove(); 
           $(this).dialog().empty().remove(); 
          } 
         } 
         }); 

         //$eventDialog.dialog('open').attr('id','eventDialog'); 
         $eventDialog.dialog('open', { 
          open: function(event, ui) { $validForm; } 
         }).attr('id','eventDialog'); 
        } 
       } 
      } 
     }); 

     function validForm(){ 
      $("#addEvent").validate({ 
       rules: { 
        calendar_title: "required", 
        calendar_url: { 
         required: false, 
         maxlength: 100, 
         url: true 
        } 
       }, 
       messages: { 
        calendar_title: "Title required", 
        calendar_url: "Invalid URL format" 
       } 
      }); 
     } 
    }); 
</script> 

Merci encore d'avoir pris le temps de m'aider.

Answer 2

Vous appliquez simplement le gestionnaire de soumission lorsque la validation est réussie. Vous devez utiliser l'option submitHandler du plugin validation pour effectuer la soumission.

submitHandler: 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; 
    }