Ajax remove link in cart doesn't work

Jan 31, 2011 at 10:51 PM

In the shopping cart index view there is no Ajax link in the completed project but the tutorial says to add it, however after reading a comment in the tutorial I made a change to the Ajax code as below but still can't get it to work.    The standard link as below works fine.

Any ideas?

<td> 
   <!--@Ajax.ActionLink("Remove from cart", "RemoveFromCart", New With {.id = item.RecordId}, New AjaxOptions With {.OnSuccess = "handleUpdate", .HttpMethod = "Post"})-->
   <a href="#" class="RemoveLink" data-id="@item.RecordId">Remove from cart</a>
</td>

Feb 8, 2011 at 8:32 PM

I confirm this... I tried to do the same think... I even commented out all js code except the handleUpdate function because the other functions were obviously a replacement for the actionlink.

 

Can someone please respond to this?

Feb 8, 2011 at 10:22 PM

I found the answer....

You must include the following script now:

    <script src="<%: Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js") %>" type="text/javascript"></script>

 

Feb 11, 2011 at 10:50 AM
Edited Feb 11, 2011 at 12:43 PM

I am also having the same problem and even when I include the above script, the Ajax.ActionLink I copied verbatim from the tutorial does nothing.

Once I comment that line and use the line I replaced it with, it works, but it doesn't show the message that tells you its deleted.

Update: After looking over some comments for this part of the tutorial on the ASP.NET site I have made the right modifications to finally get the Ajax.ActionLink to work. Still can't see the "Album was deleted" message, though.

Feb 20, 2011 at 6:18 AM

The ShoppingCartRemoveViewModel uses "DeletedId" though the javascript in the tutorial is using "DeleteId" ... add a D to your javascript and your controller. This fixed the issue for me...

<script type="text/javascript">
    $(function () {
        // Document.ready -> link up remove event handler
        $(".RemoveLink").click(function () {
            // Get the id from the link
            var recordToDelete = $(this).attr("data-id");

            if (recordToDelete != '') {

                // Perform the ajax post
                $.post("/ShoppingCart/RemoveFromCart", { "id": recordToDelete },
            function (data) {
                // Successful requests get here
                // Update the page elements
                if (data.ItemCount == 0) {
                    $('#row-' + data.DeletedId).fadeOut('slow');
                }
                else {
                    $('#item-count-' + data.DeletedId).text(data.ItemCount);
                }

                $('#cart-total').text(data.CartTotal);
                $('#update-message').text(data.Message);
                $('#cart-status').text('Cart (' + data.CartCount + ')');
            });
            }
        });
    });

    function handleUpdate(data) {
        // Update the page elements
        if (data.ItemCount == 0) {
            $('#row-' + data.DeletedId).fadeOut('slow');
        } else {
            $('#item-count-' + data.DeletedId).text(data.ItemCount);
        }
        $('#cart-total').text(data.CartTotal);
        $('#update-message').text(data.Message);
        $('#cart-status').text('Cart (' + data.CartCount + ')');
    }

</script>
Coordinator
Feb 20, 2011 at 6:51 AM

If you don't have the script references mentioned above by @omegaluz, it's possible you didn't check the Reference Script Libraries checkbox when adding the view, as shown below:

@lookitstony - I just checked, and I believe I used DeleteId throughout. Is there a place where I used DeletedId?

Jun 29, 2011 at 11:30 AM

haha,i can help you.

see this:

<script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">

now the js has been update to 1.5.1,so you should chang the code to this

<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>

ererything will be ok.

May 30, 2012 at 10:13 PM

I'm using the VB version and the Ajax remove isn't fully working.  It updates the page that the album has been removed, but it is still displayed in the list.  When I go and add another album to the list, which redisplays the cart, the removed item is gone.  Anyone having this problem?

Jan 28, 2014 at 2:32 AM
I also got stuck at this point. Clicking the 'Remove from cart' link just did nothing. I read all of the above and tried them all - but nothing seemed to work. So I started to try and reason it out - what were these guys trying to say ~ it's something to do with the jquery version. So I looked in my MVC project scripts folder and found a jquery-1.7.1min.js. Sure enough - using the original MVC tutorial code and matching the jquery version to what I had worked for me. Hope it helps someone else.
Oct 10, 2014 at 2:20 PM
Edited Oct 10, 2014 at 3:15 PM
Hi, there!

I was also stucked at this point.

There is an error in the javascript on both Index.chtml: in the PDF file and in the code in Completed version from zip file.

This is how it's written:
<script src="/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        // Document.ready -> link up remove event handler
        $(".RemoveLink").click(function () {
            // Get the id from the link
            var recordToDelete = $(this).attr("data-id");

            if (recordToDelete != '') {

                // Perform the ajax post
                $.post("/ShoppingCart/RemoveFromCart", { "id": recordToDelete },
                    function (data) {
                        // Successful requests get here
                        // Update the page elements
                        if (data.ItemCount == 0) {
                            $('#row-' + data.DeleteId).fadeOut('slow');
                        } else {
                            $('#item-count-' + data.DeleteId).text(data.ItemCount);
                        }

                        $('#cart-total').text(data.CartTotal);
                        $('#update-message').text(data.Message);
                        $('#cart-status').text('Cart (' + data.CartCount + ')');
                    });
            }
        });

    });


    function handleUpdate() {
        // Load and deserialize the returned JSON data
        var json = context.get_data();
        var data = Sys.Serialization.JavaScriptSerializer.deserialize(json);

        // Update the page elements
        if (data.ItemCount == 0) {
            $('#row-' + data.DeleteId).fadeOut('slow');
        } else {
            $('#item-count-' + data.DeleteId).text(data.ItemCount);
        }

        $('#cart-total').text(data.CartTotal);
        $('#update-message').text(data.Message);
        $('#cart-status').text('Cart (' + data.CartCount + ')');
    }
</script>
You just don't need that handleUpdate function. Just comment that out and you have it working pretty fine, fading out the line and showing the message.

Hope this helps anyone.

Paulo Ricardo Ferreira
Mar 2, 2015 at 2:24 PM
redspear wrote:
haha,i can help you. see this: <script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script><script type="text/javascript"> now the js has been update to 1.5.1,so you should chang the code to this <script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script> ererything will be ok.
it works, thank you!