引導工具提示在Ajax渲染部分視圖中不準確

我在局部視圖中使用了引導模式。在我的索引視圖中，我單擊一個按鈕以在當前頁面上顯示部分視圖模式。 Jquery驗證設置爲在Bootstrap工具提示中顯示驗證錯誤。這些工具提示在所有頁面上顯示出色，但在渲染的局部視圖上顯示。引導工具提示在Ajax渲染部分視圖中不準確

我試過設置工具提示的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) 
    } 
} 
});

來源

2013-03-22 Jeff

您是否找到解決方案？ – Stnfordly 2018-03-09 07:52:45

這問題可能是由於您在初始加載頁面時初始化您的工具提示（運行$.validator.setDefaults代碼）。確保在ajax調用之後重新初始化所有工具提示：在成功函數中。

來源

2013-03-22 00:42:04 Dmitry

我有同樣的問題 - 這聽起來像是正確的答案。就我而言 - 有很多工具提示是在表格中動態創建的。在AJAX調用中使用多個呈現表格之後，如何確保jquery識別出所有這些表格？ – Stnfordly 2018-03-09 07:57:44

引導工具提示在Ajax渲染部分視圖中不準確

回答

相關問題