19

RailsUJSを使用しています。次のようにリモート送信を行うためのフォーム設定があります。

<form accept-charset="UTF-8" action="/subscriptions" class="new_subscription form-horizontal" id="new_subscription" data-remote="true" data-type="json" method="POST">

JavaScript関数からこのフォームを送信する方法を見つけようとしています。私はもう試した：

var form$ = $("#new_subscription");
form$.get(0).submit();

ただし、これに伴う問題は、リモートなしでフォームを送信し、サーバーに投稿してページを更新することです。それがなぜなのか、何か考えはありますか？リモートフォームを送信する別の方法はありますか？

ありがとう

4

3 に答える 3

42

おそらくjquery-ujs(Rails 5.0 のデフォルト以下) を使用している場合、Mikhail が既に回答したように、カスタム jquery イベントのトリガーが機能します。

$("#new_subscription").trigger("submit.rails");

2017 年にこの質問に出くわし、Rails 5.1 を使用している人にとっては、答えは異なるでしょう。Rails 5.1 はjquery依存関係がなくなったためjquery-ujs、完全に書き直されrails-ujsた . 参照: http://weblog.rubyonrails.org/2017/4/27/Rails-5-1-final/

そのため、rails-ujs で適切なCustomEvent オブジェクトをトリガーする必要があります。

現時点では、ドキュメンテーション (RailsGuides とも呼ばれます) でそれを行うための公開された方法や推奨される方法はありませんが、Rails のソース コードを見るだけで使用できるいくつかのオプションがあります。

  1. 使用Rails.fire機能:

    nativeFormEl = $("#new_subscription")[0] // you need the native DOM element
Rails.fire(nativeFormEl, 'submit')

  2. プログラムでRails.handleRemoteハンドラーを呼び出すこともできます (実際にdata-remote=trueXHR 経由でフォームを送信するハンドラー:

    nativeFormEl = $("#new_subscription")[0] // you need the native DOM element
Rails.handleRemote.call(nativeFormEl, event); // unfortunately, you cannot reference the previously created submit CustomEvent object by rails-ujs.js
//  ... or ...
Rails.handleRemote.call(nativeFormEl) // submits via XHR successfully, but throws an error after success callback at Rails.stopPropagation

私はオプション 1 を好みます。それは、最近の Web API メソッドを使用する単なるラッパーであるためです。つまり、 を作成してviaCustomEventにディスパッチします。EventTargetdispatchEvent

于 2017-07-10T01:36:31.967 に答える
15

submit.railsイベントをトリガーしてみてください：

$("#new_subscription").trigger("submit.rails");
于 2012-10-02T06:11:06.130 に答える
-1

自分で Ajax リクエストを実行してみてください。

$('#new_suscription').submit(function(){
  /*do whatever you want here*/
  $.post('/subscriptions',$(this).serialize(),function(){},'script');
}

このようにして、フォーム データを使用して POST 要求を実行し、応答をスクリプトとして実行します。

于 2012-10-14T23:43:52.377 に答える