Question

I would like to use Ajax in my Ruby on Rails 3 application. Problem is I want the Ajax link to surround a div tag. If possible I’d rather it be with jQuery rather than prototype. How would I accomplish this?

I would like a solution involving some rails type programing something like link_to.

Answer 1

First of all add ‘jquery-rails’ gem to your Gemfile:

gem 'jquery-rails'

Then run bundle install and rails g jquery:install. That’s all. Now you can work with jQuery.

Add a div into your view, for example:

<div id='ajax_div'><%= @article.title %></div>

Now you can include some javascript this way:

$(
  function(){
    $("#ajax_div").click(function(){
      $.ajax(...)
    }
  }
)

More about $.ajax: http://api.jquery.com/jQuery.ajax/ (you can use either $.post or $.get or $.getScript)

UPD

working with ajax through link_to

<%= link_to some_path, :remote => true do %>
  <div id='ajax_div'><%= @article.title %></div>
<% end %>

FROM THE BEGINNING

Let’s create new rails application. From scratch. To show how ajax works. I won’t test it, so here can be misstypes and mistakes.

• rails new ajaxapp
• cd ajaxapp
• rails g scaffold Comment body:text
• rake db:create
• rake db:migrate
• add gem 'jquery-rails' to Gemfile => bundle install => rails g jquery:install

let’s edit comments/index.html.erb:

<h1>Listing comments</h1>

<%= link_to comments_path, :remote => true, :method => :post do %>
  <div>Click me to add random comment</div>
<% end -%>
<div id='comments'>
  <%= render @comments %>
</div>

_comment partial:

<p>
  <%= comment.body %>
</p>

Now we will add app/views/create.js.erb file:

$("#comments").append("<%= escape_javascript( render @comment ) %>")

comments_controller create action:

def create
  @comment = Comment.new
  @comment.body = (0...50).map{ ('a'..'z').to_a.<<(" ")[rand(27)] }.join
  @comment.save
end

that’s all. Now run rails s. Go to localhost:3000/comments.