1

一般来说，我对 jquery 和编程很陌生，但我仍在努力在这里取得一些成就。

我使用 Fullcalendar 允许我的 Web 应用程序的用户在数据库中插入一个事件。单击一天，查看对议程日的更改，然后单击一天中的某个时间，并打开一个带有表单的对话框弹出窗口。我正在尝试结合 validate (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只触发一次？

非常感谢您的帮助。这个问题要死我了！

4

2 回答 2

1

当验证成功时，您只需应用提交处理程序。您应该使用验证插件的 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; 
    }
于 2010-04-18T12:35:48.957 回答
0

更新：我相信我在做某事，这个链接为我的问题带来了新的亮点。下面是适用于我的应用程序的代码。它可能有点脏，但到目前为止，我的测试给了我很好的结果。

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

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

于 2010-04-20T06:26:02.230 回答