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

dhoelzgen · Accepted Answer · 2012-04-17T20:15:56.660

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.

edited Apr 17 '12 at 20:15

answered Apr 17 '12 at 07:13

dhoelzgen

1,150
7
15

No, is would just use render, without the repond_to stuff. – dhoelzgen Apr 17 '12 at 09:07
hmmm it doesn't seem to change. am i missing anything? i edited my post slightly again. i added down_arrow – Sasha Apr 17 '12 at 19:59
You bind `ajax:success` to your div with `.up_arrow` class. Try to bind it to the actual remote link (and not the surrounding div). – dhoelzgen Apr 17 '12 at 20:09
sorry im still quite all new to this. what do you mean by the actual remote link? this ajax is confusing... – Sasha Apr 17 '12 at 20:12
No problem at all, I modified my answer above to clarify what I mean. The `$('.up_arrow a')` is the new element I'm binding the event to, because it's the remote link that fires the event, bound to the div surrounding this link it gets never called. – dhoelzgen Apr 17 '12 at 20:17
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/10199/discussion-between-crystal-and-dhoelzgen) – Sasha Apr 17 '12 at 20:29
hey dhoelzgen, i dont know if you got my last chat, (it was my first time using the chat so im not sure how things work) but i was wondering if you free again sometime? anytime would be good for me. ill try my best to fit your time frame. thanks a bunch again. could you give me an estimated time maybe? – Sasha Apr 18 '12 at 02:28
1

it works = ) all i had to do was replace the .bind with a .live in the coffeescript – Sasha Apr 18 '12 at 20:52

rails with ajax, respond_to confusion

1 Answers1