jQuery序列和函数调用问题

Question

我对 jquery 和一般编程非常陌生，但我仍在尝试在这里实现一些目标。

我使用 Fullcalendar 允许 Web 应用程序的用户在数据库中插入事件。单击某一天，视图将更改为“议程日”，然后单击一天中的某个时间，并会打开一个包含表单的对话框弹出窗口。我正在尝试结合 validate (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

您只需在验证成功时应用提交处理程序即可。您应该使用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; 
    }

Answer 2

更新：我相信我有所发现，这个 链接为我的问题带来了新的线索。下面是适合我的应用程序的代码。它可能有点脏，但到目前为止，我的测试给了我很好的结果。

<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×tamp=" + 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×tamp=" + 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>

再次感谢您花时间帮助我。