Question

我对jquery和编程很新，但我仍然想在这里实现一些目标。

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

非常感谢你的帮助。这个问题让我感到害怕！

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

更新：我相信自己正在做点什么，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>

再次感谢您抽出宝贵时间帮助我。

jQuery序列和函数调用问题

2 个答案: