ys says:

what i did was

1. add format.js in carts controller destroy method

2. add remote: true on empty button

3. create destroy.js.erb in views/carts with

$('#cart').html("<%=j render @cart %>").hide('blind', 1000);

it works fine but seems not following given hint…

suke says:

Does the cart appear when you access the page at first?

or

Does the cart appear after you empty the cart and reload the page?

michael says:

@ys: in your 3rd step i did this:

 
$('#cart tr').not('.total_line').remove();
$('#cart').hide('blind', 1000);

jack says:

@michael: why do we need to use the .not. I had used only the #cart.hide but that did not work after emptying the cart and then adding to it again. However, your solution works great. Can you explain this a little more please?

Alex says:

@jack: The reason you use the not() is to remove all tr entires from the table, except for #total_line. The reason you want to do this is because in create.js.erb we told the browser to show() the cart if, and only if the number of tr entires under #cart is 1.

In other words, when you click Add to Cart button, the very first thing that happens is the JavaScript checking to see how many tr elements available (length). If the length == 1, we call show(); otherwise we don’t. If we were to remove total_line, the result, after removal, of length would be 0*.

The reason your method doesn’t work is because after clearing, length equals 0. When you then push Add to Cart, the *show() is skipped, and we render @cart. What show() does is essentially revert what the changes we did with hidden_div_if() helper, setting display: none. Since we did no re-fetch application.html.erb, but rather only ask to fetch _cart.html.erb, via the 2nd line in create.js.erb, the logic of hidden_div_if() is never run on the server, and we never run it on the browser either, because length = 0 after we removed total_line.

TL;DR you need total_line so that JQuery’s show() will execute, removing display:none which was set via Empty Cart.

frog says:

@ys: can you (or someone else) insert the code for the first two steps, as well. I understand what you are saying, but don’t have the code correctly written

Shaun says:

@frog this is what I did. 1) Add this to carts_controller.rb under def destroy

format.js { }

2. Then in _cart.html.erb I added remote: true to the Empty cart button.

3. Created a destroy.js.erb in the view/carts dir with the following code:

if ($('#cart').length == 1) { $('#cart').hide("blind", {direction: "vertical" }, 1000); }

$('#cart tr').not('.total_line').remove();

That’s it and it worked make sure to clear your browser cache before testing.

monofu. says:

I checked my solution with @frog’s but couldn’t find any difference. I eventually found it. There was an error in my brackets in my if loop. For some reason it didn’t evaluate. To solve this I just did the following:
cart = $('#cart');
That way the cart div is cached in a variable and makes the if loop a lot easier write and read, and uses slightly less memory (emphasis on slightly).

Bess says

Not sure why we want the extra tr hanging around, if just to make the cart display work. My destroy.js.erb code does a simple hide as long as there are some items in the cart:

if ($('#cart tr').length > 0) { $('#cart').hide('blind', 1000); }  
and then in the display I just show the cart if its already hidden:
if ($('#cart tr').is(':hidden')) { $('#cart').show('blind', 1000); } 

Seems easier to keep track of the whole cart either being shown or hidden, rather than removing DOM elements and checking against table row length..

Doug asks

Why delete rows from the table with .not? If you are hiding the table, does it matter? If it does matter, just removing some rows results in a table that has no entries, but a total cost of whatever you last had (viewable in the page source). Rendering the cart first, then hiding it ensures that the table is correct. The following worked for me:
$('#cart').html("<%= j render @cart %>");
$('#cart').hide('blind');

Deny say

Syntax of jQuery function .hide() is difference: .show( duration, [callback] ). then all works fine.