Monday, February 11, 2008

I needed a refresher with RJS so I watched Peepcode’s screencast on RJS. I know it was not rails 2 so I decided to share what I changed to make it work with rails 2.

I used the SQL lite db for the demo. To set it up I created the rails project
rails rjs_demo

I used the scaffold to get it off the ground
script/generate scaffold Task name:string value:integer
And that will take care of the CRUD, routes and all that fun stuff.

You don’t need the dom_id plugin we can use the div_for

I’m just used the index.html.erb file instead of making a list file.

I added to the routes file
:collection => { :hello => :any }
To the map.resources :tasks line and the link now says
map.resources :tasks, :collection => { :hello => :any }

The link for the say hello
<%= link_to_remote "Say Hello", :url => hello_tasks_path %>
Instead of
<%= link_to_remote "Say Hello", :url => tasks_url(:action => 'hello') %>

In the tasks_controller.rb add a hello method.
def hello respond_to do |format| format.js end end

add into the views/tasks folder the file hello.js.rjs
page.alert "hello world!"

Partials.
For the tasks partial create the _task.html.erb file.
With rails 2 you can call a partial but using <%= render :partial => @tasks %>
and then in the task instead of using the dom_id you can use the div_for

Highlight me.
In routes file I added
:member => { :highlight => :post }
to the map.resources :tasks line. It should read
map.resources :tasks, :collection => { :hello => :any }, :member => { :highlight => :post }

that gives us the route
highlight_task POST /tasks/:id/highlight {:action=>"highlight", :controller=>"tasks"}

so the link is <%= link_to_remote "highlight me ", :url => highlight_task_path(task) %>

In the controller
def highlight @task = Task.find(params[:id]) respond_to do |format| format.js end end

And make the highlight.js.rjs file

the form.
you can use the remote_form_for
<%= error_messages_for :task %> <% remote_form_for(:task, :url => tasks_path, :html => {:id => "task_form"}) do |f| %> <p> <b>Name</b><br /> <%= f.text_field :name %> </p> <p> <b>Value</b><br /> <%= f.text_field :value %> </p> <p> <%= f.submit "Create" %> </p> <% end %>

And in the index.html.erb file call the partial
<%= render :partial => 'form' %>

Don't forget the add the format.js in the is @save section

Now make the create.js.rjs file
page.insert_html :bottom, 'tasks', :partial => @task page['task_form'].reset
When adding the super_special class I changed the link to
page.call "set_class_name", "task_#{@task.id}", 'super_special'
and it works

now destroy
In the destroy.js.rjs file
page.remove "task_#{@task.id}"
and add the format.js to the destroy method.
The destroy link will look like.
<%= link_to_remote "destroy", :url => task_path(task), :method => :delete, :confirm => "Do you want to delete '#{task.name}'?" %>

Replace.
_totals.js.rjs file I used this line
page.replace_html 'task_totals', @task_totals

The shared error file
create the shared folder and add an error.js.rjs file to it
the code it the same in the rjs file
in the tasks_controller in the condidtional andd this for an error
format.js { render :template => "shared/error.js.rjs" }
that will make the popup work.

These are my rough notes.

John