The Jquery dialog box does not work

advertisements

yesterday I started working on a Jquery Dialog box to replace the default confirm box that jquery has... I came across an issue and all the tutorials I see tell me to use .submit() on my form but that does not seem to want to play nicely (or play at all for that matter)

This is the JSFIDDLE

And now this is my javascript that is not working for me :

<script>

$(document).ready(function() {
        $(function() {
            var currentForm;
            $("#dialog-confirm").dialog({
                resizable: false,
                autoOpen: false,
                draggable: false,
                height: 310,
                width: 500,
                modal: true,
                buttons: {
                    'Cancel': function() {
                        $(this).dialog("close");
                    },
                    'Enter Queue': function() {
                        currentForm.submit();
                    }
                }
            });
        });

    $("#signinform").submit(function() {
        currentForm = this;
        $('#dialog-confirm').dialog('open');
        return false;
    });
});

</script>

The problem is happening at the "Enter Queue" button. Pretty much the scenario (as it is shown on the jsfiddle) is I need users to acknowledge the rules of the office, and if they do so they click on a check-box, once they do so then they click Submit, which then sends a dialog explaining to the user what they are getting into. However for some reason the "Enter Queue" button does nothing. I am quite confused. Any help would be great.

Thanks


It's because your re-using the $(document).on('submit', "#signinform", function(e) method which got e.preventDefault(); for first instruction when you call $('#signinform').submit();.

You need to set a temporary variable to see wether you come from your code or the submit button.

Here is a JSFiddle with a working test, but you should do something nicer =)

EDIT : Javascript is an asynchronous langage, it means that your $('#dialog-confirm').dialog('open'); doesn't block and just modify the html, so the submit event always will return false -> it will never be sent.

So I get that JSFiddle which not really works like you want but if you trigger the submit button a second time after clicked the Enter Queue button it will work, so i'm wondering why the submit() method don't work when called from here.

A method you could use is to send the form with ajax (look at post() in jquery) and then redirect your user with something like window.location = "yourpage".