ajaxで通信中はユーザーにわかりにくいのでloadingアイコンでも表示させようと思った。
prototypeのElement.showとhideを使えば楽勝じゃんって思っていたのにちょっとハマったのでメモ。
初期は非表示で通信中だけ表示ってやりたかったのさ。
スタイルで
#icn-loading{display:none;}
HTMLで
<img id=”icn-loading” src=”/images/loading.gif” alt=”保存中…” />
showとhideメソッドはどうやらタグに直接利くようなのでスタイルシートで定義してあるとこれは維持されたままらしい。
なので
<img id=”icn-loading” src=”/images/loading.gif” alt=”保存中…” style=”display: none;” />
が正しいようです。
Ajax.Requestを使った例
new Ajax.Request( 'json.php', { methotd: 'post', parameters: params, onLoading : function(ev){ Element.show('icn-loading'); }, onSuccess: getResponse, onLoaded : function(ev){ Element.hide('icn-loading'); } } ); //通信成功時に処理 function getResponse(req,e) { }
