Ruby On Rails: Ajax to Refresh Partial Not Working

Question

I am having a difficult time trying to get my partial to refresh on button press. I want to simply refresh the div, and not the whole page. Here is what I have in the view:

<div id="ajax">
  <%= render 'layouts/confessions' %>
</div>

Then in my partial _confessions.html.erb, I have some basic html and two buttons similar to this:

<%= form_tag( { :controller => :confessions, :action => :upvote, :id => conf.id }, { :method => :put } ) do %>
    <%= submit_tag 'Like' %>
<% end %>

My confessions_controller.rb:

def upvote
  @confession = Confession.find(params[:id])    
  Confession.increment_counter :upvotes, @confession
  respond_to do |format|
    format.js
  end
end

And finally, upvote.js.erb:

$('#ajax').html("<%= escape_javascript(render(:partial => 'confessions')).html_safe %>");

The action of submitting to my database is working, but the page is now redirecting to /upvote?id=9 (id can be different), instead of just refreshing the div. What am I doing wrong? I am new to Rails, so I could be missing something completely obvious...

EDIT: Here is my folder structure:

My view: views/pages/home.html.erb

My partial: views/layouts/_confessions.html.erb

My Controller: controllers/confessions_controller.rb

My js.erb file: views/confessions/upvote.js.erb

After rake routes

    confessions GET    /confessions(.:format)            confessions#index
                POST   /confessions(.:format)            confessions#create
new_confession  GET    /confessions/new(.:format)        confessions#new
edit_confession GET    /confessions/:id/edit(.:format)   confessions#edit
 confession     GET    /confessions/:id(.:format)        confessions#show
                PUT    /confessions/:id(.:format)        confessions#update
                DELETE /confessions/:id(.:format)        confessions#destroy
     upvote            /upvote(.:format)                 confessions#upvote
   downvote            /downvote(.:format)               confessions#downvote
       root            /                                 pages#home

Solution 1

Make sure you have this in your application.js

//= require jquery
//= require jquery_ujs

FYI: Rails form_for :remote=>true is not calling js method

Then, change this,

$('#ajax').html("<%= escape_javascript(render(:partial => 'confessions')).html_safe %>");

To:

$('#ajax').html("<%= escape_javascript(render(:partial => 'layouts/confessions')).html_safe %>");

Solution 2

Add :remote => true

<%= form_tag( { :controller => :confessions, :action => :upvote, :id => conf.id }, { :method => :put, :remote=>true } ) do %>

Also - read up on rails routes to see how to setup the route for PUT confessions/upvote.

http://guides.rubyonrails.org/routing.html#adding-more-restful-actions

Comments

[Morgan O'Neal]

Sorry, had that in the wrong order. See the edit. { :method => :put, :remote=>true }

[Andrew Backes]

Still just redirects me...Did you see my edit? Do I have the upvote.js.erb in the right area?

[Morgan O'Neal]

Yeah, that's right. Should be in the same location as your views for confessions.

[Andrew Backes]

Hmm..no idea what is wrong then. Do I have to add something in my routes??

[Morgan O'Neal]

Run rake routes. Make sure there is something like... PUT /confessions(.:format) {:action=>"upvote", :controller=>"confessions"}

[Morgan O'Neal]

let us continue this discussion in chat

[244an]

Shouldn't you use form_remote_tag or something instead of form_tag?