Ruby Buzz Forum - Adding AJAX to your existing RAILS app, part 2

Articles |
News |
Weblogs |
Books |
Forums

Artima Forums | Articles | Weblogs | Java Answers | News

Sponsored Link •

Ruby Buzz Forum
Adding AJAX to your existing RAILS app, part 2

0 replies on 1 page.

Welcome Guest
Sign In

Back to Topic List

Reply to this Topic

Search Forum

Threaded View


Previous Topic		Next Topic

Flat View: This topic has 0 replies on 1 page

Robby Russell

Posts: 981
Nickname: matchboy
Registered: Apr, 2005

Robby Russell is the Founder & Executive Director PLANET ARGON, a Ruby on Rails development firm

Adding AJAX to your existing RAILS app, part 2

Posted: Apr 11, 2005 4:21 AM

This post originated from an RSS feed registered with Ruby Buzz by Robby Russell.
Original Post: Adding AJAX to your existing RAILS app, part 2 Feed Title: Robby on Rails Feed URL: http://www.contegix.com/rss/feed.xml Feed Description: My reflections on programming with Ruby, Rails, PostgreSQL... and learning how to run a business...	Latest Ruby Buzz Posts Latest Ruby Buzz Posts by Robby Russell Latest Posts From Robby on Rails

With the release of Rails 0.11.1, we were given the, “Yellow Fade Technique” that was shown in Basecamp. This has shown up in Typo and taskTHIS (and probably many other places..). So, how can you add this to your existing Rails application in just a few steps?

In our example, we are going to accomplish two things. One, we are going to avoid the seperate new page that you get with the generated scaffolding, so at the bottom of our standard scaffolding table for list, we will display a form that will populate the database (1) and then display the new data in the table and while we’re at it, use the Yellow Fade Technique (2). Okay, so this is more than just 2 items to tackle… but I had two goals and this is how I reached those goals.

Step 1: Upgrade to at least 0.11.1.

Step 2: Add this to the <head> of your HTML.

<%= define_javascript_functions %>

Step 3: Open up your list.rhtml file (in my case this is for a list of divisions). Let’s add the following below the Create New link that comes with the stock generate script.

<a href="javascript:Toggle.display('division_new')">(create new &#187;)</a>

<div id="division_new" style="display:none">
<h1>New</h1>
<!--[form:division]-->
<%= form_remote_tag :url => { :action => "create_ajax" },
  :update=> "divisions-list",
  :position=> "bottom",
  :effects => 'highlight',
  :loading => "division.reset()",
  :complete => "Toggle.display('division_new')",
  :html=> { :id=>'division-form', :name=>'division' } %>

<p>
  <label for="division_name">Name</label><br />
  <%= text_field 'division', 'name'  %>
</p>

<p>
  <label for="division_abbr">Abbr</label><br />
  <%= text_field 'division', 'abbr'  %>
</p>

<input type="submit" value="Create" />

<%= end_form_tag %>
<!--[eoform:division]-->
</div>

Step 4: While in list.rhtml, modify your table to look something like this:

<table id="divisions-list" class="divisions-list">
  <tr>
<% for column in Division.content_columns %>
    <th><%= column.human_name %></th>
<% end %>
  </tr>
<% for division in @divisions %>
  <%= render_partial( 'division', division ) if division.active? %>
<% end %>
</table>

Step 5: Create _division.rhtml in the same folder as list.rhtml. This is what gets called in render_partial. Populate it with the following:

<tr id="division-<%= division.id %>">
  <% for column in Project.content_columns %>
    <td><%=h division.send(column.name) %></td>
  <% end %>
    <td><%= link_to 'Show', :action => 'show', :id => division.id %></td>
    <td><%= link_to 'Edit', :action => 'edit', :id => division.id %></td>
    <td><%= link_to 'Destroy', :action => 'destroy', :id => division.id %></td>
  </tr>

<% if controller.action_name == 'create_ajax' %>
<script>
   new Effect.Highlight('division-<%= division.id %>');
</script>
<% end %>

Step 6: Now, to make it all work. Edit your controller (in my example, division_controller.rb). Create a new method (I named mine create_ajax).

  def create_ajax
    @division = Division.new(@params['division'])
    if @division.save
      render_partial 'division', @division
    end
  end

Step 7: Test it out. It obviously needs some validation, cleanup of the javascript into a seperate file (so that we only include what we need), but this is all it takes to add a quicker method of adding data to a table using AJAX and it looks nice with the Yellow Fade Technique.

Thanks to Typo and taskTHIS for providing nice working examples for me to work off of.

Read: Adding AJAX to your existing RAILS app, part 2

Previous Topic

Next Topic


	Web Artima.com