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.
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 =)
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...
The way I've gotten this to work is to use the built in Rails functionality for this:
- In your controller's edit action, add to the
respond_to
block the lineformat.js
. This allows you to create an edit.js.erb file that you can use to load the edit form into your DOM. - Then in your update action of the same controller, again add
format.js
to therespond_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.
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
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.
来源:https://stackoverflow.com/questions/16613939/rails-cannot-submit-a-remote-form-that-was-loaded-via-ajax