Skip to content

フォーム送信をAjaxで実行&画面更新までできるApplicationController(その4)「同時送信」

by : 2017/05/31

引き続きApplicationControllerを使ったAjax処理の省力化について紹介します。今回はフォームの同時送信です。

HTMLでは基本的に一回のアクションで一つのフォームしか送信できません。しかしAjaxであれば並行処理を使って同時送信も可能です。ApplicationControllerではごく簡単に実装できます。

実装方法としては h5-refresh-group を指定します。この名前が同じであれば、同時に送信されるようになります。

JavaScriptは変わりません。特別な設定は不要です。

これだけでフォームを送信すると二つのフォームが同時に送信されるようになります。インジケータも二つ同時に回っているのが分かります。

実際のデモはこちらにて確認できます。サーバ送信部分はモックですが、サーバを立てた場合と同じです。

二つの要素を同時に更新したいという時に使えます。特に、フォーム内で同じnameであったとしても使えるのが利点と言えるでしょう(通常のHTMLで、一つのフォーム内に同じname指定があると上書きしてしまいます)。

From → hifive, HTML5

現在コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。