Alex Rivera | Logout

jQuery Modal Confirmation Dialog Not Submitting Form

Asked 2011-08-01T23:51:32.143
11

I am trying to pop up a confirmation modal when the user presses the delete button on the edit form. The modal pops up fine, but when jQuery should be submitting the form, it's not doing anything. I have delete as a type="button", because when it is of type submit the modal function does not hold up the process and it just deletes the user right away.

The HTML ...

-- EDIT --

(I added the <form> tags)

<form action="/admin/edit-user" enctype="application/x-www-form-urlencoded" method="post" name="edit_user_form" id="edit_user_form">
...
<p><input type="submit" value="Save" name="submit" id="submit"/></p>
<p><input type="submit" value="Cancel" name="cancel" id="cancel"/></p>         
<p><input type="button" value="Delete User" name="delete_btn" id="delete_btn" onclick="confirmDeleteUser();"/></p>
...
</form>

...

<div id="dialog-modal" title="Confirm Delete User">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 0 0;"></span> Are you sure you wish to delete this user?</p>
<p>To continue editing, click cancel.</p>
</div>

The Javascript:

   function confirmDeleteUser()
    {    
        $('#dialog-modal').dialog({
            autoOpen: false,
            width: 400,
            modal: true,
            resizable: false,

            buttons: {
                "Cancel": function() {
                    $(this).dialog("close");
                    return false;
                },
                "Delete User": function() {
                    var self = $(this);
                    var form = $('#edit_user_form');
                    tmpElm = $('<input type="hidden" />');
                    tmpElm.attr('name', 'delete');
                    tmpElm.attr('id', 'delete');
javascript jquery jquery-ui modal-dialog forms
Edit
Report

1 Answer

27

Try it a different way.

HTML

Your html has the following: onclick="confirmDeleteUser();"

Why? jQuery is supposed to make this easier for you, not harder.

Your HTML should be pure and not calling functions (with the exception of ultra-extreme circumstances you are very unlikely to encounter). Why not use the jQuery library to bind the event to the element, rather than mix javascript function calls into your HTML? You should be doing something like this in the <script> tags, after a document ready statement.

$("#delete_btn").click(function(e){
    /*Code that runs on click of the "delete_btn" ID tag*/
});

If you're unfamiliar with jQuery selectors and events then start reading here.

The other reason you should do this is in the event the document isn't correctly/fully loaded in order to prevent it from breaking on your users.

CSS

You've also done this: style="float:left; margin:0 7px 0 0;" in an HTML tag? That's evil, dude. Just evil. How am I going to maintain this code in five months?

Instead, use CSS.

In your tags, or CSS file, you need an entry such as:

.dialogAdjust {
    float: left;
    margin: 0 7px 0 0;
}

Then in your HTML you would say:

<span class="ui-icon ui-icon-alert dialogAdjust"></span>

And now you can tweak the thing to your heart'

answered 2011-08-09T21:10:27.997

Your Answer