Rails: cannot submit a remote form that was loaded via Ajax

Question

Goal

I have a page with a list of items, coming from a Rails backend. I want to be able to edit a row in that list, using Ajax calls via Rails UJS.

Approach

I've added an edit button to the end of each row. The edit button is a link_to ... :remote => true. Clicking it loads the list again, but with the selected row in edit mode. The editable row is embedded in a form ... :remote => true. The save button in that row is a submit button.

index.html.haml

#editor
  %table
    - @items.each do |item|
      %tr
        = render :partial => 'row', :locals => { :item => item }

_row.html.haml

... 
%td // a number of columns with attributes
...
%td
  = link_to t("actions.edit"), edit_item_path(item), :remote => true
  = link_to t("actions.delete"), item_path(item), :remote => true, :method => :delete, :data => { :confirm => "Are you sure?" }

edit.html.haml

#editor
  %table
    - @items.each do |item|
      %tr
        - if item == @item
          = form_for @item, :url => item_path(@item), :remote => true, do |f|
            = render :partial => "row_form", :locals => { :f => f }
        - else
          = render :partial => 'row', :locals => { :item => item }

_row_form.html.haml

... 
%td // a number of columns with editable attributes
...
%td
  %button{ :type => "submit" }=t("actions.save")
  = link_to t("actions.cancel"), items_path, :remote => true

Ajax response handling

$("#editor").on("ajax:success", function(event, data, status, xhr) {
  $("#editor").html($(data).find("#editor").html());
});

Problem

When I load a list page in edit mode /items/12/edit, the row of item 12 is editable. Clicking the save button submits the form via Ajax correctly and loads the /items index partial, replacing the editable list with jQuery. Clicking the edit button again, loads the edit page again (e.g. /items/12/edit), with the embedded form. Only this time, the form does not get submitted anymore when the save button is clicked. It seems the submit event handler is not attached to the dynamically loaded remote form.

Question

How can I submit a remote form loaded via Ajax, preferrably using the Rails UJS approach?

Duplicates

I know there are duplicates of this question, but none of them were answered. I hope someone finally comes up with a definite answer.

• Rails remote form loaded via Ajax after document ready is not submitting
• :remote => true/data-remote on a form loaded via ajax

Answer 1

I found the problem! Thanks to the hints in the answers of both @Jake Smith and @Parandroid. Here's what I found in two steps.

Finding 1

While getting the ajax:success to be fired did not seem to be the problem, it did look like the form handling did not work 100% correctly just on the $("#editor") selector. At the very least that needed to be $("#editor form"), but that might not work if we start from the index page, which doesn't contain the form yet. So the approach suggested by @Jake Smith seemed to be the most robust way to go after all. This resulted in:

edit.html.haml

#editor
  = render :partial => "edit"

edit.js.erb

$('#editor').html('<%= escape_javascript render("edit") %>');

_edit.html.haml (still not working)

%table
  - @items.each do |item|
    %tr
      - if item == @item
        = form_for @item, :url => item_path(@item), :remote => true, do |f|
          = render :partial => "row_form", :locals => { :f => f }
      - else
        = render :partial => 'row', :locals => { :item => item }

But still this did not result in a working submit button. Until I discovered what went wrong...

Finding 2

The solution above did give the submit button plain old POST behavior, which the server did not like, since it expected a PUT to reach the update action. Rails does this by generating a hidden _method field with the value PUT. I found out that rails generates this field (and a couple of other crucial hidden fields) on the very top of the _edit.html.haml partial and not inside the form tag! So I moved the form to the top of the partial and it worked!

_edit.html.haml (WORKING!)

= form_for @item, :url => item_path(@item), :remote => true, do |f|
  %table
    - @items.each do |item|
      %tr
        - if item == @item
          = render :partial => "row_form", :locals => { :f => f }
        - else
          = render :partial => 'row', :locals => { :item => item }

Who would have guessed...

Answer 2

Problem is that DOM was modified by javascript and callbacks (on ajax success in your example) was initialized only on DOM init. So when DOM changed (in part of #editor) callbacks didnt work.

So you shoul re-initialize this callback any time you change the DOM with javascript

$("#editor").on("ajax:success", function(event, data, status, xhr) {
  $("#editor").html($(data).find("#editor").html());
});

Some time ago jQuery had function called "live". It worked like "on" but tracked the DOM changings. But in current version of jQuery this function is deprecated cause it was slow.

Hope you understand my bad English =)

Answer 3

The way I've gotten this to work is to use the built in Rails functionality for this:

1. In your controller's edit action, add to the respond_to block the line format.js. This allows you to create an edit.js.erb file that you can use to load the edit form into your DOM.
2. Then in your update action of the same controller, again add format.js to the respond_to block, and have an update.js.erb file that does the necessary DOM manipulation via jQuery.

I'm sure this is explained further in tutorials online, but where I finally understood how it worked without having to call jquery ajax methods was at CodeSchool.com.

Answer 4

I had an issue similar to this one whereby a form that was loaded in via ajax was not being submitted, this was due to Turbolinks and I found the solution was to bind my event to the body and not the element, relevant answers are found in this thread:

How to use $(document).on("click.. on <a tag?

For me the problem was on clicking a label, so I had to change

$('label').click(function...

to

$('body').on('click', 'label', function

Answer 5

I had the same issue and finally understood the reason. Your html source must be formed of as follows.

<tr>
  <form>
    <td><input type="text"></td>
    <td><input type="submit"></td>
  </form>
</tr>

It seems some browsers including Chrome and Firefox cannot handle such nested tags correctly.

I could successfully submit rerendered forms after replacing table/tr/td tags with other ones like ul/li.