rails with ajax, respond_to confusion

Question

i have a voting system which i would like the voting response to be asynchronous.

in my 'show' view i have...

<%= render 'score' %>

which renders

<% if @user.voted?(@lesson) %>
    <%= render 'voted' %>
<% else %>
    <%= render 'unvoted' %>
<% end %>

and in turn renders my _voted.html.erb

    #will display different images, colored or not based on selection
    <% if @user.up_voted?(@lesson) %>
        <div class = "up_arrow">
            <%= link_to image_tag("up_color.png", alt: "Uncheck vote"), 
                clear_vote_lesson_url(@lesson), :method => :post, remote: true %>
        </div>
        <div class="average_score"><%= @lesson.votes %></div>
        <div class= "down_arrow">
            <%= link_to image_tag("down_uncolor.png", alt: "Vote down"), 
                down_vote_lesson_url(@lesson), :method => :post, remote: true %>
        </div>
    <!-- user down voted then -->
    <% else %>
        <div class = "up_arrow">
            <%= link_to image_tag("up_uncolor.png", alt: "Vote up"), 
                up_vote_lesson_url(@lesson), :method => :post, remote: true %>
        </div>
        <div class="average_score"><%= @lesson.votes %></div>
        <div class= "down_arrow">
            <%= link_to image_tag("down_color.png", alt: "Uncheck vote"), 
                clear_vote_lesson_url(@lesson), :method => :post, remote: true %>
        </div>
    <% end %>

and my unvoted.html.erb is

<div class = "up_arrow">
<%= link_to image_tag("up_uncolor.png", alt: "Vote up"), 
    up_vote_lesson_url(@lesson), :method => :post, remote: true %>
</div>
<div class="average_score"><%= @lesson.votes %></div>
<div class= "down_arrow">
    <%= link_to image_tag("down_uncolor.png", alt: "Vote down"), 
        down_vote_lesson_url(@lesson), :method => :post, remote: true %>
</div>

and then lastly in my controller i have..

    def up_vote
    lesson = Lesson.find(params[:id])
    current_user.up_vote!(lesson)

    respond_to do |format|
        format.html { render :action => 'show'}
        format.js {   ????????        }
    end
end

i have a few more actions such as down_vote but its very similar.

i guess im not really sure what to put inside my format.js block. ive tried puttings things like redirect_to lesson_path(lesson) and also render 'score' but the voting images don't get updated.

could someone please help? thanks!

UPDATE @ dhoelzgen

i changed it to...

def up_vote
    lesson = Lesson.find(params[:id])
    current_user.up_vote!(lesson)
    render :score, :layout => false
    #redirect_to lesson_path(lesson)
end

i put the render :score, :layout => false in my other actions as well.

and in my view i have

<div id="surrounding_container">
    <%= render 'score' %>
</div>

along with

$('.up_arrow')
  .bind 'ajax:success', (event, data) ->
    $('#surrounding_container').html($(data))

$('.down_arrow')
  .bind 'ajax:success', (event, data) ->
    $('#surrounding_container').html($(data))

in my lessons.js.coffee.

am i missing something? the images still don't change asynchronously

Answer 1

You have several options, I would suggest just returning the rendered score (not as js / json) and then putting it to (surrounding) div tag.

Render the score without the layout like this

render :score, :layout => false

and then use JavaScript (CoffeeScript in my example) to replace the content of the div tag

$('.up_arrow a')
  .bind 'ajax:success', (event, data) ->
    $('#surrounding_container').html($(data))

Alternatively, you can return the result as json and modify the page by hand, but I think the option above results in less effort.