フォームのサブミット

Ajaxでのsubmit

jQuery Mobileにおいて、フォームの submit は自動的に Ajax で行われ、フォームから結果のページへスムーズに切り替えられえます。確実に submit が行われるために、フォーム要素には action と method を明確に指定するようにしてください。指定が無い場合 method は get に、 action は現在のページへの相対パス( $.mobile.path.get() によって取得されるもの )になります。

また、フォームはアンカー同様に data-transition=“pop” や data-direction=“reverse” のように切り替え効果を指定することが出来ます。このようなAjaxによる切り替えを止めるには、全体のAjaxフォームハンドリング設定を disable に設定するか、フォーム毎に data-ajax=“false” を指定します。また target 属性( 例えば target=”_blank” のような )も、フォーム上で扱えます。アンカーと異なり、フォームには rel 属性は使えないことに注意してください。

Ajaxフォームのサンプル

このデモは、Ajaxによる自動的なサブミット処理を見るためのものです。下にあるフォームは forms-sample-response.php に対して通常の get リクエストを送ります。サブミット時に、jQuery Mobileはサブミット先のURLがAjax通信可能なものであるかを確認し、適切に処理を行います。レスポンスが正しく返ってくればURLハッシュも更新されるため、一般的な get によるHTTPフォームによるサブミット時同様に、ブックマーク可能なURLに更新されます。そして、やはり一般的なフォームサブミット同様に post によるリクエストはクエリパラメータがURLに含まれず、ブックマークできなくなります。

非Ajaxフォームのサンプル

このようなAjaxによるサブミット制御を行いたく無い場合は data-ajax=“false” 属性を form 要素に設定してください。あるいは、グローバル設定の ajaxEnabled を設定することでもAjaxによる制御を設定できます。

次のフォームは先程のものとほぼ同じですが data-ajax=“false” 属性を追加してあります。サブミットボタンが押されると、ページ全体がリフレッシュします。

自分自身にサブミットするフォーム

通常のHTML同様に、現在表示しているページと同一のURLを action 属性に指定することで、自分自身にサブミットすることも出来ます。こちらの デモ で確認してください。

既にDOM上にあるページに対して post リクエストが行われた場合(同一URLに対してサブミットを行うのは、よくあることです)、クエリパラメータがURLに付かないため既にあるページだと見なされてしまいます。この場合jQuery Mobileは、サブミットしたページの内容を戻ってきたものと置き換えます。