CODEWITHSUNDEEP
javascriptasp.net-mvcdelete-row
Ashin
Ashin

Reputation: 139

Delete row from the page without refreshing the page

I use this method to delete a row from the table. I'm able to delete the row from the database and shows the 'status' alert. But i've to refresh the page for removing the row from the page. What should i do?

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

Upvotes: 2

Views: 4673

Answers (4)

wonderbell
wonderbell

Reputation: 1126

First thing first (if not already done, since I can see only part of your HTML) : you must put <tbody> inside <table> element.

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

Then, modify the DeleteRow function. You can't access any element using the value in btnDel as it is not id or class for any of the elements. But you can do following

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

See the working fiddle

HTH

Upvotes: 1

Viswanath Mukundala
Viswanath Mukundala

Reputation: 11

The way I do it is to have an id for the row and pass that to delete function.

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

Also, kept the remove function within $get. I do not use tables and haven't used this logic for deleting. But this logic works for updating (adding and removing classes for the element with the id). Hope it helps.

Upvotes: 0

Nivs
Nivs

Reputation: 374

I think you are binding the data again to your table/grid after deletion. So you can do like this :

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

Here I am considering "BindRowATList" function to bind the data to the grid in ProtocolSummary Controller.

Upvotes: 0

Leo Caseiro
Leo Caseiro

Reputation: 1845

If you're getting correct your alert, it's because it's inside your promise. jQuery returns a promise (callback) and you're trying to remove your tr before the AJAX run.

I'm not sure how your DOM will get correctly, but I believe it does.

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

Upvotes: 0

Related Questions