Rails JavaScriptを使用したリモートフォームを送信する
私のRailsアプリには、たとえば次のようなリモートフォームがあります。
<%= form_tag some_path, :method => :get, :id => 'my-form', :remote => true do %>
<%= text_field_tag :search, params[:search], :id => 'search-field' %>
<%= submit_tag 'Go' %>
<% end %>
今、私はこのフォームをJavaScript経由で送信し、すべてのRailsリモートフォームコールバックをトリガーします。これまでにいくつかのことを試しましたが、何も機能していないようです。
私が試したこと:
$('#my-form').trigger('onsubmit')
$.Rails.callFormSubmitBindings( $('#search-form') )
しかし、今のところ運はありません。何か案は?
.submit();を使用できます。
$("#my-form").submit();
Rails 5.1+、これは古いjquery-ujs
jQuery以外でRails-ujs
、上記の回答は機能しなくなり、常にHTML HTTPリクエストを介してフォームを送信します。これは、新しいRails submitイベントハンドラーをトリガーする方法です。
var elem = document.getElementById('myform') // or $('#myform')[0] with jQuery
Rails.fire(elem, 'submit');
(それを理解するのにどれくらい時間がかかったかはわかりません...)何らかの理由で、通常のイベントは委任されたイベントハンドラーに適切にバブルアップしません Railsによってアタッチされます Railsを使用して'新しい デリゲート関数 、jQueryによってトリガーされたとき。
これは単にRails wayにあります:
$("#myform").trigger('submit.Rails');
Rails_ujs
そして単に次のようにします:
Rails.fire(form, 'submit');
(form
はDOM要素です)
これは適切なRailsそれを行う方法のように感じます。
ここでソースを確認できます– https://github.com/Rails/rails/blob/master/actionview/app/assets/javascripts/Rails-ujs/utils/event.coffee#L34
コントローラからjsonを渡し、それをあなたのjsでキャプチャするのはどうですか?.
今、コントローラーのアクションは
respond_to do |format|
if some condition
format.json { render :json => {:success => true} }
format.html{ redirect_to some_path, :notice => "successfully created" }
else
...
end
end
そしてjsonをjsにキャプチャする
$('#my-form').bind 'ajax:success', (event,data) ->
if(data.success == true)
...
正確にあなたが探しているものではありませんが、これが何らかの助けとなることを願っています。
Rails 6.への回答を更新しています。
Rails 6でこの問題が発生している場合は、フォームビルダーにパラメーター「format::js」を追加するのを忘れている可能性があります。
<%= form_tag some_path, :method => :get, :id => 'my-form', :remote => true,
:format => :js do %>
<%= text_field_tag :search, params[:search], :id => 'search-field' %>
<%= submit_tag 'Go' %>
<% end %>
また、コントローラにformat.jsを含める必要があります。
def update
respond_to do |format|
if @model.update(user_params)
format.html { redirect_to @model, notice: 'Model was successfully updated.' }
format.json { render :show, status: :ok, location: @model }
format.js {
logger.debug "this will run in the update was ok."
}
else
format.html { render :edit }
format.json { render json: @model.errors, status: :unprocessable_entity }
format.js {
logger.debug "this will run in the update was not ok."
}
end
end
end
これで、JavaScriptから定期的にこのフォームへの送信を呼び出すことができます。
this.form.submit()
私はこれが古いトピックであることを知っていますが、しばらくの間これに苦労しており、最終的に解決策を見つけました。
_remote: true
_を含む_file_field
_のフォームがあり、ユーザーがファイルを追加するとすぐにフォームが自動的に送信されるようにしました。私はonchange: form.submit();
を試しましたが、フォームはHTMLとして送信されました。
私の解決策:JSで(非表示の)フォーム送信ボタンをクリックします。
_onchange: $("#submit-button").click();
_
@mltsyの回答は私にとって完璧に機能します。ただし、これにはRails-ujsの使用が必要であることを繰り返し述べたかった。私のような古いバージョンからアップグレードした場合でも、jqueryに依存するjquery_ujsを使用している可能性があります。コンソールにReferenceError: Can't find variable: Rails
が表示される場合は、application.jsをチェックして、Rails-ujsまたは@mltsyの素晴らしい答えが機能しないことを確認してください。回答の代わりにコメントを残したかったのですが、Stackからは許可されません。