ひさびさにAjaxネタです。
また仕事での苦労話なんですが、現在進行中(もうすぐ公開)のプロジェクトでAjaxを導入していて、AdobeのSpryを使っています。
で、Master Region と Detail Region の関係を使って、ボタンを押すと詳細データが切り替わるという仕様になっていたのですが、切り替えると一部の画像が表示されなくなるという問題が発生しました。
その画像が表示切替ボタンだったもんだから大問題！
やれやれ、です。
問題が起こる条件があって、ブラウザはIE6で、別ウィンドウを開いた後で切替動作を行うと、画像が消える。
という、なぜに別ウィンドウが関係するんだ？というような条件でした。
この現象が起こっているときに「ieHTTPHeaders」でヘッダー情報を確認してみると、更新すべきXMLファイルのほかに、更新されるエリアの画像までサーバーに取りに行っていることがわかりました。
これはIE7でも同じです。
IEとSpryの組み合わせ特有の問題のようです。
Firefoxではそんなこと起こらないし。
サーバーからの画像要求の返答と、Ajaxの表示切替のタイミングによって画像が表示されたりされなかったりしているらしい、ということまではこれでわかりました。
根本的に画像をサーバーに取りに行かせないようにできれば一番良いのですが、これはSpryの不具合っぽいので無理！
仕方ないので、対症療法的に表示タイミングをずらせることで対処することにしました。
ちなみにこのボタン、ステイ表示をさせるためにSpryとは別のところでスクリプトを組んで画像を切り替えています。
その画像表示のタイミング、Spryのほうで表示のアップデートが終わってから、ボタンのステイ表示を切り替える順番にするには、アップデート完了のイベントが必要です。
調べてみたらありがたいことにありました。
Adobeのドキュメントの目次で言うと、「Region Observer Notifications 」です。
サンプルコードはこんな感じ。
<script>
myObserver = new Object;
myObserver.onPostUpdate = function(notifier, data)
{
alert("onPostUpdate called for " + data.regionID);
};
Spry.Data.Region.addObserver("employeeListRegion", myObserver);
</script>
アップデート完了のほかには、
onLoadingData ： ローディング中
onPreUpdate ： アップデート開始
onError ： ロード失敗
がキャッチできるみたいです。
これで、問題はほぼ解決。
ほぼ、というのはそれでも稀に現象が起こってしまうから。
う～、完全解決は難しそうです。
