jQuery AJAX event only firing once

Question

First let me thank @Jasen, he spent 9 days helping me with an issue and it means a lot to me that he took him time to help me. It was this that he was helping me with, but at the last second they decided they wanted to go with AJAX since the contact page uses it and removing items from the cart utilizes it.

Let me get to my issue, I have view (this is MVC 5) that in loop loads all the products of a selected category. I want to use jQuery nd AJAX to add items to the cart. This works great for the first item in the list the first time it is added to the cart.

I imagine my problem is all the buttons have an id of AddToCart and jQuery, the way I have it written can't decide which button is being clicked.

Here is the code for the view

@model IEnumerable

@{
    ViewBag.Title = "Products > Necklaces";
    Layout = "~/Views/Shared/_Layout.cshtml";
}





Products > Necklaces


    @Html.ActionLink("Create New", "Create")

@*@using (Html.BeginForm("AddToCart", "Orders", FormMethod.Post))*@
{
    
        
        
        

            @foreach (var item in Model)
            {
                
                    
                        
                            
                                
                                        @Html.ActionLink(@item.Name, "Details", new { id = item.Id })
                                    

                                    
                                    @Html.DisplayFor(modelItem => item.Price)
                                    
                                     
                                         Quantity: @Html.TextBoxFor(modelItem => item.Quantity, new { @id = "quantity", @style = "width:50px;", @class = "formTextBox" })
                                    
                                        
                                            
                                        
                                    
                                    
                                
                            
                        
                    
                
                    }
                    @Html.ActionLink("Back To Categories","Categories")
                    

               
    
@*}*@

And here is my jQuery code:

@section scripts {
    
    
    
    
    
}

Can someone show me what I am doing wrong here so I can get this working?

EDIT #1

Here is the updated jQuery code:

$(".AddToCart").click(function () {
//first disable the button to prevent double clicks
$(this).prop("disbled", true).prop("value", "Adding...");
$("#sending").css("display", "block");
var td = $(this).closest('td')

//traverse DOM and find relevant element 
var price = parseFloat(td.find(".divPrice").prop("id")),
    quantity = parseInt(td.find("#quantity").val()),
    id = parseInt(td.find(".divId").prop("id"));

$.ajax({
    url: "@Url.Action("AddToCartAJAX", "Orders")",
    type: "POST",
    data: { "id": id, "quantity": quantity, "price": price },
    //if successful
    success: function (data) {
        successfulCall()
    },
    error: function (data) {
        errorCall(data);
    }
});

It worked before making the client side changes (granted only once and only for the first item in the list), since I havent changed the server side code what could have gone wrong? EDIT #2

Here is the whole thing in it's entirity

@model IEnumerable

@{
    ViewBag.Title = "Products > Necklaces";
    Layout = "~/Views/Shared/_Layout.cshtml";
}





Products > Necklaces


    @Html.ActionLink("Create New", "Create")

@*@using (Html.BeginForm("AddToCart", "Orders", FormMethod.Post))*@
{
    
        
        
        

            @foreach (var item in Model)
            {
                
                    
                        
                            
                                
                                        @Html.ActionLink(@item.Name, "Details", new { id = item.Id })
                                    

                                    
                                    @Html.DisplayFor(modelItem => item.Price)
                                    
                                     
                                         Quantity: @Html.TextBoxFor(modelItem => item.Quantity, new { @style = "width:50px;", @class = "formTextBox quantity" })
                                    
                                        
                                            
                                        
                                    
                                    
                                
                            
                        
                    
                
                    }
                    @Html.ActionLink("Back To Categories","Categories")
                    

               
    
@*}*@
@section scripts {
    
    
    
    
    
}

EDIT #2

Here is the code for AddToCartAJAX in OrdersController:

public ActionResult AddToCartAJAX(int id, int quantity, decimal price)
{
    var cart = ShoppingCart.GetCart(this.HttpContext);

    cart.AddToCart(id, quantity, price);

    return RedirectToAction("Index");
}

And AddToCart in ShoppingCrt.cs:

public void AddToCart(int id, int quantity, decimal price)
{
    // Get the matching cart and product instances
    var order = entities.Orders.FirstOrDefault(
        c => c.OrderGUID == ShoppingCartId
        && c.OrderItems.Where(p => p.ProductId == id).FirstOrDefault().ProductId == id);

    if (order == null)
    {
        // Create a new order since one doesn't already exist
        order = new Order
        {
            InvoiceNumber = Guid.NewGuid().ToString(),
            OrderDate = DateTime.Now,
            OrderGUID = ShoppingCartId,
            IsShipped = false
        };
        entities.Orders.Add(order);

        // Save changes
        entities.SaveChanges();

        //add the OrderItem for the new order
        OrderItem oi = new OrderItem()
        {
            OrderId = order.OrderId,
            OrderGUID = ShoppingCartId,
            ProductId = id,
            ProductQuantity = quantity,
            ProductPrice = price
        };

        entities.OrderItems.Add(oi);
        entities.SaveChanges();
    }
    else
    {
        // If the item does exist in the cart, 
        // then add one to the quantity
        order.OrderItems.Where(p => p.ProductId == id).FirstOrDefault().ProductQuantity += quantity;
    }
}

Hope that helps

Satpal · Accepted Answer

As you are creating elements in a loop, duplicate identifiers are created. Which makes your HTML invalid.

Identifiers in HTML must be unique. and this is expected behaviour.

You can assign a common class then can use class selector. Here in example I have added AddToCart CSS class to the button.

HTML

@Html.TextBoxFor(modelItem => item.Quantity, new {@style = "width:50px;", @class = "formTextBox quantity" })

Script

$(".AddToCart").click(function() {
    $(this).prop("disabled", true)
           .prop("value", "Adding...");

    var td = $(this).closest('td.divId')

    //traverse DOM and find relevant element 
    var price = parseFloat(td.find(".divPrice").prop("id")),
        quantity = parseInt(td.find(".quantity").val()),
        id = parseInt(td.find(".divId").prop("id"));

    //Your ajax call
});

I would also recommend you to use data-* prefixed custom attributes to store arbitrary data.

Which can be fetched using .data(), it also converts value to appropriate type.

 var price = $('.divPrice').data("price");

Note: Change the rest of selectors accordingly.

jQuery AJAX event only firing once

Answers (1)

Related Questions