web-dev-qa-db-ja.com

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') )

しかし、今のところ運はありません。何か案は？

jqueryruby-on-railsunobtrusive-javascript
26
Matthew

.submit（）;を使用できます。

$("#my-form").submit();
1
andrewpthorp

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によってトリガーされたとき。

68
mltsy

これは単にRails wayにあります：

 $("#myform").trigger('submit.Rails');
67
Gopal S Rathore

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

10
Mladen Ilić

コントローラから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)
    ...

正確にあなたが探しているものではありませんが、これが何らかの助けとなることを願っています。

3
prasvin

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()
1
mentatkgs

私はこれが古いトピックであることを知っていますが、しばらくの間これに苦労しており、最終的に解決策を見つけました。

_remote: true_を含む_file_field_のフォームがあり、ユーザーがファイルを追加するとすぐにフォームが自動的に送信されるようにしました。私はonchange: form.submit();を試しましたが、フォームはHTMLとして送信されました。

私の解決策：JSで（非表示の）フォーム送信ボタンをクリックします。

_onchange: $("#submit-button").click();
_
1
Jonas

@mltsyの回答は私にとって完璧に機能します。ただし、これにはRails-ujsの使用が必要であることを繰り返し述べたかった。私のような古いバージョンからアップグレードした場合でも、jqueryに依存するjquery_ujsを使用している可能性があります。コンソールにReferenceError: Can't find variable: Railsが表示される場合は、application.jsをチェックして、Rails-ujsまたは@mltsyの素晴らしい答えが機能しないことを確認してください。回答の代わりにコメントを残したかったのですが、Stackからは許可されません。

1
James Hong