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>


その理由

デフォルトでは、外部ページへのリンクがクリックされると、フレームワークはリンクを自前でパースし、遷移先をAjaxリクエスト(Hijax)で取得し、ロード中アイコンを表示します。
【引用】ページ遷移 - jQuery Mobile 1.0b1 日本語リファレンス
http://dev.screw-axis.com/doc/jquery_mobile/components/pages_dialogs/anatomy_page/


これには困りました。
一度Ajaxでページを取得する、という処理が影響しているのかどうなのか、
とにかく、ただのリンクでは『CakePHP + jQuery Mobile』で作った
他のページをリンクで開くことができません。
まあ、Ajaxでページを読み込んでおく、という処理をさせなければ防げます。


次のような場合は、Ajaxを用いず通常のHTTPリクエストが行われます。まず、リンクが異なるサイトへのリンクである場合。次に、リンクに次のような属性を指定した場合です。

rel=external
target (値が、たとえば “_blank” など何であれ)

【引用】Ajaxとハッシュ、履歴 - jQuery Mobile 1.0b1 日本語リファレンス
http://dev.screw-axis.com/doc/jquery_mobile/components/pages_dialogs/ajax_hashes_history/



自動的に Ajax でサブミットが行われないようにするには、フォーム要素に data-ajax=“false” 属性を指定します。また 初期値設定 で ajaxFormsEnable を disable に設定することで、完全にハンドリングを止めることが出来ます。
【引用】フォームのサブミット - jQuery Mobile 1.0b1 日本語リファレンス
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/