2

部分ビューに 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)
    }
}
});
4

1 に答える 1

1

$.validator.setDefaultsこの問題は、ページの初期読み込み時にツールチップ (実行中のコード) を 1 回初期化していることが原因である可能性があります。成功関数で ajax 呼び出しの後、すべてのツールチップを必ず再初期化してください。

于 2013-03-22T00:42:04.223 に答える