Nacky - Snowland.net

Nacky(Issei Ishii)がDJ/Composerのようなふりして書き散らすblogサイト

Info

Nacky - Snowland.net - blogを移転しました

2007-01-05

IEでAjax.Updaterが動かない

prototype.jsを使って,select要素にAjax.Updaterでoptionだけ吐くプログラムからの出力を反映させたいのだが,firefoxでは動くけどIE6/7で動かない.

BUG: Internet Explorer は、オブジェクト選択の innerHTML プロパティを設定するのに失敗します。
(ひどい翻訳だが)

prototype.jsのElement.updateでも同じ.

html上に
<select id="hoge"></select>
としておいて

javascriptで
Element.update('hoge','<option value="1">one</option>');
としても,IEはselectやtextareaに対してinnerHTMLが利かない.

はまろぐ - prototype.jsの話
textareaに関しては$('hoge').valueが対象になるので上記の通りの対応でOK(これはfirefoxも同じ).
しかしselect要素に対しては何が該当するのか…?


最初に挙げたMicrosoftのサイトには3つの解決策が上がっているのでどれかを使えば良いのだが,既にoptionだけを吐き出すプログラムは存在しているのでそちらをいじりたくない.
というわけで,更新前のid=hogeエレメントの属性を取得した後,outerHTML(これはfirefoxが非対応っぽい)を使ってselectごと更新してしまおうということにした.

if($(element).tagName.toLowerCase()=='textarea'){
  element.value = html.stripScripts();
}else if($(element).tagName.toLowerCase()=='select'){
  var attrs=['name','size','id','multiple','onFocus','onBlur','onChange'];
  var attrstr='';
  for(i=0; i<attrs.length; i++){
    var val=$(element).getAttribute(attrs[i]);
    if(val=='null' || val=='' || val=='false' || val==null || val==false) continue;
    if(typeof val=='function'){
      val=val.toString();
      val=val.substring(val.indexOf('{')+1,val.lastIndexOf('}')-1);
    }
    attrstr+=' '+attrs[i]+'="'+val+'"';
  }
  $(element).outerHTML = '<select'+attrstr+'>'+html.stripScripts()+'</select>';
}else{
  element.innerHTML = html.stripScripts();
}
#書式・作法的にアレなのは勘弁
#prototype1.5.0_rc1ではIE用のElement.updateが別になっているのでIE判別処理は不要でした

firefoxはattributesで,あらかじめhtmlで指定された属性しか返さないのだが,IEは内部で使用しているものも含めて130以上の属性を返して来た上に,onChange等の内容は1段 function anonymous(){ (本来の指定内容) } を追加して返してくれるので,そういうのを処理している.
また,selectで通常使うだろうなーと思った物だけリストアップした.足りなかったら追加すれば動くはず.styleとかdisabledとか.

これで一応,select要素の中身をupdateで更新できるようになりましたとさ.
posted at 17:36:20 on 2007-01-05 by nacky - Category: Com/Tech

ソニーストア

TrackBack

このエントリにトラックバックはありません
トラックバックURL

Comments

はまあ wrote:

prototype.js使ってるならサーバ側をjsonで返すようにすれば、そこまで悩まないでいいような。

いずれにしろoptionとテーブル系のタグをIEでAjax.Updaterで呼ぶは鬼門w
2007-01-10 13:07:59