Question 87672 in ASP.NET Question posted in
The official documentation can be found here.

on click event and pass value to function – Asp.net

I have an on click event that calls a function but it does not work:

@foreach (var item in Model.OrderDetails)
{
   <tr class="text-center" id="@item.DetailId">
       <td class="product-remove" onclick="DeleteOrderDetail(@item.DetailId)"><a><span class="ion-ios-close"></span></a></td>
   </tr>
}
@section Scripts
{
    <script>
        function DeleteOrderDetail(orderDetailId) {
            debugger;
            $.get("/Account/RemoveCart?orderDetailId=" + orderDetailId,
                function () {
                    $("#" + orderDetailId).hide('slow');
                });
    </script>
}

error:Uncaught ReferenceError: DeleteOrderDetail is not defined at HTMLTableCellElement.onclick

A search on the internet revealed that I had to use a addEventListener
But in this case, I can not pass the @item.DetailId to the function

Tags:

2

Answers


  1. 0

    You have some syntax errors.

    You did not close the } of your function.

            function DeleteOrderDetail(orderDetailId) {
        debugger;
        $.get("/Account/RemoveCart?orderDetailId=" + orderDetailId,
            function () {
                $("#" + orderDetailId).hide('slow');
            });
         }

    And in this part of your code, you should pass data in ''.

     <td class="product-remove" onclick="DeleteOrderDetail('@item.DetailId')"><a><span class="ion-ios-close"></span></a></td>
    Login or Signup to reply.
  2. 0

    We already mentioned your syntax issue in comments to the question

    However if you do

    $(".product-remove").on("click", function() { 
  const $parent = $(this).closest("tr"), detailId = $parent.attr("id");
  $.get(`/Account/RemoveCart?orderDetailId=${detailId}`,function()) {
    $parent.hide('slow'); 
  });
});

    Then NO need for inline handlers or passing IDs

    the code above replaces ALL your posted code

    If you add the details dynamically, you need to delegate to nearest static container

    $("#tableId").on("click",".product-remove", function() { 
  const $parent = $(this).closest("tr"), detailId = $parent.attr("id");
  $.get(`/Account/RemoveCart?orderDetailId=${detailId}`,function()) {
    $parent.hide('slow'); 
  });
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search