I'm struggling to get my head around how to implement UJS in Rails (specifically, Rails 3 with jQuery). I've worked through Ryan's Railscast, and can follow what to do when submitting a form via AJAX, but I'm having trouble extending this concept to attaching a javascript function to a html element in my view files. Ultimately, I would like to be able to create a form where a different partial is rendered depending upon which radio button from a series is selected. Should I be looking at using the Prototype legacy helpers for this? And when do I need to create a .js.erb file?

Sorry for the newbie question, I've been unable to find much that explicitly outlines the concept of UJS and how to use it in a Rails app/switch over code from a RJS approach. Any help would be much appreciated!

I'm struggling to get my head around how to implement UJS in Rails (specifically, Rails 3 with jQuery). I've worked through Ryan's Railscast, and can follow what to do when submitting a form via AJAX, but I'm having trouble extending this concept to attaching a javascript function to a html element in my view files. Ultimately, I would like to be able to create a form where a different partial is rendered depending upon which radio button from a series is selected. Should I be looking at using the Prototype legacy helpers for this? And when do I need to create a .js.erb file?

Sorry for the newbie question, I've been unable to find much that explicitly outlines the concept of UJS and how to use it in a Rails app/switch over code from a RJS approach. Any help would be much appreciated!

• javascript
• jquery
• ruby-on-rails

4 Answers 4

By using the remote => true on the form, your data will go to the server and all javascript returned will simply be executed in the context of the page, so here is a simple example:

<%= form_tag '/action_path', :remote => true do %>
  <%= radio_button_tag 'partial', 'one' %>
  <%= radio_button_tag 'partial', 'two' %>
  <%= submit_tag 'select' %>
<% end %>

<div id="partial_holder">

</div>

On the server

def action
  #do whatever you want with parameters
end

On the action.js.erb file

$('#partial_holder').html("<%= escape_javascript(render(:partial => params[:partial])) %>")

On the action.js.erb file

$('#partial_holder').html(<%= escape_javascript(render(:partial => params[:partial])) %>)

The above line has a minor mistake, the ruby tags inside html method should be inside quotes. The following will work.

$('#partial_holder').html("<%= escape_javascript(render(:partial => params[:partial])) %>")

Please refer to following links for more insight into the concept of UJS:

http://www.railsinside./tips/451-howto-unobtrusive-javascript-with-rails-3.html

http://joshhuckabee./jquery-rails-3

http://therailworld./posts/26-Using-Prototype-and-JQuery-with-Rails3-UJS-

http://www.metaskills/2010/1/29/unobtrusive-js-in-rails-3-with-prototype

For some strange reasons for me the abovementioned solution did not work. This did:

Element.replace('element_id', '<%= escape_javascript(render(:partial=>"foo")) %>');

Note the ' that surrounds the ruby block.