Удалить строку со страницы без обновления страницы

Question

Я использую этот метод для удаления строки из таблицы. Я могу удалить строку из базы данных и показать предупреждение «статус». Но я должен обновить страницу для удаления строки со страницы. Что мне делать?

<script type="text/javascript"> 
function DeleteRow(btnDel) { 
    $.get('../ProtocolSummary/DeleteRowATList?id2=' + btnDel, function(data, status){ 
     alert("Status: " + status); 
    }); 
    $(btnDel).closest("tr").remove(); 
} 
</script> 



***Html*** 


<tbody> 
      <% var ATRowId = 0; foreach (var item in Model.List) 
       {%> 
     <tr style="text-align:center"> 
      <td><%=Html.TextAreaFor(m => m.List[RowId].Type, new { value = @Model.List[ATRowId].Type, @style = "width:260px;" })%> 
       <%=Html.HiddenFor(x=>x.List[RowId].AssistiveId,Model.ATList[RowId].AssistiveId) %></td> 
      <td><%=Html.TextAreaFor(m => m.List[RowId].Schedule, new { value = @Model.List[ATRowId].Schedule, @style = "width:260px;" })%></td> 
      <td><%=Html.TextAreaFor(m => m.List[RowId].Storage, new { value = @Model.List[ATRowId].Storage, @style = "width:260px;" })%></td> 
      <td style="width:50px"><input type="button" value="delete" class="btnDel" style="float:right;width:20px" onclick="DeleteRow(<%= item.AssistiveId%>)" /></td> 
     </tr> 
       <% ATRowId++; 
       }%> 
      </tbody> 

Answer 1

Я думаю, что вы снова привязываете данные к своей таблице/сетке после удаления. Таким образом, вы можете сделать так:

<script type="text/javascript"> 
function DeleteRow(btnDel) { 
$.get('../ProtocolSummary/DeleteRowATList?id2=' + btnDel, function(data, status){ 
    if(status=="active") 
    { 
     $.get('../ProtocolSummary/BindRowATList',function(data){ 
     alert("Data had bind to the grid"); 
     });            
    } 
$(btnDel).closest("tr").remove(); 
}); 

} 
</script> 

Здесь я рассматриваю "BindRowATList" функцию, чтобы связать данные по сетке в ProtocolSummary Controller.

Answer 2

Если вы получаете правильное ваше предупреждение, это потому, что оно находится в вашем обещании. jQuery возвращает обещание (обратный вызов), и вы пытаетесь удалить свой tr перед запуском AJAX.

Я не уверен, как ваш DOM будет правильно, но я считаю, что так оно и есть.

<script type="text/javascript"> 
function DeleteRow(btnDel) { 
    $.get('../ProtocolSummary/DeleteRowATList?id2=' + btnDel, function(data, status){ 
     alert("Status: " + status); 

     //Now I can be deleted as I'm inside the promise 
     $(btnDel).closest("tr").remove(); 
    });  
} 
</script> 

Answer 3

Способ, которым я это делаю, состоит в том, чтобы иметь идентификатор строки и передавать ее для удаления функции.

<tr id="rowId"> 
    <!-- some html --> 
    <button type="button" class="deleteRow" onclick="DeleteRow('rowId')">Delete Row</button> 
</tr> 
<script> 
function DeleteRow(rowId) { 
    $.get('../ProtocolSummary/DeleteRowATList?id2=' + rowId, function(data, status){ 
     alert("Status: " + status); 
     $("#"+rowId).remove(); 
    });  
} 
</script> 

Также поддерживается функция удаления в пределах $ get. Я не использую таблицы и не использовал эту логику для удаления. Но эта логика работает для обновления (добавления и удаления классов для элемента с идентификатором). Надеюсь, поможет.

Answer 4

Прежде всего, если вы еще не сделали, так как я вижу только часть вашего HTML-кода: вы должны положить <tbody> внутри элемента <table>.

<table> 
    <tbody> 
     <tr style="text-align:center"> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td style="width:50px"> 
       <input type="button" value="delete" class="btnDel" style="width:20px" onclick="DeleteRow(1)" /> 
      </td> 
     </tr> 
    </tbody> 
</table> 

Затем следует изменить функцию DeleteRow. Вы не можете получить доступ к любому элементу, используя значение в btnDel, поскольку оно не является идентификатором или классом для любого из элементов. Но вы можете сделать следующее

function DeleteRow(btnDel) { 
    var btn = event.target; 
    $(btn).closest("tr").remove(); 
} 

Смотрите рабочий fiddle

HTH