rails with ajax, respond_to confusion - ruby-on-rails

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.