Create.js.erb Not Showing In AJAX with Rails - ruby-on-rails

Question

I am trying to get AJAX working on a form in my rails application and am about 75% of the way there. I have a form where a person can create an activity and tag that activity with skills. I would like to provide the ability for them to create a new skill right within the form. I can replace the "Create a New Skill" link with a form and then save the record without any problem. My issue is after the record is saved, rails keeps redirecting me back to the my home page rather than back to the page with the form. The redirect is normal behavior if the user was creating a skill through the typical HTML form.
The link on my page to create a new skill that turns into a form:
<%= link_to "Create A New Skill", new_skill_path, :id => "new-skill-link", remote: true %>
The new skill form that replaces the link:
<%= form_for Skill.new, :remote => true do |f| %>
<%= f.text_field :description %>
<%= f.submit "Save", :class => 'btn-large btn-primary' %>
<% end %>
My skills controller (the New and Create methods):
def new
#skill = Skill.new
#tags = current_user.tags
respond_to do |format|
format.html
format.js
end
end
def create
#skill = current_user.skills.new(params[:skill])
params[:skill][:tag_ids] ||= []
respond_to do |format|
if #skill.save
flash[:success] = "Skill was successfully created!"
format.html { redirect_to home_page_url }
format.js { render action: "create" }
else
flash.now[:error] = "There was an error saving your skill."
format.html { render action: "new" }
format.js { render action: "new" }
end
end
end
My new.js.erb:
$("#new-skill-link").hide().after('<%= j render("skills/remote_form") %>');
My create.js.erb:
$("#new-skill").remove();
$("#new-skill-link").show();
$(".skill-list ul").append('<%= j render(#skill) %>');
It seems that rails is interpreting the request as HTML so it is responding with the HTML page. I tried adding :format => :js to the skill form but rails just rendered the javascript in my browser without interpreting it.
When I look at the log on the web server, I don't see any errors. I get:
Started POST "/skills" for 127.0.0.1 at 2012-12-31 20:02:16 -0700
Processing by SkillsController#create as HTML
Parameters: {"utf8"=>"✓", "authenticity_token"=>"xxxxx", "skill"=>{"description"=>"Example Skill"}, "commit"=>"Save"}
User Load (62.8ms) SELECT "users".* FROM "users" WHERE "users"."remember_token" = 'xxxxx' LIMIT 1
(0.1ms) begin transaction
SQL (15.4ms) INSERT INTO "skills" ("created_at", "description", "updated_at", "user_id") VALUES (?, ?, ?, ?) [["created_at", Tue, 01 Jan 2013 03:02:16 UTC +00:00], ["description", "Example Skill"], ["updated_at", Tue, 01 Jan 2013 03:02:16 UTC +00:00], ["user_id", 1]]
(1.4ms) commit transaction
Redirected to http://localhost:3000/home_page
Completed 302 Found in 96ms (ActiveRecord: 79.7ms)
Any thoughts?

Answer 1

The reason is, you should not do redirects inside the create method, because the AJAX request is kind of lost in the middle (you could see this via Firebug/FF).
Following is a sample code:
Ex: assuming I have a scaffold called project
projects_controller.rb
class ProjectsController < ApplicationController
#project = Project.new(params[:project])
if #project.save
flash.now[:success] = ["#{#project.name} sucessfully created"]
else
flash.now[:errors] = #project.errors.full_messages
end
end
in view/projects
_form.html.erb
<div id="message"></div>
<%= form_for #project :remote => true, :html => { :class => 'form-horizontal' } do |f| %>
<%= f.text_field :name, :class => 'span3', :placeholder => "Project name" %>
<%= f.submit nil, :class => 'btn btn-success' %>
<% end %>
create.js.erb
$("#message").html("<%= escape_javascript raw(flash_display) %>");
in helper
module ApplicationHelper
def flash_display
response = "<div class='alert #{alert_class}'>"
response += "<button type='button' class='close' data-dismiss='alert'>x</button>"
flash.each do |name, msg|
msg.each do |m|
response = response + content_tag(:p, m)
end
end
response += "</div>"
flash.discard
response
end
private
def alert_class
css_class = case flash.first[0]
when :errors then "alert-error"
when :success then "alert-success"
when :notifications then "alert-block"
end
css_class
end
end
So as you can see, I'm not redirecting from my create method, after saving I'm just passing the message of the status. So your page will not refresh and only update the messages.