Ajax redirecting when it is not supposed to

Question

I've implemented a program something like a shopping cart where you would add products to the cart. I'm using ajax make the page dynamic so multiple products can be added to the cart without a page reload. For some reason, the first product in the list can be added correctly while the rest of products alway redirects to the controller url when it isn't supposed to.

View Code

<section class="grid grid--loading" id="portfoliolist">
    <!-- Loader -->
    <img class="grid__loader" src="~/Images/grid.svg" width="60" alt="Loader image" />
    <!-- Grid sizer for a fluid Isotope (Masonry) layout -->
    <div class="grid__sizer"></div>
    <!-- Grid items -->
    @foreach (var item in Model.ProductsList)
    {
        var pricetag = "pricegroup3";
        if (item.Price <= 300)
        {
            pricetag = "pricegroup1";
        }
        else if (item.Price > 300 && item.Price <= 500)
        {
            pricetag = "pricegroup2";
        }
        <div class="grid__item @item.Type @pricetag">
            <div class="slider">
                @foreach (var image in Model.ProductImagesList.Where(m=>m.ProductID == item.Id))
                {
                    <div class="slider__item"><img src="~/Images/Products/@image.Image" /></div>
                }

            </div>
            <div class="meta">
                <h3 class="meta__title">@item.Name</h3>
                <span class="meta__brand">@item.Brand</span>
                <span class="meta__price">R @item.Price</span>
            </div>
            <a class="action action--button action--buy" href="@Url.Action("AddToPlatform", "ProductPlatforms", new { ProdID = item.Id })" id="platformAdd" data-value="@item.Id"><i class="fa fa-shopping-cart"></i><span class="text-hidden">Add to Platform</span></a>
        </div>
    }
</section>

The last tag is what will be clicked on to add the product to the cart.

Script -Ajax

$("#platformAdd").click(function (e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: $(this).attr("href"),
            success: toastr["success"]("Product added to Platform")
        });

    });

Controller function

public void AddToPlatform(int ProdID)
    {
        var currUser = User.Identity.GetUserId();
        DateTime now = DateTime.Now;

        var exists = ProductExists(ProdID);
        if (exists == false)
        {
            ProductPlatform prodPlatform = new ProductPlatform()
            {
                ProductID = ProdID,
                UserID = currUser,
                ViewedStatus = false,
                DateAdded = now
            };

            db.ProductPlatforms.Add(prodPlatform);
            db.SaveChanges();
        }
    }

The ajax script function would call the controller function which will add the product to the cart. Since there are no redirects I can't seem to figure out why the ajax call redirects to the tag "href".

Thanks for any help!

Ids have to be **unique**. Use (e.g.) `$(".action--buy").click(...)` instead of `$("#platformAdd").click(...)`. `$("#platformAdd")` returns only the first element with the id `platformAdd` — Andreas, Jan 25 '17 at 22:06
@Andreas - why don't you post it as answer? You are the first one to answer this question and you deserve the points. The answer currently down there is posted ~7 hours after your comment. — Developer, Jan 26 '17 at 05:36
@Developer Because I have to sleep sometimes and because it is a duplicate which I had not found yesterday ;) — Andreas, Jan 26 '17 at 05:44

score 0 · Answer 1 · answered Jan 26 '17 at 05:27

You need to use class instead of id because ids are always unique.

$(".lnkAddProduct").click(function (e) {
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: $(this).attr("href"),
        success: function(){alert("ADDED");}
    });

});

Ajax redirecting when it is not supposed to

1 Answers1