Query ライブラリーの中に.load()というmethodがあり、これを使うと、WEBページの一部に他のページをはめ込む、ということが簡単にできる。 たとえばmain.html というページがあり、 そこに<div id=”sections”></div> というセクションをつくっておき、 この部分にcontent1.htmlというページを差し込むためには
$(‘#sections’).load(‘content1.html’);
というjavascript 一行で済む。
これを使えば、content2.html, content3.html などというページを用意しておいて、Javascriptを使ってインターアクティブに（ページを全部ロードしなおすのではなく）ページの一部だけを差し替えることができるようになるわけだ。
これって、巷にいうAjaxだが、jQuery のAjax サポートは ajaxSetup というobjectががあって、この中で、Ajax関係の諸パラメーターを前もって設定することが可能、 で、とりあえず
$.ajaxSetup({
beforeSend: function() {
$(‘#sections’).css(‘visibility’,’hidden’);
$(‘#aContainer’).css(‘background’, ‘url(images/ajax-loader.gif) no-repeat center’);
},
complete:
$(‘#aContainer’).css(‘background’,’none’);
}
});
とやって、 ページをロードしたときに、前のページの表示を消し、バックグランドにロード中お待ちくださいのイメージをはっておき、ロードし終わったときに、これを取り除く、という 動作を付け加えた。
ところが実際に動かしてみると、ロードが完了して新しいページが表示された後でもイメージが消えない。 ブラウザの開発ツールで見ると、スタイルシート上、バックグランドイメージがそのまま残っている。つまり、complete: の部分が動いていない。
これで2時間ほどハマったわけだが、 結論からかいてしまう。
実は.load()というコマンドにはコールバック機能があり、 これを使って、ロードされた画面の初期化を行うためのjavascriptを指定していた($(‘#sections’).load(‘content1.html’,’doSomething’)) のだが、これがcomplete: に指定された処理を無効化してしまうようである。 jQueryの.load と complete: の部分のマニュアルをじっくり読んでそういう結論に達した。
というわけで、Complete: event ではなく Success:event に動作をぶら下げて解決。.load()ではなく、.get()を使うとすっきりしそうだが、詳しく調べてないのでこれでよしとする。
jQuery.ajaxSetup({
beforeSend: function() {
$(‘#sections’).css(‘visibility’,’hidden’);
$(‘#aContainer’).css(‘background’, ‘url(images/ajax-loader.gif) no-repeat center’);
},
success:
$(‘#aContainer’).css(‘background’,’none’);
}
});
$ajax を使うと、もっときめ細かいAjax操作ができるそうだが、現状ではこれで十分。
一応動いている証拠は ここに
http://shogishack.net/modx/pages/assess-the-situation/exchanging-pieces/
ModX/WayFinderで作ったメニュのa href部分をjqueryで一括加工し、それぞれのアイテムをクリックすると、Jumpではなく、.loadが呼び出されるようになっている。
ModXと jQuery を使ったAjax, なかなか相性がよさそうである。