Ajax Forms with Rails 3 - Best Practice?

So, I was able to boil your issue down to jquery only, and sure enough, it works in jquery 1.6.4, but not in jquery 1.7.

It seems that if you replace an element in the DOM, and then trigger an event on the jquery object created from the original element, 1.6.4 would still trigger the event in the elements original location and allow it to propagate up the DOM. 1.7, however, will not trigger the element (which makes more sense).

I just did a search through the jquery 1.7 changelog and sure enough, here are the two tickets which rectified this behavior: 9951 and 10489.

To answer your question about what is the best practice for accomplishing something like this, I would say, take control over what order your events fire. jQuery automatically executes JS returned in ajax responses, which means you have no control over when that happens.

The easiest way to modify your code would be to return the HTML partial itself, and then use jquery to replace the form with the returned HTML in the ajax:complete or ajax:success/ajax:error handlers. This way you can be sure that things happen in the exact order you want.

To see how exactly to accomplish this, try reading [my articles]:

• http://www.alfajango.com/blog/rails-3-remote-links-and-forms/
• http://www.alfajango.com/blog/rails-3-remote-links-and-forms-data-type-with-jquery/
• http://railsdog.com/blog/2011/02/28/callbacks-in-jquery-ujs-in-rails3/

Or see the jquery-ujs wiki for these links and more.

Not sure if you need it anymore, but here what we have done to implement forms with AJAX

Suppose we have an actions that looks like

def new  @saved_search = SavedSearch.newnewdef create  if @saved_search.save    respond_to do |format|      format.js { render :saved }    end  else    respond_to do |format|      format.js { render :new }    end  endend

and we have a form that looks like

# app/views/saved_searches/new.html.erb<%= form_for @saved_search,  url: saved_searches_path(format: :js), remote: true do |f| %>  <div class="form">    <div class="content">      <div class="field">        <%= f.label(:name, t(".name_search"), class: "label") %>        <%= f.text_field(:name, size: "25", autofocus: "autofocus") %>      </div>      <div class="clear"></div>    </div>    <footer class="clear">      <div class="left">        <%= f.button t(".save"), class: "button" %>      </div>      <div class="clear"></div>    </footer>  </div><% end %>

And, obviously, we want to return an errors if some fields are invalid. So here is a trick

# app/views/saved_searches/new.js.erb<%- @saved_search.errors.keys.each do |field| %>  $('#saved_search_<%= field %>').after("<span class=\"errors\"> <%=   @saved_search.errors[field].join(',')  %></span>")  $('#saved_search_<%= field %>').wrap('<div class="field_with_errors" />');;<% end %>

That does not brake JQuery bindings or callback, but still presents you with errors.

I am now thinking that it might be a good idea to write some form builder, that will be able both render an HTML form, and return bunch of JQuery directives for form fields, taking

Rails.configuration.action_view.field_error_proc

into consideartion