What is the right way to call javascript and render partials for this kind of application (rails, with lots of javascript?)

Question

In my Rails 3 app, I have a number of pages with forms where a user can create records and then edit them. To create a record, the user clicks on the "add a record" button, which brings up a modal dialog with the "new record" form in it. Once the user fills out the form and presses Save, the modal dialog disappears and the table partial updates, showing the new record. To edit a record, the user clicks on an edit link next to any existing record, which brings up a modal dialog with the a similar form to the "new record" form, but has titles of "Editing record" and "Save Edits", etc.

Right now, I am doing this with two partials: The table partial, and a form partial. The form partial shows "Edit" titles based on whether an @editing variable is true.

The way it currently works is that when the user clicks the New Record button, it has an onClick function that does two things.

1) a jquery ajax call to a "new" action that creates the necessary objects and renders the partial like this:

@editing = false
respond_to do |format|
    format.js
    {
      render :update do |page|
         page["#entry_div"].html(render :partial=> 'form');
      end
  }
end

2) a jquery call that shows the div as a modal dialog (simplemodal).

Clicking an object's edit button does the same things, except the "edit" action sets @editing to true, and the Ajax call sends the id of the object to be edited.

Further, when the user presses save and the object is saved, the "create" and "update" actions both do the following:

respond_to do |format|
    if @record.save
    @all_records = Record.where(:project_id => @project.id).all
        format.js {
            @save_message_div = 'save_message_div'
            @table_container = 'table_div'
            @table_partial = 'table'
            @form_partial = 'form'
            @form_container = "entry_div"
            render 'saved'
        }
    end
end

'saved' is an.rjs file that updates the table partial, resets the form, and shows a "saved successfully" message.

My question is, basically, am I doing this right? What is the most up-to-date, efficient and unobtrusive way of doing these calls? Should I still be using page["#divname"].html(render partial) type calls in my actions? Should I still be using an rjs file to reload partials and show save messages? If not, how can I handle these situations (loading partials, etc)?

Thanks so much and let me know if you need more info.

Answer 1

I would suggest not using RJS (ie the render:update) stuff at all.
What you should be looking into is UJS (unobtrusive javascript).
Generally the idea is that you respond with JSON from your controller actions, and then use that data to populate or modify your views accordingly.
You could also return a pre-rendered partial from the controller (via render_to_string) and replace any existing elements on the page with it.

@model = Model.create(params[:model])

respond_with do |format|
  format.json { render :json => @model.to_json }
  format.html { # do something else }
end

And now in your javascript, you bind a callback to your AJAX response and use the JSON returned to manipulate your DOM however you feel like.