テスト：jQuery.ajaxでモジュール読み込み

ウェブページのサイドバーの部分でAjaxなる読み込みをjQuery.ajax()関数を利用するというのをやってみました。

テンプレートのある部分をモジュール化させる方法はいくつかあるわけですが、jQuery+Ajaxで読み込むという方法もありましたのでやってみることにします。

とりあえず、新規エントリとかをサイドバーに読みこませる、みたいなものを想定してやるとします。

まずはjQuery.ajax()という関数を使います。モジュールを読み込むには、

$.ajax({
  url: "test.html",
  cache: false,
  success: function(html){
    $("#results").append(html);
  }
});

のような形になります。(上記コードはjQuery.ajax(options) - jQuery 日本語リファレンスより抜粋させていただきました)

これをプラグイン化しますと以下に。なお、掲載コードはURLについて階層がフラットな状態でテストしたときのままとなっております。

(function() {  
       jQuery.fn.modules = function(config){
               config = jQuery.extend({
                        // デフォルトURL（引数省略のとき読み込むファイル）
                               url: "entries.html",
                       },config);

               var target = this;
               jQuery.ajax({
                      url: config.url,
                      cache: false,
                      success: function(html){
                               target.append(html);
                      }
                      });
}
})(jQuery);

プラグイン化の元ネタは、jQuery のプラグインを作成する : ブログの新着記事を表示：Goodpicにあるとおりなのでそちらを参照されたほうがわかりやすいとおもいます。

これをここではajax_modules.jsというファイル名で保存しておきます。

実際に読み込んで使うようなのは以下です。

<!DOCTYPE html>
<html lang="ja">
<head>
<script src="jquery.js"></script>
<script src="ajax_modules.js"></script>
<script> 
$(document).ready(function(){
  $("#entries").modules({url: "entries.html" });
  $("#category").modules({url: "category.html" });
});
</script>
</head>
<body>
<div id="entries"></div>
<div id="category"></div>
</body></html>

jQuery本体はいつものように先に読み込ませます。次に先のプラグイン化したファイルを読み込みます。

entriesというIDにモジュールを取り込みたいときは以下のように記述します。示したコードはサンプルにつき、流し込み先の要素を用意しましたが、$(element)にappendすることになってますので、既存の要素に追加する形でモジュール表示させることもできるでしょう。

$("#entries").modules({url: "entries.html" });

.modulesは先のajax_modules.jsのjQuery.fnの次に書いたものです（任意）。

テスト：jQuery.ajaxでモジュール読み込み

Comments: