jQuery序列和函數調用問題

Question

我對jquery和編程一般都很陌生，但我仍然試圖在這裏實現某些功能。

我使用Fullcalendar來允許我的Web應用程序的用戶在數據庫中插入事件。每天點擊一次，查看對議程日期的更改，然後在一天中的某個時間，並打開一個對話框彈出窗體。我試圖結合驗證（pre-jquery.1.4），jquery.form發佈沒有頁面刷新的表格

幾個頁面中包含的腳本calendar.php定義了fullcalendar對象並將其顯示在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');; 
       } 
      } 
     } 
    }); 
}); 

腳本json-events.php包含表單以及處理來自提交表單的數據的代碼。

當我測試了整個事情會發生什麼：
- 某一天第一用戶點擊，則一天中的時間。彈出窗口隨窗口上顯示的時間和日期打開。當用戶提交表單時，對話框關閉並且日曆刷新其事件....並且用戶添加的事件出現幾次（從4次到最多11次！）。表單已被接收的PHP腳本多次處理？！
- 秒用戶點擊，彈出窗口打開，用戶提交空表格。表單被提交（驗證功能沒有觸發），用戶重定向到空頁面json-events.php（ajaxForm沒有觸發）

顯然，我的代碼是錯誤的（也很髒，對不起）。爲什麼提交表單提交了幾次接收腳本，爲什麼JavaScript函數EventLoad只觸發一次？

非常感謝您的幫助。這個問題正在殺死我！

Answer 1

更新：我相信我到一些東西，這link帶來了新的燈，以我的問題。以下是適用於我的應用程序的代碼。這可能有點骯髒，但到目前爲止，我的測試給了我很好的結果。

<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> 

再次感謝您花時間幫助我。

Answer 2

您只是在驗證成功時應用提交處理程序。您應該使用validation插件的submitHandler選項來執行實際提交。

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