1

私は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には、フォームと、送信されたフォームのデータを処理するためのコードが含まれています。

すべてをテストするとどうなりますか：
-最初にユーザーが1日をクリックし、次に時刻をクリックします。フォームに表示された日時でポップアップが開きます。ユーザーがフォームを送信すると、ダイアログが閉じてカレンダーがそのイベントを更新します。ユーザーが追加したイベントが数回表示されます（4回から最大11回まで！）。フォームは、受信するphpスクリプトによって数回処理されましたか？！
-ユーザーが2回クリックすると、ポップアップが開き、ユーザーは空のフォームを送信します。フォームが送信され（検証関数はトリガーされません）、ユーザーは空のページjson-events.phpにリダイレクトされます（ajaxFormもトリガーされません）

明らかに、私のコードは間違っています（そして汚いです、ごめんなさい）。送信されたフォームがスクリプトを受信するために数回送信されるのはなぜですか？また、javascript関数EventLoadが1回だけトリガーされるのはなぜですか？

よろしくお願いします。この問題は私を殺しています！

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 に答える