Rails, rendering after destroy

Question

I have a Cart/show.html erb with that renders a partial called carts_row.html.erb

    <p id="notice"><%= notice %></p>

</br>
</br>

<div class="cart-container">
  <%=render 'carts_row'%>
</div>




</p>

In carts_row it's a shopping cart layout with forms to update quantity and destroy/remove item from your shopping cart.

    <h1>Shopping Cart</h1>

<div class="shopping-cart">
  <div class="column-labels">
    <label class="product-image">Image</label>
    <label class="product-details">Product</label>
    <label class="product-price">Price</label>
    <label class="product-quantity">Quantity</label>

    <!-- adding update column to labels -->
    <label class="product-update">Update</label>
    <label class="product-removal">Remove</label>
    <label class="product-line-price">Total</label>
  </div>

  <%if @cart.cart_items.size == 0%>
  <div class="text-center">
    <p>Looks like you have nothing in your cart! <%=link_to 'Add something to your cart', products_path%></p>
  </div>
  <%end%>

  <br />
  <br />
  <%if @cart_items != nil%>
    <%@cart_items.each do |item|%>

    <div class="product">
      <div class="product-image">
        <%=image_tag(item.product.picture)%>
      </div>
      <div class="product-details">
        <div class="product-title"><%=item.product.name%></div>
        <p class="product-description"><%=item.product.description%></p>
      </div>
      <div class="product-price"><%=number_to_currency(item.product.price)%></div>

      <%=form_for item, remote: true do |f|%>
      <div class="product-quantity">
        <%=f.number_field :quantity, value: item.quantity, min: 1, max: 8%>
        <%=f.hidden_field :product_id, value: item.product.id%>
        <!-- <input type="number" value="<%=item.quantity%>" min="1" max="8"> -->
      </div>
      <div class="product-update">
        <%=f.submit 'Update', class: "update-product"%>
        <!-- <%=f.hidden_field :product_id, value: item.product.id%> -->
        <!-- <button class="update-product">
          Update
        </button> -->
      </div>
      <div class="product-removal">
        <%= link_to "Remove", item, {data: {confirm: "Are you sure you wish to delete the product '#{item.product.name}' from your cart?"}, method: :delete, remote: true, class: "remove-product"}%>
        <!-- <button class="remove-product">
          Remove
        </button> -->
        <%end%>
      </div>
      <div class="product-line-price"><%=number_to_currency(item.product.price*item.quantity)%></div>
    </div>
  <%end%>
  <%end%>
<br />
<br />
<!--Temporary solution until model methods are written  -->
<% if @cart_items != nil%>
  <!--subtotal variable -->
  <%subtotal =@cart_items.collect {|item| item.quantity*item.unit_price}.sum%>
  <!--subtotal + shipping cost  -->
  <%total=subtotal+15%>
<%end%>
<div class="totals">
  <div class="totals-item">
    <label>Subtotal</label>
    <div class="totals-value" id="cart-subtotal"><%=subtotal%></div>
  </div>
  <div class="totals-item">
    <label>Tax (5%)</label>
    <div class="totals-value" id="cart-tax">Included!</div>
  </div>
  <div class="totals-item">
    <label>Shipping</label>
    <div class="totals-value" id="cart-shipping">15.00</div>
  </div>
  <div class="totals-item totals-item-total">
    <label>Grand Total</label>
    <div class="totals-value" id="cart-total">
      <%=total%>
    </div></div>
  </div>
</div>
<div class="checkout-btn">
  <button class="checkout">Checkout</button>
</div>
</div>

The update in the form goes to update.js.erb which has this

    <% if @cart.errors.any? || @cart_item.errors.any? %>
  alert("Not valid.");
<%else%>
  $(".cart-text").html("<%= escape_javascript(render 'layouts/cart_text')%>")
  $(".cart-container").html("<%= escape_javascript(render 'carts/carts_row')%>")
<%end%>

And destroy in the form has a same destroy.js.erb

<% if @cart.errors.any? || @cart_item.errors.any? %>
  alert("Not valid.");
<%else%>
  $(".cart-text").html("<%= escape_javascript(render 'layouts/cart_text')%>")
  $(".cart-container").html("<%= escape_javascript(render 'carts/carts_row')%>")
<%end%>

The update renders the carts_row.html.erb form properly. When I destroy an item it renders the page with empty products and a checkout total at the bottom. When I refresh the page the correct amount of products in the shopping cart is displayed and everything is where it should be!

How is the render of update correct but render of destroy incorrect???

My carts_item controller has these two methods for the forms:

  def update
    @cart = current_cart
    # finding cart_items by cart_id
    @cart_item = @cart.cart_items.find(params[:id])
    # @cart_items.order(:id)
    @cart_item.update_attributes(cart_item_params)
    @cart_items = @cart.cart_items.order(:id)
    # redirect 'cart_show_path'
  end

  def destroy
    @cart = current_cart
    @cart_item = @cart.cart_items.find(params[:id])
    @cart_item.destroy
    @cart_items = @cart.cart_items
  end

Kumar Kumar · Accepted Answer · 2016-07-01T22:18:37

You're destroying the item from cart, but not removing it from @cart.cart_items

Try doing this

def destroy
  @cart = current_cart
  @cart_item = @cart.cart_items.find(params[:id])

  #Find the index of @cart_item
  item_index = @cart.cart_items.index(@cart_item)

  #Remove it from @cart.cart_items when its destroyed successfully
  if @cart_item.destroy
    @cart.cart_items.delete_at(item_index)
  end

  @cart_items = @cart.cart_items
end

Let me know if it works!

Rails, rendering after destroy

2 Answers