Rails Updating a DIV (with reload from model) after a javascript call

Question

OK, I have a page which shows the customer how many Widgets he has. Here's the view (haml):

#available
  = "Available widgets: #{@customer.widgets.unused.count()}"

("unused" is a scope in the model showing the available widgets).

When Customer redeems Widgets with a form with ":remote => true", some javascript places a nice DIV on the page with animation and the model is updated by the controller.

Here's the controller:

  def redeem
    @customer = Customer.find(params[:customer_id])
    number = params[:amount].to_i
    unless @customer.widgets.unused.empty?
      number.times do
        @customer = Customer.find(params[:customer_id])
        widget = @customer.widgets.unused.first # Grab first unused pass
        widget.status = "Redeemed"
        widget.save!
      end
    else
      @pay = "true"
      # customer.widgets.new
    end
    # redirect_to @customer
  end

And here's the javascript (js.erb):

var number = <%= params[:amount] %>;
<% if @pay.eql? "true" %>
  $("#widget-pay").modal('toggle');
<% else %>
   while (number > 0) {
     var item = $('<div class="widget-show">...</div>');
     $('#allwidgets').isotope('insert', item);
     number --;
   }
<% end %>

My problem is I now want to update the "#available" DIV with the new Widget count. How do I do this?

At worst I could reload the page so the data is pulled from the model again, at best just update the DIV. Neither which I seem to be able to do from the javascript.

Answer 1

You can do something like this:

render :js => "$('#available').append(widget)"
widget.save!