【バージョンによって書き方が変わる】jQuery Mobileでページ移動する際、デフォルトで実装されているAjaxのローディングのアニメーションを無効にする方法

jQuery

このブログのモバイルとタブレット表示でjQuery Mobileを使っていまして、ただいま勉強中なんですが、デフォルトの設定だとサイト内のリンクをクリックしたりして、ページ移動をする際にAjaxが使用されます。

それで、下のようなローディングのくるくる回るアニメーション（正式には、スピナーアニメーション：spinner animationって呼ばれているみたいです）がつきます。

こんな感じのくるくる回るアニメーション（※イメージです）

私はデフォルトでAjaxの使用を無効にしたかったので、初期化用の「mobileinit」イベントを使って無効にするんですが、jQuery Mobileのバージョンによって方法が変わることを知りました。

こちら「http://demos.jquerymobile.com/1.0a3/docs/api/globalconfig.html」によると、「ajaxLinksEnabled」は「ajaxFormsEnabled」とともに「deprecated（非推奨）」となっています。

以前（過去のバージョン）ではこう書いていました。※今は非推奨

<script type="text/javascript">
$(document).bind("mobileinit", function(){ 
 $.mobile.ajaxLinksEnabled = false; 
})
</script>

というわけで、現在では以下の書き方でAjaxを無効にできます。

現在のバージョンではこうする（2014/05/02時点の最新版1.4.2で動作確認済）

<script type="text/javascript">
$(document).bind("mobileinit", function(){
 $.mobile.ajaxEnabled = false;
});
</script>

「$.mobile.ajaxEnabled = false;」としてあげればOKです。ちなみにjQueryMoblieのスクリプト群を読み込む順番は、

  1. jQuery
  2. mobileinitイベント
  3. jQuery Mobile

の順に読み込むとうまくいきます。

例えばこんな感じで読み込む

//■jQuery読み込み
<script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.min.js'></script>
//■mobileinitイベント読み込み jsファイルを作って読み込んだりでももちろんOK
<script type='text/javascript'>
$(document).bind("mobileinit", function(){
 $.mobile.ajaxEnabled = false;
});
</script>
//■jQuery Mobile読み込み
<script type='text/javascript' src='//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js'></script>

私は導入当時ちょっと手間取りました。ドキュメントを読むとちゃんと書いてはあるんですけどね。。

まとめ

もし、これからjQuery Mobileでサイトを作ってみようと思われた方で「Ajaxを無効にしたいんだけど・・・なんだかうまくいかない」という場合は、使用しているjQuery Mobileのバージョンを確認してみましょう～。

著者:bouya Imamura