jQuery dialog does not work with HTML form

Question

I have a simple user account mgmt page, which allows the admin to delete user accounts.

I want a jQuery UI dialog to popup and halt when the admin user clicks on the "delete" buttton asking for confirmation.

jQuery code:

function getDeleteConfirmation(){
    $( "#dialog:ui-dialog" ).dialog( "destroy" );
    $( "#dialog-confirm-delete" ).dialog({
        modal: true,
        buttons: {
            "Delete": function() {
                      return true;
                      $( this ).dialog( "close" );          
            },
            Cancel: function() {
                      return false;
                      $( this ).dialog( "close" );  
            }
        }

    });}

PHP code:

print "<form action='admin_index.php' method=post>";
print "<input value=".$user_list[$i]."><input type=submit onclick='return getDeleteConfirmation()' value=delete>";
print "</form>";

The problem is that the jQuery dialog window did popup, but instead of halting and waiting for user to react, it soon disappeared. The page got redirected and the user account got deleted.

I then tried to change the code like the follows;

function getDeleteConfirmation(){
    $( "#dialog:ui-dialog" ).dialog( "destroy" );
    $( "#dialog-confirm-delete" ).dialog({
        modal: true,
        buttons: {
               "Delete": function() {
                     window.location = 'admin_index.php';   
                     $( this ).dialog( "close" );
            },
                Cancel: function() {
                     $( this ).dialog( "close" );   
            }
        }
    });

}

and get rid of the form tags in HTML, leave only the input tags

print "<input value=".$user_list[$i]."><input type=submit onclick='return getDeleteConfirmation()' value=delete>";

the jQuery UI dialog window can now halt but whether I click on "Delete" or "cancel", the corresponding user account didn't get deleted. It seems to be caused by the php variable didn't get passed.

I just would like to know how to make this whole thing work properly.

Hope I have made my problem clear and any help is appreciated!

Answer 1

Your problem is that getDeleteConfirmation will return before the dialog can do anything. Things happen like this:

1. Hit the submit button.
2. getDeleteConfirmation is called.
3. The dialog is created.
4. getDeleteConfirmation returns.
5. Since getDeleteConfirmation didn't return false, the standard submit button behavior is triggered.
6. The form is submitted.

You need to return false in getDeleteConfirmation to stop the submission. Then you need the Delete button to submit the form. First you need to tell getDeleteConfirmation what form to use and you can do that buy giving it the button:

<input type="submit" onclick="return getDeleteConfirmation(this)">

Then some adjustments to getDeleteConfirmation:

function getDeleteConfirmation(button) {
    $("#dialog-confirm-delete").dialog({
        modal: true,
        buttons: {
            "Delete": function() {
                $(this).dialog("close");
                $(button).closest('form').submit(); // <--- Trigger the submit.
            },
            Cancel: function() {
                $(this).dialog("close");
            }
        }

    });
    return false;  // <--- Stop the submit.
}

Demo (with non-functioning form so you'll get an error when you submit it): http://jsfiddle.net/ambiguous/kGSCk/

Answer 2

It is impossible for JavaScript to wait for something to happen. Either you can use confirm or you will have to submit the page in a different manner. You can cancel the click event by returning false in the getDeleteConfirmation and call submit() on the form in the dialog.

OR you can use Ajax to post the form to the server.

Also your dialog code has unreachable code. It is impossible for the code after the return statements to run.

Answer 3

I think jQuery UI is overkill for something so simple. Have you thought putting this on the click of your link:

if (confirm("Are you sure you want to contiune with this request?")) {
     //Do stuff
}

Edit: Or

You can do it this way. In short, we create 2 boxes. One with the link in and the second which is the popup box. Inside the popup box we put the links. One is the link to the delete path the other will hide the new pop-up window. Simples. You'll want to style the popup box to make it sexy and lovely :)

css:

.deleteSexyBox {
    display: none;
}

html:

//This box is just the simple link
     <div class="delete">Delete</div>
// deleteSexyBox style this up to be sexy however you want. i suggest position: fixed to keep it in the middle of the screen
<div class="deleteSexyBox">
    <a href="linkToWhereEverYouDoTheDeleting">Delete me pleaaaseeee</a>
    <div>Cancel</div>
</div>

Style the delete however you want. Now for the JS

$('.delete').click(function(){
     $('.deleteSexyBox').fadeIn();
});
$('.deleteSexyBox div').click(function(){
     $('.deleteSexyBox').fadeOut();
});

The js selectors will need more work if there are to be more than one, which i assume there will be ;) I'm not sure if this will help. So holla me if its not