Help with first AJAX action

Rails
#1

I’ve used Rails for a while, but haven’t really done any AJAX until
now. Now I’ve been fighting for days with my first AJAX action and
after reliably crashing Safari and throwing errors in IE, I’m finally
coming to the list for help. :slight_smile:

I have a “controls” div in my layout. This div displays a list of
page-specific actions. When some of these actions are clicked (I.e.
edit/add) the controls div is replaced by the form that performs the
action. When the action is submitted, the controls div reverts to the
list of available actions and the page is updated to reflect the
change via an RJS template.

So, as a concrete example, I have a list_colors action with a link to
“Add color”, which links to an edit_color action. The action looks
like this:

def edit_color
	@color = Color.find_by_id(params[:id]) || Color.new
	if request.post? and params[:color]
		@color.attributes = params[:color]
		if @color.save
		return redirect_to :action => "edited_color", :color => @color
		end
	end
	return render :template => "storefront/edit_color", :layout => false
end


def edited_color
	@color = Color.find(params["color"].to_i)
	render :template => "storefront/edited_color"
end

Here is the RJS:

page.insert_html :bottom, “colors”, :partial => “list_color”, :locals
=> {:color => @color}
page.visual_effect :highlight, “colors”
page.replace_html “controls”, render_controls

When the user clicks on “Add color” in the controls div, which
initially displays “Add color” and “Log out,” these links are
replaced by the edit_color form. When the user successfully adds the
new color, the RJS template should insert the list_color partial into
the colors table, which renders a

containing the new color data.
It should also highlight the entire table, then call the
render_controls helper which replaces the form in the controls div
with “Add color” and “Log out” once again.

Initially, this action called edited_color instead of redirecting to
it. Is this a better way for some reason? Ideally I’d like to do away
with actions that serve no purpose other than rendering a template.
I’m just not clear on what the best way to accomplish this should be,
so while I could (and probably have) tried many permutations, it all
seems silly until I know how to go about this, and quite a few of the
actions I’ve seen in tutorials and such aren’t using this DRY
postback style. Or should I replace the action entirely with a simple
call to render edited_color?

When I run this action, Safari crashes when edited_color is rendered
if the replace_html statement with the list_color partial is
uncommented. If either or both of the other statements are
uncommented, the javascript that should be rendered is dumped into
the view, but is rendered as code and not run (I.e. I get the
Effect.Highlight and Element.update calls, and the links which
Element.update should render are displayed as links, but inline wih
the javascript. The code isn’t streamed or evaluated by the browser.
And, yes, I am including all the javascripts in my layout.

Oh, and yes, the new color is successfully created, and looking in
the logs shows that the correct color is being pulled from the
database when the list_color partial is rendered. What additional
information can I provide?

Thanks in advance. This one has been baffling me and I don’t know
what else to try.