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

Question

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

        }
}
}

Shyju · Accepted Answer · 2016-09-02T13:21:13.303

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

Hey this works thank you! 2 questions though. this is my final jquery code(https://gyazo.com/f7a5be1e5778c0409e768864385d9807) But it wont go into the success parameter of my ajax call. Why? And can you also explain these two lines i dont understand (e.preventDefault();) ($.post($(this).data("url"),function(data)) — Robel Haile, Sep 02 '16 at 09:47
See my update in the answer(changed return type from Boolean to an anonymous object) $.post is short hand for $.ajax call wit POST type. `e.preventDefault` prevents the normal link /button click behavior as we are doing an ajax call. — Shyju, Sep 02 '16 at 13:21
can you help me with this question? is almost the same http://stackoverflow.com/questions/39298744/how-can-i-get-into-the-value-inside-of-an-html-tr-object?noredirect=1#comment65931517_39298744 — Robel Haile, Sep 02 '16 at 18:43

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

1 Answers1