adding/deleting items from a list and updating the total

Question

I'm building something akin to a shopping cart but adding items to a shortlist.

I need to add the item to the cart and then update the cart count and display the added item in a modal window (I'm planning on using the Reveal plugin by Zurb).

Thus far, I've got the adding to cart working but I'm not yet able to update the count (without refreshing the page) or display the modal.

http://jsfiddle.net/x7Azn/2/

$('a.add-to-shortlist').on('click',function(){  
$.ajax({
  url: $(this).attr('data-href'),
  success: function(data) {     
      verb = data['verb'];
      total_items = data['total_items'];
      alert('item added to shortlist');
  }
});
  // stop event propagation here
 return false;
});

Help appreciated.

So, which part is not working? Do you get the alert? Have you confirmed `total_items` is correct? — JJJ, May 03 '13 at 13:21
Is your alert going off? When testing AJAX, I'll typically throw in a success and error callback handler so that I can debug each. Wouldn't hurt if you could debug and show us whats in the data object you are getting back. — cchamberlain, May 03 '13 at 13:24
the alert displays fine and the count is updated (a page refresh shows the cart items have updated). Here is some better info on the data object http://squarebit.co.uk/shortlist/docs/ajax-actions#content — Steven Grant, May 03 '13 at 13:32
Have you tried replacing your "#" in the anchor with "javascript:void(0);", and replacing your return false with an e.preventDefault(); such as - http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false — cchamberlain, May 03 '13 at 13:47
shouldn't need javascript:void(0) but changing return false to e.preventDefault(); seems to be working. How would I now change the text of the a element to read 'remove from list' ? — Steven Grant, May 03 '13 at 14:00

score 1 · Accepted Answer · answered May 03 '13 at 14:12

1

To change the text following the e.preventDefault() call, put the following within the function -

  e.preventDefault();

  $(this).text('remove from list');

answered May 03 '13 at 14:12

cchamberlain

17,444
7
59
72

hmmm, that works although surely we only want that on success? – Steven Grant May 03 '13 at 15:05
You are correct, I'd just stick the text change into the success callback. – cchamberlain May 07 '13 at 04:49

score 0 · Answer 2 · answered May 03 '13 at 13:16

0

try this

$('.item-count')html(total_items );

answered May 03 '13 at 13:16

PSR

39,804
41
111
151

1

you mean $('.item-count').html(total_items); ? I tried that already – Steven Grant May 03 '13 at 13:19

adding/deleting items from a list and updating the total

2 Answers2