Jquery dialog submit not working

Question

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

NeeL · Accepted Answer · 2013-05-14 07:26:34Z

4

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

edited May 14, 2013 at 7:26

answered May 13, 2013 at 11:40

NeeL

7207 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rixhers Ajazi Over a year ago

Does not work I'm afraid. I updated my JSfiddle with your instructions. Whats happening is now the form just submits without the dialog being needed to get clicked on.

NeeL Over a year ago

Well the reason why this is buggy is right, your e.preventDefault() mess it up, i'm trying to make a better jsfiddle

Rixhers Ajazi Over a year ago

Updated my last code. I added separation between the Opening of that specific dialog and the submission of the form. The "Enter Queue" button still does not perform an action.

khomyakoshka · Accepted Answer · 2013-05-14 07:25:31Z

2

Try this way (jsFiddle):

$(document).ready(function() {
    window.enterQueue=false;
    $("#signinform input:submit").on('click',function() {
        return getDialog(window.enterQueue);            
    });

    function getDialog(enterQueue){
        if(!enterQueue){
            $("#dialog-confirm").dialog({
                resizable: false,
                autoOpen: true,
                draggable: false,
                height: 310,
                width: 500,
                modal: true,
                buttons: {
                    'Cancel': function() {
                        $(this).dialog("close");
                    },
                    'Enter Queue': function() {
                        window.enterQueue=true;
                        $(this).dialog("close");
                        $("#signinform input:submit").trigger('click');
                    }
                }
            });
            return false;
        } else 
            return true;
    }

});

answered May 14, 2013 at 7:25

khomyakoshka

1,2798 silver badges18 bronze badges

1 Comment

Rixhers Ajazi Over a year ago

Thanks for you time! I posted my answer which I came up with last night. +1 for your answer though.

Rixhers Ajazi · Accepted Answer · 2013-05-14 11:31:29Z

I figured it out last night with the help of jquery website and a lot of google-ing. Thanks to the both of you for your help and time it took for the answers. + 1

This is my solution :

<script type="text/javascript">

    $(document).ready(function() 
    {
        var Form = $("#signinform");
        $(function() 
        {
            $("#dialog-confirm").dialog(
            {
                resizable: false,
                autoOpen: false,
                dialogClass: "no-close",
                draggable: false,
                height: 320,
                width: 500,
                modal: true,
                buttons: 
                {
                    'Cancel': function() 
                    {
                        $(this).dialog("close");
                        Form.data("confirmProgress", false);
                    },
                    'Submit Information': function() 
                    {
                        Form.submit();
                        Form.data("confirmProgress", false);
                    }
                }
            });
        });
        Form.submit(function() 
        {
            if (!$(this).data("confirmProgress")) 
            {
                $(this).data("confirmProgress", true);
                $('#dialog-confirm').dialog('open');
                return false;
            } else {
                return true;
            }

        });
    });
    // Everything under this is the Jquery for my second Dialog that has always been working, the issue was the above dialog which is now fixed.
 $(document).on('click', "#Cancel", function(e)
    {
        e.preventDefault();
        var href = '<?php echo base_url(); ?>studentlogin_controller/studentlogin';
        $("#dialog-noconfirm").dialog(
        {
            resizable: false,
            dialogClass: "no-close",
            draggable: false,
            height: 320,
            width: 500,
            modal: true,
            buttons: 
            {
                "Cancel": function() 
                {
                    $(this).dialog("close");
                },
                "Go Back": function() 
                {
                    window.location.href = href;
                },
            }
        });
    });

</script>

Why not select an existing answer? you did not even explain how you solved it. Clearly they were what fixed it.

Collectives™ on Stack Overflow

Jquery dialog submit not working

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related