jQuery UI close Dialog when form submitted

Question

I have been trying to do the follow:

• Form gets showed inside jQuery Dialog
• When form gets submitted, jQuery dialog should close

I am trying the following code:

    $('#RegisterDialog').dialog({
               autoOpen: false,
                closeOnEscape: false,
                position: 'center',
                modal: true,
                width: 600,
                buttons: {
                    "Cancel account registration": function() { 
                        $(this).dialog("close"); 
                        window.location = 'http://localhost/';
                    } 
                }
});

$(".Register").click(function() {
           $('#RegisterDialog').dialog("close"); 
           $('#RegisterDialog').hide();
});

However, it hides and pops back up again. I also tried 'autoClose: false'.

Any help please?

Answer 1

You should try .remove() .

This will remove the element and it won't pop up again.

Answer 2

From the jQuery documentation...

.dialog( "destroy" ) 
// Remove the dialog functionality completely. This will return the element back to its pre-init state.

This might do the trick.

Answer 3

I think you should do like this

$(".Register").click(function() {
           $('#RegisterDialog').dialog("close"); 
           //$('#RegisterDialog').hide(); --> no need to call this
});