Submit action getting hit twice while using JQuery UI Dialog

Question

I am writing an ASP.NET MVC 4 application using JQuery and bootstrap.

There is a modal dialog functionality in my site which used to work smoothly until recently when one another developer did some styling related changes in the website.

Following is the code I have written in one of my partial view, I am opening this in a JQuery dialog:

@using (Ajax.BeginForm("ChangeStatus",
    new AjaxOptions { UpdateTargetId = "AboutOrderContainer", HttpMethod = "POST" }))
{
    @Html.HiddenFor(m => m.OrderId)
    <table class="row-fluid">
        <tr>
            <td></td>
        </tr>
        <tr>
            <td>
                Comments&nbsp;(Optional):
            </td>
        </tr>
        <tr>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>
                @Html.TextAreaFor(m => m.Comments, new { @maxlength = 255, @rows=5 })
            </td>
        </tr>        
        <tr>
            <td>                
                <center>
                <input type="submit" title="OK" value="OK" class="btn" />
                    </center>
            </td>
        </tr>
    </table>        
}

This was earlier working fine, as whenever a user hits "OK" button the "ChangeStatus" action was getting called, and a view was getting refreshed.

But now, after that developer has done some changes, the "ChangeStatus" getting hit twice asynchronously which results in run-time errors. I am not sure what is causing the issue.

Following are the script files that gets loaded while this dialog is loaded:

ajax.dialog.custom.js
bootstrap.js
jquery-1.9.1.js
jquery-migrate-1.1.1.js
jquery-ui-1.10.2.js
jquery-unobtrusive-ajax.js
jquery.validate.js
jquery.validate.unobtrusive.js
modernizr-2.5.3.js
onmediajquery.js
ecommercesite-custom.js

All script files (except, ecommercesite-custom.js) are libraries from JQuery, and bootstrap sites. Following is the code of ecommercesite-custom.js file:

$(document).ready(function () {

    $('input[class*=btn-submit]').click(function (event) {
        if (($(this).closest('form').valid())) {
            $(this).attr("disabled", true);
            $(this).closest('form').submit();
        }
        else {
            $(this).attr("disabled", false);
        }
    });

});

I am not sure what is wrong here. I have tried removing the above js file (i.e. no. 11), but it was of no help. So you can ignore any implications of the above file while thinking about the solution.

Anyone has any idea? Reiterating the fact that the same code was working very well until the other developer changed some styling functionality.

jmar777 · Accepted Answer · 2013-03-29 13:08:46Z

3

It sounds like you may be submitting the form once from your script, and then again due to the browser's default behavior. Try adding this to the top of your handler:

event.preventDefault();

answered Mar 29, 2013 at 13:08

jmar777

39.8k11 gold badges68 silver badges66 bronze badges

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

3 Comments

Nirman Over a year ago

this didn't work, I tried adding this in "ecommercesite-custom.js" file, but I could see the code written in this file is not getting hit either.

jmar777 Over a year ago

I still can't explain the double submit, but I noticed that your submit button has a class of btn, but your selector in your JavaScript is looking for a class that contains btn-submit, so it makes sense why that's never being run. Is there any other JavaScript in play (perhaps intended for a different form, but is being run anyway)?

Nirman Over a year ago

No, there isn't any other javascript except the files I have mentioned above. All of them are library files only.

Nirman · Accepted Answer · 2013-04-02 13:12:47Z

1

I fixed this issue by changing jquery.unobtrusive-ajax.js file to skip async call if the submit button is having a particular custom attribute.

answered Apr 2, 2013 at 13:12

Nirman

6,83322 gold badges82 silver badges148 bronze badges

Comments

Pratik Bhatt · Accepted Answer · 2013-03-29 13:13:34Z

0

You change you input type="submit" to input type="button"

Here you are submitting your form twice, one by default behavior of form and another from script

answered Mar 29, 2013 at 13:13

Pratik Bhatt

9112 gold badges8 silver badges21 bronze badges

1 Comment

Nirman Over a year ago

No, this is hitting the action for once. Actually, I noticed that the "ecommercesite-custom.js" is not being hit at all. so you can ignore that file while thinking about a solution.

Collectives™ on Stack Overflow

Submit action getting hit twice while using JQuery UI Dialog

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related