Lệnh .append (html) bổ sung không chính xác

Question

Tôi đang sử dụng một cuộc gọi jQuery/Ajax để nối thêm một khung nhìn một phần vào một bảng. Khi trang tải, chế độ xem từng phần được tạo chính xác. Tuy nhiên, khi việc sử dụng cố gắng thêm một mục khác vào bảng, định dạng không đúng mặc dù đã sử dụng chính xác chế độ xem từng phần.

Đây là bảng. Khi tải này, các mặt hàng được nạp lên trang một cách chính xác như hình dưới đây minh họa:

 <table id="fixedRows"> 
    <thead> 
     <tr> 
      <th>State Code</th> 
      <th>Agent ID</th> 
      <th></th> 
      <th></th> 
     </tr> 
    </thead> 
    <tbody>  
    @foreach (var item in Model.BankListAgentId) 
    {      
     if (!String.IsNullOrWhiteSpace(item.AgentId) && item.FixedOrVariable.Equals("F")) 
     { 
      @Html.EditorFor(model => item, "FixedPartialView")      
     } 
    } 
</tbody> 
</table> 
<br /> 
<a href="#" class="addFixed">Add Another</a> 

Khi bạn nhấp vào liên kết Add another, gọi jQuery/Ajax này được activiated

<script type="text/javascript"> 
    $(document).ready(function() { 

     $(".addFixed").click(function() { 
      //alert('test'); 
      event.preventDefault();   
      $.ajax({ 
       url: '@Url.Action("BlankFixedRow", "BankListMaster")', 
       cache: false, 
       success: function (html) { $("#fixedRows").append(html); } 
      }); 
     }); 

     $("#addVariable").click(function() { 
      event.preventDefault(); 
      $.ajax({ 
       url: '@Url.Action("BlankFixedRow", "BankListMaster")', 
       cache: false, 
       success: function (html) { $("#variableRows").append(html); } 
      }); 
     }); 

    }); 


</script> 

jQuery gọi phương thức này từ bộ điều khiển

public ViewResult BlankFixedRow() 
    { 
     SelectList tmpList = new SelectList(new[] { "AL", "AK", "AS", "AZ", "AR", "CA", "CO", "CT", "DE", "DC", "FM", "FL", "GA", "GU", "HI", "ID", "IL", "IN", "IA", "KS", "KY", "LA", "ME", "MH", "MD", "MA", "MI", "MN", "MS", "MO", "MT", "NE", "NV", "NH", "NJ", "NA", "NM", "NY", "NC", "ND", "MP", "OH", "OK", "OR", "PW", "PA", "PR", "RI", "SC", "SD", "TN", "TX", "UT", "US", "VT", "VI", "VA", "WA", "WV", "WI", "WY" }); 
     ViewBag.StateCodeList = tmpList; 

     return View("FixedPartialView", new BankListAgentId()); 
    } 

nào gọi một phần xem EDIT này (một vài người nhận thấy sự id thẻ mất tích từ <tr>, đây chỉ là một lỗi copy/paste cho bài này, mã thực tế có thẻ id)

@model Monet.Models.BankListAgentId 

@{ 
    Layout = null; 
} 
    @using (Html.BeginCollectionItem("BankListAgentId")) 
    { 
     <tr id="item-@Model.AgentId"> 
      <td> 
       @Html.DropDownListFor(model => model.StateCode, 
        (SelectList)ViewBag.StateCodeList, Model.StateCode) 
      </td> 
      <td> 
       @Html.EditorFor(model => model.AgentId) 
       @Html.ValidationMessageFor(model => model.AgentId) 
      </td> 
      <td> 
       <a href="#" class="deleteRow">delete</a> 
      </td> 
      @*<td><a href="#" onclick="$('#item-@Model.AgentId').parent().remove();" style="float:right;">Delete</a></td>*@ 
     </tr> 
    } 

này là quan điểm từng phần tương tự mà được gọi khi tải trang đầu tiên, đó là một phần lý do tại sao tôi đang bối rối mà kết quả cuối cùng sau khi chạm vào liên kết Add another quay ra nhìn như thế này

EDIT

Nếu bạn nhấn vào liên kết Add another hai lần, đây là kết quả

EDIT

Tôi đã thử các lệnh jQuery sucess sau không có may mắn

success: function (html) { $("#fixedRows > tbody:last").append(html); } 
success: function (html) { $("#fixedRows tr:last").after(html); } 
success: function (html) { $("#fixedRows > tbody").append(html); } 

Đây là HTML được hiển thị sau liên kết Add another đã nhấp. Tôi đã bao gồm thẻ mở <form> cho biểu mẫu bên dưới nó để cho thấy rằng các hàng mới không có nơi nào được tìm thấy.

<form action="/BankListMaster/Edit/11" method="post">   
    <fieldset> 
     <legend>Stat(s) Fixed</legend> 
     <table id="fixedRows"> 
      <tr> 
       <th>State Code</th> 
       <th>Agent ID</th> 
       <th></th> 
       <th></th> 
      </tr> 

      <tr id="item-1164998320"> 
       <td> 
        <select id="item_StateCode" name="item.StateCode"><option value="">HI</option> 
         <option>AL</option> 
         .. 
         <option>WY</option> 
        </select> 
       </td> 
       <td> 
        <input class="text-box single-line" id="item_AgentId" name="item.AgentId" type="text" value="1164998320" /> 
        <span class="field-validation-valid" data-valmsg-for="item.AgentId" data-valmsg-replace="true"></span> 
       </td> 
       <td> 
        <a href="#" class="deleteRow">delete</a> 
       </td> 
      </tr>  
      <tr id="item-1164998219"> 
       <td> 
        <select id="item_StateCode" name="item.StateCode"> 
         <option value="">HI</option> 
         <option>AL</option> 
         .. 
         <option>WY</option> 
        </select> 
       </td> 
       <td> 
        <input class="text-box single-line" id="item_AgentId" name="item.AgentId" type="text" value="1164998219" /> 
        <span class="field-validation-valid" data-valmsg-for="item.AgentId" data-valmsg-replace="true"></span> 
       </td> 
       <td> 
        <a href="#" class="deleteRow">delete</a> 
       </td> 
      </tr>  
      <tr id="item-0352926603"> 
       <td> 
        <select id="item_StateCode" name="item.StateCode"> 
         <option value="">GA</option> 
         <option>AL</option> 
         .. 
         <option>WY</option> 
        </select> 
       </td> 
       <td> 
        <input class="text-box single-line" id="item_AgentId" name="item.AgentId" type="text" value="0352926603" /> 
        <span class="field-validation-valid" data-valmsg-for="item.AgentId" data-valmsg-replace="true"></span> 
       </td> 
       <td> 
        <a href="#" class="deleteRow">delete</a> 
       </td> 
      </tr>    
     </table> 
     <br /> 
     <a href="#" class="addFixed">Add Another</a> 
    </fieldset> 
</form>  
<a href="#" class="addFixed">Add Another</a> 
<form action="/BankListMaster/Edit/11" method="post"> 

EDIT

Đây là một ảnh chụp màn hình của bảng trong trình gỡ lỗi của Chrome sau khi liên kết Add Another được nhấp. Như bạn có thể thấy, dữ liệu được lấy từ bảng được nạp đúng trong các thẻ <tr> tương ứng, tuy nhiên hàng trống (được gửi qua cùng một góc nhìn phần còn lại) không có bất kỳ phần tử bảng nào giống nhau.Màn hình bắn dưới đây cho thấy đáp ứng, tuy nhiên, đó không bao gồm các <tr> thẻ

EDIT

tôi đặt một dòng console.log(html) trong success chức năng Ajax nên bây giờ đọc

  success: function (html) { 
       console.log(html); 
       $("#fixedRows > tbody").append(html); 
      } 

Đây là đầu ra giao diện điều khiển (trạng thái được chỉnh sửa để dễ đọc)

<input type="hidden" name="BankListAgentId.index" autocomplete="off" value="3f7e0a92-8f20-4350-a188-0725919f9558" /> 
     <tr> 
      <td> 
       <select id="BankListAgentId_3f7e0a92-8f20-4350-a188-0725919f9558__StateCode" name="BankListAgentId[3f7e0a92-8f20-4350-a188-0725919f9558].StateCode"> 
        <option>AL</option> 
        .. 
        <option>WY</option> 
       </select> 
      </td> 
      <td> 
       <input class="text-box single-line" id="BankListAgentId_3f7e0a92-8f20-4350-a188-0725919f9558__AgentId" name="BankListAgentId[3f7e0a92-8f20-4350-a188-0725919f9558].AgentId" type="text" value="" />     
      </td> 
      <td> 
       <a href="javascript:void(0)" class="deleteRow">delete</a> 
      </td>    
     </tr> 

Answer 1

Thật là một cơn ác mộng hoàn chỉnh ...

Trước hết, HTML mà đã được trả lại như có thể xem trong trình gỡ lỗi của Chrome là tốt, tuy nhiên khi tôi nhấp vào "View Source" cho trang, tôi có thể không nhìn thấy bất cứ điều gì nhưng những gì ban đầu được tải. Sau khi tìm thấy this post, tôi thấy rằng điều này là bình thường. Sau đó tôi đã sử dụng this Chrome add-on để cuối cùng thấy rằng các thẻ <tr> và <td> đã bị loại bỏ. Bằng cách thêm một thẻ mở và đóng vào câu lệnh chắp thêm, tôi đã nhận các mục được trả lại để gắn thêm vào bảng.

$(".addFixed").click(function() { 
     $.ajax({ 
      url: '@Url.Action("BlankFixedRow", "BankListMaster")', 
      dataType: 'html', 
      cache: false, 
      success: function (html) { 
       $("#fixedRows > tbody").append('<tr>' + html + '</tr>'); 
      } 
     }); 
    }); 

Answer 2

Tôi thấy một vài điều ở đây. Bạn đang tham chiếu <tbody> trong một số mã của bạn nhưng tôi không thấy nó ở bất kỳ đâu trong trang. Vì vậy, đầu tiên tôi sẽ đề nghị sử dụng <thead> và <tbody>. Trong chế độ xem một phần của bạn, tôi thấy <tr "item-@Model.AgentId"> cần có id.

Bạn cũng nên xóa trình xử lý onclick và nút xóa và đặt nó với phần còn lại của JavaScript của bạn. Thay vào đó, hãy đặt một lớp trên các liên kết xóa của bạn.

Đối với các liên kết mà không cần url và chỉ được sử dụng để gắn bộ xử lý JavaScript, tôi khuyên bạn nên sử dụng href="javascript:void(0)" vì điều này sẽ ngăn chặn các trình duyệt từ làm bất cứ điều gì đặc biệt với href="#" như vậy thì bạn sẽ có thể để loại bỏ các cuộc gọi đến preventDefault() .

Với nguồn gốc của sự cố, $("#fixedRows tbody").append(html) là mã bạn muốn, do đó không cần phải thử after(). Có vẻ như html của bạn đang bị tước. Hãy thử đặt thuộc tính dataType trong các cuộc gọi $.ajax() đến html.