Robel Haile Robel Haile - 3 months ago 8
C# Question

Cant get the right tablerow in my table, to my data propertie in my ajax call

I have this code. My problem is to delete the right row on my table. As you can se on the html every table row have a delete button. How can i in my ajax call in the data propertie get the right table row of based on which delete button i choose to press. right now i have tried this in the data propertie
("id=" + $(this).attr("Id"))
But it dosent work. Do anybody have a better ide?

//My Html
@foreach (var discount in Model.DiscountList)
{
<tr>
<td>@Html.TextBox("codeTextBox", discount.Code) </td>
<td><input type="checkbox" name="freeShippingCheckBox" id="freeShippingCheckBox" checked="@discount.FreeShipping" /> </td>
<td><input type="checkbox" id="activeCheckBox" name="activeCheckBox" checked="@discount.Active" /></td>
<td><input type="datetime" value="@discount.CreatedDate" readonly /></td>
<td>
<input type="button" value="Delete" class="fa fa-remove" />
</td>
<input id="@discount.Id.ToString()" type="hidden" value="@discount.Id" />
</tr>
}

//my jquery/ajax
@section scripts{
<script type="text/javascript">
$(document).ready(function () {

$(".fa-remove").on("click", function () {
if (confirm("Are you sure you want to delete this discount code?")) {
$.ajax({
url: '@Url.Action("DeleteDiscountCode","Discount")',
type: "POST",
data: "id=" + $(this).attr("Id"),
success: function (data) {
if (data) {
alert("Deleted");
}

location.reload();
}
});
}
});

});
</script>
}

//my controller

namespace Web.Controllers
{
public class DiscountController : BaseController
{

[HttpPost]
public void DeleteUser(string id)
{

}
}
}

Answer

You can use the jQuery closest() method to get the table row in which your delete button is

$(".fa-remove").on("click", function (e) {
   e.preventDefault();
   var currentRow = $(this).closest("tr");

   //do your ajax call now
});

currentRow is a jQuery wrapped object. So you can call the relevant jQuery methods needed. For example, You probably want to remove the tr in your ajax call's success event

success: function (data) {
                    if (data) {
                        alert("Deleted");
                        currentRow.remove();
                    }

You might also make use the Url.Action helper method to generate the correct url to your delete action method instead of hardcoding that in javascript code.

<input type="button" 
        data-url="@Url.Action("DeleteDiscountCode","Discount",new { id= discount.Id})"
        value="Delete" class="fa fa-remove" />

Now when user click,simply get the data-url value and use that for the ajax call.

So the full code will be

$(".fa-remove").on("click", function (e) {

   e.preventDefault();
   var currentRow = $(this).closest("tr");

   if (confirm("Are you sure you want to delete this discount code?")) {
     $.post($(this).data("url"),function(data){
                        if (data.status==="success") {
                            alert("Deleted");
                            currentRow.remove();
                        }
                        else
                        {
                           alert("expected truthy! but got something else");
                        }

    });
  }        
});

Assuming your DeleteDiscountCode accepts an id

[HttpPost]
public ActionResult DeleteDiscountCode(int id)
{
  return Json(new { status="success"});
}
Comments