3

Rails 4、Turbolinks、およびリモートフォームを使用すると、奇妙な問題が発生します。次のようなフォームがあります。

<%= form_for [object], remote: true do |f| %>                                                   
    <td><%= f.text_field :name, class: 'form-control' %></td>                                     
    <td><%= f.email_field :email, class: 'form-control' %></td>                                   
    <td><%= f.submit button_name, class: 'btn btn-sm btn-primary' %></td>
<% end %>

このフォームは、新しいオブジェクトを追加 (作成) します。ただし、常に機能するとは限りません。

  • URLまたは更新を使用してページを直接ロードすると; できます
  • アプリからこのページに移動すると; それは失敗します

このリンクのターボリンクを無効にすると、ページは完全に機能しました。

2 つの質問があります。

  1. なぜこれが機能しないのですか？これは、JQuery/Turbolinks の問題により、リモート ハンドラーがボタンにアタッチされていないためですか?
  2. この問題を回避するにはどうすればよいですか?

前もって感謝します。

解決

@rich-peck のおかげで、解決策は、ボタンをクリックしたときにフォームを手動で送信する JavaScript を追加することでした。

<%= javascript_tag do %>
  var id = "#<%= dom_id(f.object) %>";
  var inputs = $(id).parent().find('input');
  console.log(inputs);
  $(id).parent().find('button').on('click', function(e) {
    e.preventDefault();
    $(id).append(inputs.clone());
    $(id).submit();
  });
<% end %>

このコードはフォーム テーブルの行に JavaScript を追加し、入力を取得して ID に追加し、フォームを送信します。preventDefault(); ページが更新され、フォームが実際に機能するときに、クエリが 2 回送信されるのを防ぎます。

4

2 に答える 2

4

ターボリンクはページを完全にリロードするのではなく、ページの一部のみをリロードします。これが非常に高速な理由ですが、ページ全体のリロードが必要な JavaScript を使用している場合、問題が発生します。更新で機能する理由は、ページを強制的に完全に再読み込みするためです。

編集: この宝石は試してみる価値があるかもしれません: https://github.com/kossnocorp/jquery.turbolinks

ターボリンクの内部動作に関する追加情報については、http://guides.rubyonrails.org/working_with_javascript_in_rails.html#turbolinks を参照してください。

または: https://github.com/rails/turbolinks

Ps また、javascript_include_tag が head タグ内にあることを確認してください (body 内ではありません)。

于 2014-03-09T12:44:48.180 に答える