-1

i get this error when i click the button:

deletethisproduct is not defined at HTMLAnchorElement.onclick

i know it's not the best idea to use onclick but i'm using it because i want to get the product id from the model for this instance and pass it to the function

this is my link:

<a href="#" class="btn btn-danger" onclick="deletethisproduct(@item.product_id)">Delete </a>

and this is the js function: 

@section scripts{
@Scripts.Render("~/bundles/jquery")
<script type="text/javascript">

    var deletethisproduct = function (productid) {
        $.ajax({
            method: 'POST',
            url: "/Cart/deletecart",
            data: { "id": productid },
            success: function (data) {
                console.log(data);
                //  $("#mymodalBodyDiv").html(data);
            },
            error: function (msg) {
                alert("something wrong" + msg);
            }
        });
    }
</script> 
}

so why it's not defined ? and is there any other idea that can i get the product-id for this instance and pass it to the function without the onclick() ?

Edit: i think jquery is not read or something like that i don't know why although i am using it in another view with the same links! 

<button class="btn btn-dange mythis">this </button>

i tried simply to alert from this button but nothing has happen no alert and no errors appeared in the console it also didn't say that "$" is not defined ! 

$('.mythis').click(function () {
        alert("hiiii")
    }
Ziad Mohamed
  • 37
  • 8

1 Answers1

0

Try this using jquery

It's more easy to use jquery for that type of thing (I think).

The link :

<a class="btn btn-danger delete" data-id="@item.product_id">Delete </a>

The function : 

@section scripts{
        @Scripts.Render("~/bundles/jquery")
        <script type="text/javascript">

            $('.delete').click(function(){
                var productid = $(this).attr("data-id");
                $.ajax({
                    method: 'POST',
                    url: "/Cart/deletecart",
                    data: { "id": productid },
                    success: function (data) {
                        console.log(data);
                        //  $("#mymodalBodyDiv").html(data);
                    },
                    error: function (msg) {
                        alert("something wrong" + msg);
                    }
                });
            });
        </script> 
    }

The "data-id" can be acces from jquery using .attr https://api.jquery.com/attr/

Dannick Bedard
  • 373
  • 3
  • 14
  • hello thanks alot for helping this seems better but can you please chack the **Edit** ,note: this is a partial view i wonder does jquery not working with partial views? – Ziad Mohamed Jun 02 '20 at 01:17
  • Is it because jquery is call more than 1 time? And try adding $(document)ready(function(){}); – Dannick Bedard Jun 02 '20 at 01:28
  • the problem was with the partial view it has a problem with the scrtip code so i put the code in the main view ,any way thanks for helping it does help me – Ziad Mohamed Jun 02 '20 at 03:36
  • The solution is probably to put your js or jquery logic in a other js file so you call the script later, have you check this -> https://www.google.com/url?sa=t&source=web&rct=j&url=https://stackoverflow.com/questions/21928611/how-to-use-jquery-in-partial-view-asp-net-mvc-4&ved=2ahUKEwiR69fA8OLpAhUdmXIEHXj-DS8QjjgwAHoECAYQAQ&usg=AOvVaw2T6Tmzh05lrT0UbummO-Am – Dannick Bedard Jun 02 '20 at 10:11