CakePHP + jQuery Mobileでの注意点
リンクとフォーム送信後のページ遷移にAjaxを使わない
やるべきこと
下記のように、jQueryライブラリを読み込んだ後、jQuery Mobileを読み込む前に、初期値を設定すべし。
<script src="jquery.js"></script>
<script>
$(document).bind("mobileinit", function(){
$.mobile.ajaxEnabled = false;
});
</script>
<script src="jquery.mobile.js"></script>
その理由
【引用】ページ遷移 - jQuery Mobile 1.0b1 日本語リファレンス
デフォルトでは、外部ページへのリンクがクリックされると、フレームワークはリンクを自前でパースし、遷移先をAjaxリクエスト(Hijax)で取得し、ロード中アイコンを表示します。
http://dev.screw-axis.com/doc/jquery_mobile/components/pages_dialogs/anatomy_page/
これには困りました。
一度Ajaxでページを取得する、という処理が影響しているのかどうなのか、
とにかく、ただのリンクでは『CakePHP + jQuery Mobile』で作った
他のページをリンクで開くことができません。
まあ、Ajaxでページを読み込んでおく、という処理をさせなければ防げます。
【引用】Ajaxとハッシュ、履歴 - jQuery Mobile 1.0b1 日本語リファレンス
次のような場合は、Ajaxを用いず通常のHTTPリクエストが行われます。まず、リンクが異なるサイトへのリンクである場合。次に、リンクに次のような属性を指定した場合です。rel=external
target (値が、たとえば “_blank” など何であれ)
http://dev.screw-axis.com/doc/jquery_mobile/components/pages_dialogs/ajax_hashes_history/
【引用】フォームのサブミット - jQuery Mobile 1.0b1 日本語リファレンス
自動的に Ajax でサブミットが行われないようにするには、フォーム要素に data-ajax=“false” 属性を指定します。また 初期値設定 で ajaxFormsEnable を disable に設定することで、完全にハンドリングを止めることが出来ます。
http://dev.screw-axis.com/doc/jquery_mobile/components/forms/submit/
これらは、最初に挙げたスクリプトのように、初期値として
Ajax処理を行わないように設定しておくことができます。
【参考】初期値設定 - jQuery Mobile 1.0b1 日本語リファレンス
http://dev.screw-axis.com/doc/jquery_mobile/api/configuring_defaults/