使用 JQuery UI 对话框时提交操作被击中两次 [英] Submit action getting hit twice while using JQuery UI Dialog

问题描述

我正在使用 JQuery 和引导程序编写一个 ASP.NET MVC 4 应用程序.

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.

以下是我在其中一个部分视图中编写的代码，我在 JQuery 对话框中打开它:

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>        
}

这在早期工作正常，因为每当用户点击确定"按钮时，都会调用ChangeStatus"操作，并且会刷新视图.

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

但是现在，在该开发人员进行了一些更改之后，ChangeStatus"会异步命中两次，从而导致运行时错误.我不确定是什么导致了这个问题.

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:

1. ajax.dialog.custom.js
2. bootstrap.js
3. jquery-1.9.1.js
4. jquery-migrate-1.1.1.js
5. jquery-ui-1.10.2.js
6. jquery-unobtrusive-ajax.js
7. jquery.validate.js
8. jquery.validate.unobtrusive.js
9. modernizr-2.5.3.js
10. onmediajquery.js
11. ecommercesite-custom.js

所有脚本文件(ecommercesite-custom.js 除外)都是来自 JQuery 和引导站点的库.以下是 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);
        }
    });

});

我不确定这里出了什么问题.我试过删除上面的 js 文件(即 11 号)，但没有帮助.因此，您可以在考虑解决方案时忽略上述文件的任何含义.

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.

推荐答案

如果提交按钮具有特定的自定义属性，我通过更改 jquery.unobtrusive-ajax.js 文件以跳过异步调用来解决此问题.

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.

这篇关于使用 JQuery UI 对话框时提交操作被击中两次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！