jQuery UI Dialog showing, but form behind still submitting without user interaction

Question

I'm having a strange issue that I've never encountered before.

I have a partial view that contains additional buttons for the page it's called from, which are simply:

<button id="editorApproveBtn" name="submitBtn" value="EditorAppove">Approve</button>
<button id="editorDenyBtn" name="submitBtn" value="EditorDeny">Deny</button>

These are additions to other buttons on the page called the same thing.

The other buttons are used for simple submits - saving the form content in 2 different ways, but these two bring up a jQuery Dialog, however, the dialogs show fine, but the form instantly submits when they've loaded.

Here's my dialog code:

$('#editorApproveBtn').button().click(function () {
        $("#confirmApproveDialog").dialog({
            bgiframe: true,
            height: 200,
            modal: true,
            resizable: false,
            width: 400,
            buttons: {
                'Yes': function () {
                    $(this).submit();
                    return false
                },
                'No': function () { $(this).dialog("close"); }
            }
        });
    });

I've not a clue what's going on, I've never seen or heard of this behaviour with it before.

Has anyone else had this issue or know of a way to fix it? or have I made a mistake and it's caused it?

Thanks in advance for any help.

Richard Marskell - Drackir · Accepted Answer · 2011-01-28 16:00:00Z

4

Try adding return false; to the end of the .click() callback function. In some browsers, button elements submit the page.

Like this:

$('#editorApproveBtn').button().click(function () {
    $("#confirmApproveDialog").dialog({
        bgiframe: true,
        height: 200,
        modal: true,
        resizable: false,
        width: 400,
        buttons: {
            'Yes': function () {
                $(this).submit();
                return false
            },
            'No': function () { $(this).dialog("close"); }
        }
    });
    return false;
});

answered Jan 28, 2011 at 16:00

Richard Marskell - Drackir

13.4k3 gold badges37 silver badges55 bronze badges

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

5 Comments

LiamGu Over a year ago

Bah, I knew it must've been something stupidly simple like that. Thanks for the help!

LiamGu Over a year ago

Though as a side note, I haven't had to do this on any other dialog's around the application?

LiamGu Over a year ago

Well I've had the opportunity to test it properly now I'm back at my work machine, but I'm having a small issue where clicking the 'Yes' button doesn't actually do anything now with the return false; at the end of .click();. Is there a way around this?

Richard Marskell - Drackir Over a year ago

@Liam: What is it supposed to be submitting? A form on your page? It looks like you're trying to run .submit() on the dialog. Are you sure you have the right selector ($(this))?

LiamGu Over a year ago

Ah it was a mistake on my part, I assumed that this would automatically refer to the form, but it doesn't it refers to the dialog box. I changed it to #EditPageForm and all is well. It's been a long day.

Collectives™ on Stack Overflow

jQuery UI Dialog showing, but form behind still submitting without user interaction

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related