一千萬個為什麽

搜索

jQuery序列和函數調用問題

我對jquery和編程很新,但我仍然想在這裏實現一些目標。

我使用Fullcalendar允許我的Web應用程序的用戶在數據庫中插入事件。點擊一天,查看對agendaDay的更改,然後查看當天的時間,並打開一個帶有表單的對話框彈出窗口。我試圖結合validate(pre-jquery.1.4),jquery.form來發布沒有頁面刷新的表單

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&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只觸發一次?

非常感謝你的幫助。這個問題殺了我!

最佳答案

您只需在驗證成功時應用提交處理程序。您應該使用驗證插件的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; 
    }

轉載註明原文: jQuery序列和函數調用問題