ansaurus

Question

jQuery sequence and function call problem

Answer 1

A:

You're simply applying the submit handler when the validation is successful. You should use the validation plugin's submitHandler option to do the actual submission.

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

tvanfosson 2010-04-18 12:35:48

Thank you for your answer.I applied this modification in the code. The form is no longer submitted to the receiving script.The other problem, when opening the popup a second time "validate" and "ajaxSubmit" are not triggered, is still there.P.S. I'm still using jQuery 1.3.2

Jonas 2010-04-19 00:18:57

Hmmm. It might have something to do with the EventLoad function being called before you create the dialog. Have you tried running it in the dialog open event handler? The dialog might remove the original elements (and their handlers) in 1.3.

tvanfosson 2010-04-19 01:55:11

:( Have tried calling the EventLoad function in the dialog open event handler with no luck. Have tried placing the EventLoad function inside the load method with no luck either. I have to admit that I don't exactly understand how the whole sequence is working there.

Jonas 2010-04-20 00:11:10

Are you using the validation plugin from bassistance.de? Can you show the updated code with EventLoad in the open handler. Also, have you tried doing a destroy on the dialog when it's submitted. Since you're recreating it you probably need to delete the existing one. Esp. since you give it an id.

tvanfosson 2010-04-20 03:06:41

Answer 2

A:

UPDATE: I believe I am onto something, this link brought new lights to my problem. Below is the code that works fine with my application. It's probably a bit dirty, but so far, my tests gave me good results.

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

Thanks again for taking the time to help me.

Jonas 2010-04-20 06:26:02

ansaurus

tags:

views:

answers:

jQuery sequence and function call problem

related questions