Comando jQuery.append (html) in modo non corretto

Question

Sto utilizzando una chiamata jQuery/Ajax per aggiungere una vista parziale a una tabella. Quando la pagina viene caricata, la vista parziale viene creata correttamente. Tuttavia, una volta che l'utilizzo tenta di aggiungere un altro elemento alla tabella, la formattazione non è corretta nonostante venga utilizzata la stessa vista parziale.

Ecco la tabella. Quando questa carica, gli oggetti vengono caricati sulla pagina in modo corretto, come l'immagine qui sotto illustra:

 <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> 

Una volta cliccato il link Add another, questa chiamata jQuery/Ajax è 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> 

Che jQuery chiama questo metodo dal controller

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()); 
    } 

che chiama questo parziale vista EDIT (un paio di persone notato la id tag mancante dal <tr>, questo era solo un errore di copia/incolla per questo post, il codice vero e proprio ha il tag 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> 
    } 

Questo è la stessa vista parziale che viene chiamato quando la pagina viene caricata, quale parte del motivo per cui sono confuso che il risultato finale dopo aver colpito il link Add another risulta simile a questo

EDIT

Se si preme il link Add another due volte, questo è il risultato

EDIT

Ho provato i seguenti comandi jQuery sucess senza fortuna

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

Ecco l'HTML che viene visualizzato dopo che il collegamento Add another è cliccato. Ho incluso il tag di apertura <form> per il modulo sottostante per mostrare che le nuove righe non si trovano da nessuna parte.

<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

Ecco uno screenshot della tabella debugger di Chrome dopo il link Add Another viene cliccato. Come potete vedere, i dati estratti dalla tabella vengono caricati correttamente nei rispettivi tag <tr>, tuttavia la riga vuota (che viene inviata tramite la stessa vista parziale del resto) non ha nessuno degli stessi elementi di tabella.La schermata qui sotto che mostra di risposta, tuttavia, che non include i <tr> tag

EDIT

ho messo una linea console.log(html) nella funzione success Ajax quindi è ora legge

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

Ecco l'output della console (stato modificato per la leggibilità)

<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

Che un incubo ...

Prima di tutto, il codice HTML che veniva restituito come visibile nel debugger di Chrome andava bene, ma quando ho cliccato su "View Source" per la pagina, non ho potuto vedere nulla ma ciò che è stato originariamente caricato. Dopo aver trovato this post, ho scoperto che questo è normale. Ho quindi utilizzato this Chrome add-on per vedere finalmente che i tag <tr> e <td> venivano eliminati. Semplicemente aggiungendo un tag di apertura e chiusura all'istruzione append, ho ottenuto gli articoli restituiti da aggiungere alla tabella.

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

Answer 2

Vedo alcune cose qui. Stai facendo riferimento a <tbody> in alcuni dei tuoi codici ma non li vedo da nessuna parte nella pagina. Quindi per prima cosa suggerirei di usare <thead> e <tbody>. Nella tua vista parziale vedo <tr "item-@Model.AgentId"> che dovrebbe avere un id.

È inoltre necessario rimuovere il gestore onclick e il pulsante Elimina e inserirli con il resto del codice JavaScript. Impostare invece un corso sui collegamenti di eliminazione.

Per i collegamenti che non hanno bisogno di URL e vengono utilizzati solo per il fissaggio gestori JavaScript, Mi consiglia di utilizzare href="javascript:void(0)" quanto ciò impedirebbe il browser di fare qualcosa di speciale con href="#" così allora sarete in grado di rimuovere le chiamate a preventDefault() .

Per quanto riguarda la fonte del problema, $("#fixedRows tbody").append(html) è il codice che si desidera, quindi non è necessario provare after(). Sembra che il tuo html sia stato rimosso. Prova a impostare l'attributo dataType nella chiamata $.ajax() a html.