引导工具提示未在 Ajax 呈现的部分视图中显示

Question

我在局部视图中有一个 Bootstrap 模式。在我的索引视图中，我单击一个按钮以在当前页面上显示部分视图模式。 Jquery 验证设置为在 Bootstrap 工具提示中显示验证错误。这些工具提示在所有页面上都很好地显示，但在渲染的局部视图上。

我尝试将工具提示的 z-index 设置为大于模态，但这不起作用。

局部视图

@model Phase_3.ViewModels.UserCreateViewModel

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>New User</h3>
</div>
@using (Html.BeginForm("Create", "User", FormMethod.Post, new { @class = "remove-margin" }))
{
    <div class="modal-body">

        @Html.Label("First Name", new { @class = "inline" }) @Html.ValidationMessageFor(x => x.User.FirstName)
        @Html.TextBoxFor(x => x.User.FirstName, new { @class = "modal-input input-validation-error" })

        <br />
        @Html.Label("Last Name")
        @Html.TextBoxFor(x => x.User.LastName, new { @class = "modal-input" })
        <br />
        @Html.Label("Email")
        @Html.TextBoxFor(x => x.User.Email, new { @class = "modal-input" })
        <br />

        @* REMOVE WHEN RANDOM SALT METHOD IS COMPLETED*@
        @Html.Label("Salt")
        @Html.TextBoxFor(x => x.User.Salt, new { @class = "modal-input" })
        <br />
        @Html.Label("Password")
        @Html.TextBoxFor(x => x.User.Password, new { @class = "modal-input" })
        <br />
        @Html.Label("Role")
        @Html.DropDownListFor(x => x.User.RoleId, new SelectList(Model.Roles, "Id", "Title"), new { @class = "row-fluid" })
    </div>

    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Close</a>
        <input type="submit" value="Create" class="btn btn-primary" />
    </div>
    @Scripts.Render("~/bundles/jqueryval")
}

索引视图

@model IEnumerable<Phase_3.Models.User>
<script src="/Content/custom/js/display.modal.js"></script>

<div class="row-fluid spacer">
    <div id="modal-container" class="modal hide fade" data-url='@Url.Action("Create")'>
        <div id="modal-inner"></div>
    </div>

<input type="button" id="display-modal" value="New User" class="btn btn-primary" />
</div>

@* Display users in data table *@
<div class="row-fluid">

    <table class="table table-condensed table-hover">
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
            <th>Role</th>
        </tr>
        @foreach (var item in Model)
        {
            <tr>
                <td>@Html.DisplayFor(x => item.FirstName)</td>
                <td>@Html.DisplayFor(x => item.LastName)</td>
                <td>@Html.DisplayFor(x => item.Email)</td>
                <td>@Html.DisplayFor(x => item.Role.Title)</td>
            </tr>
        }
    </table>
</div>

在工具提示中显示错误

$.validator.setDefaults({
showErrors: function (errorMap, errorList) {
    this.defaultShowErrors();

    // destroy tooltips on valid elements                              
    $("." + this.settings.validClass)
        .tooltip("destroy");

    // add/update tooltips 
    for (var i = 0; i < errorList.length; i++) {
        var error = errorList[i];

        $("#" + error.element.id)
            .tooltip({ trigger: "focus" })
            .attr("data-original-title", error.message)
    }
}
});

Answer 1

此问题可能是由于您在页面初始加载时初始化了一次工具提示（运行 $.validator.setDefaults 代码）。确保在 ajax 调用后重新初始化所有工具提示：在成功函数中。