Question

I’m trying to get a nested form to submit via AJAX, but I can’t seem to figure it out. I’ve searched far and wide for a solution, but all in vain. I’ve seen a few similar questions on here, but none with helpful answers. I have all the necessary inclusions in my application.html.erb layout, all the gems, etc. Using Rails 3.1.1 and Ruby 1.9.2p290.

Below are my models…

class Parent < ActiveRecord::Base
    has_many :children, :dependent => :destroy
    accepts_nested_attributes_for :children
end

class Child < ActiveRecord::Base
    belongs_to :parent
end

And here’s my form…

<%= form_for @parent.children.new, :remote => true do |t| %>

# form fields...

<%= t.submit 'Save', :class => 'button close_modal', :id => 'submit_button' %>

My children controller…

respond_to :html, :js, :json

def create
    @child = Parent.create(params[:child])
    respond_with(@child.parent)
end

And finally my create.js.erb file in the views/children folder (this is just to test)…

$("#notice").html('this works')

When all the above didn’t work, I tried adding this script to the form…

jQuery.ajaxSetup({ 
    'beforeSend': function(xhr) {xhr.setRequestHeader("Accept", "text/javascript")}
});

$("#submit_button").submit(function(){
    $.post($(this).attr("action"), $(this).serialize(), null, "script");
    return false;
})

But still no luck. The code I’ve displayed here will submit the form via the children controller, then redirect me back to the parent/show view, which is where the child form is. But if I remove “responds_with(@child.parent)” from the children controller, I get the following error…

Template is missing

Missing template children/create, application/create with 
{:handlers=>[:erb, :builder, :coffee], :formats=>[:html], :locale=>[:en, :en]}. 
Searched in: * "C:/Users/Owner/My Documents/Aptana Studio 3 Workspace/my_app/app/views" 
* "c:/Ruby192/lib/ruby/gems/1.9.1/gems/devise-1.5.2/app/views"

So in either case, I’m guessing that the form is not submitting via AJAX. And I have no idea why. I’m somewhat new to Rails, and to programming in general, so I don’t understand a whole lot about what’s going on behind the scenes with the Rails framework.

One other note that may or may not be relevant, I’ve noticed that some of my jQuery doesn’t work on elements in hidden divs when I show them. For example, this form I’m working on is rendered via jQuery by showing a hidden div, and it seems like I have to re-write some of the button scripts in the partial itself, because the script I’ve included in the application.js file doesn’t work on these buttons like it does on the rest.

However, I don’t think that’s the problem, because I put the form straight in the view (unhidden), but it still didn’t work.

EDIT

I’ve now noticed that the form is submitting via HTML, and not JS. So for some reason, the Rails jQuery is not binding to the form and overriding the default submit action. What might be causing that?

EDIT

After further research, I’m suspecting that the issue has something to do with the fact that I’m using a custom jQuery file from ThemeRoller. Is there something I’m supposed to do to make sure that my custom jQuery doesn’t interfere with the built in Rails jQuery?

Any thoughts??

Answer 1

Ah ha!!! So it turns out that I was including the jQuery libraries twice, and I’m assuming in the wrong order. I had downloaded a custom jQuery theme from ThemeRoller AND I had a link to the Google CDN in my application.html.erb file. So I deleted the reference to the Google CDN in my application header, then included some “//= require” lines in my application.js file to reference my custom jQuery files.

//= require jquery-1.8.2
//= require jquery-1.8.24.custom.js
//= require jquery-ui
//= require jquery_ujs
//= require_tree .

This seems to have resolved the conflict, and now my Rails AJAX calls are working just dandy!