Bootbox回调表单提交无法正常工作

乔·库瓦斯(Joe Cuevas)

我正在动态创建一些表单,并在MVC5应用程序中将Bootbox 4与bootstrap 3和jquery 3.1.0一起使用。

编辑:我将我的项目的jquery从1.10.2更新到了3.1.0,下面仍然有同样的问题。

用法:单击删除,引导箱通过模式确认删除,如果确认,则调用表单上的.submit()操作。

应用程序截图

问题:我单击“删除”按钮,它弹出一个模态以确认操作,然后单击“继续”,但是它什么也没做。在所有表单元素中似乎只有一个工作提交动作。因此,我能够在每次刷新页面时成功调用一个元素上的提交。

我是javascript的新手,所以目前我有一个基本的了解,我正在尝试找出下面的代码在做错什么。任何帮助,将不胜感激。

我的查看代码

@foreach (var user in Model.Users)

    {
        <tr>
            <td>
                @user.Id
            </td>
            <td class="text-center">
                @user.FirstName @user.LastName
            </td>
            <td class="text-center">
                @Html.CheckBox("role", user.IsAdmin)
            </td>
            <td>
                @using (Html.BeginForm("UpdateUserRole", "Admin", FormMethod.Post, new {@class = "btn-inline"}))
                {
                    @Html.Hidden("id", user.Id)
                    @Html.Hidden("role", user.GetRole(user.IsAdmin))
                    <button type="submit" class="btn btn-info">Update</button>
                }
                @using (Html.BeginForm("RemoveUser", "Admin", FormMethod.Post, new {@class = "btn-inline", @id=user.Id+"Form"}))
                {
                    @Html.Hidden("id", user.Id)
                    <button [email protected] type="submit" class="btn btn-danger buttonElement">Remove</button>
                }
            </td>
        </tr>
    }

我的脚本(添加到View的底部)

@section scripts
{
<script type="text/javascript">
    $(function () {
        $('form').on('click','button.buttonElement',function (e) {
            var user = $(this).attr("data-user-id");
            e.preventDefault();
            bootbox.dialog({
                message: "Do you want to continue ?", title: "Remove User",
                buttons: {
                    main: { label: "Cancel", className: "btn btn-default", callback: function () { return true; } },
                    success: { label: "Continue", className: "btn btn-default", callback: function () { $('#'+user+'Form').submit(); } }
                }
            });
        });
    });
</script>
}

编辑:这是一些HTML输出:

<table class="table table-hover">
    <tbody>
        <tr>
            <td>
                Joe
            </td>
            <td class="text-center">
                Joe Cuevas
            </td>
            <td class="text-center">
                <input checked="checked" id="role" name="role" type="checkbox" value="true"><input name="role" type="hidden" value="false">
            </td>
            <td>
                <form action="/Admin/UpdateUserRole" class="btn-inline" method="post">
                    <input data-val="true" data-val-regex="Invalid!" data-val-regex-pattern="([A-Za-z0-9.-])+" data-val-required="NetworkID is required!" id="id" name="id" type="hidden" value="joe"><input id="role" name="role" type="hidden" value="Admin">                        <button type="submit" class="btn btn-info">Update</button>
                </form>                    <form action="/Admin/RemoveUser" class="btn-inline" id="joeForm" method="post">
                    <input data-val="true" data-val-regex="Invalid!" data-val-regex-pattern="([A-Za-z0-9.-])+" data-val-required="NetwordID is required!" id="id" name="id" type="hidden" value="joe">                        <button data-user-id="joe" type="submit" class="btn btn-danger buttonElement">Remove</button>
                </form>
            </td>
        </tr>
    </tbody>
</table>

编辑:解决方案

事实证明,在最终的HTML输出上,modelstate覆盖了我的View中由foreach循环生成的所有表单的id值。这就解释了为什么上述所有症状都在发生。我只是将以下代码添加到了我的控制器中,然后返回了我的viewModel,该代码已得到修复:ModelState.Remove(“ id”);

铁森T.

就嵌套而言,表/ tr / td /形式是可以的。您可能可以简化触发表单提交的触发:

$('form').on('click','button.buttonElement',function (e) {
    var user = $(this).attr("data-user-id");
    var form = $(this).closest('form'); // <-- add this

    e.preventDefault();

    bootbox.dialog({
        message: "Do you want to continue ?", 
        title: "Remove User",
        buttons: {
            main: { 
                label: "Cancel", 
                className: "btn btn-default", 
                callback: function () { 
                    return true; 
                } 
            },
            success: { 
                label: "Continue", 
                className: "btn btn-default", 
                callback: function () { 
                    form.submit();  // <-- change this
                }
            }
         }
    });
 });

您也可以简单地使用该bootbox.confirm功能。如果要自定义按钮文本,请按照此处的第二个示例进行操作

$('form').on('click','button.buttonElement',function (e) {
    var user = $(this).attr("data-user-id");
    var form = $(this).closest('form'); // <-- add this

    e.preventDefault();

    bootbox.confirm({
        message: "Do you want to continue ?", 
        title: "Remove User",
        buttons: {
            cancel: { 
                label: "Cancel", 
                className: "btn btn-default"
            },
            confirm: { 
                label: "Continue", 
                className: "btn btn-default"
            }
         },
         callback: function(result) {
             if(result == true) {
                 form.submit();
             }
         }
    });
 });

您可能需要考虑以下事实:用户可以触发表单提交而无需单击继续按钮,在这种情况下,将在不确认的情况下发生删除请求。

另外,尚未确定Bootbox是否可与jQuery 3.x一起使用,尽管这更多取决于父Bootstrap库版本-如果已升级到jQuery 3.x,则必须升级到Bootstrap 3.3.7。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Bootbox回调表单提交无法正常工作

来自分类Dev

回调无法正常工作。

来自分类Dev

表单提交无法正常工作

来自分类Dev

回调中的removeEventlistener无法正常工作

来自分类Dev

WCF回调无法正常工作

来自分类Dev

jQuery插件回调无法正常工作

来自分类Dev

表单提交的Firebase更新无法正常工作?

来自分类Dev

AJAX表单提交无法正常工作

来自分类Dev

表单提交事件无法正常工作(Meteor)

来自分类Dev

Koa 2.0 表单提交无法正常工作

来自分类Dev

回调无法正常工作node.js

来自分类Dev

Drupal 7访问回调无法正常工作

来自分类Dev

使用afterRender回调后,角度渲染无法正常工作

来自分类Dev

具有回调功能的Javascript无法正常工作

来自分类Dev

回调函数中的setTimeout无法正常工作

来自分类Dev

Drupal 7访问回调无法正常工作

来自分类Dev

after_find回调无法正常工作

来自分类Dev

执行回调后,jQuery无法正常工作

来自分类Dev

JavaScript中的匿名回调无法正常工作

来自分类Dev

回调侦听器无法正常工作

来自分类Dev

维度 value_format 回调无法正常工作

来自分类Dev

回调函数在点击时无法正常工作

来自分类Dev

数据 onResponse 后回调无法正常工作

来自分类Dev

使用javascript取消表单提交无法正常工作

来自分类Dev

重力表单提交后的jQuery回调

来自分类Dev

在ajax回调后提交表单

来自分类Dev

表单未使用加载回调提交

来自分类Dev

在Ajax回调后提交表单

来自分类Dev

使用Jquery和Ajax提交后,表单提交第二次无法正常工作