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

元气小坏坏 提交于 2019-12-05 05:52:28
Parandroid

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:

  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.

LpLrich

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.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!