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/