老天尊的死期: javascript 操作XML失敗

西低-一似三伍二

目標：
將string_to_xml解出來的XML的某些node塞到新產生的的XML裡面去
然後再將新的XML透過XSLT轉成畫面

試過的方法：
xml 轉json ( 但是在 <![CDATA[ 包覆的內容無法正常轉出來 )
http://davidwalsh.name/convert-xml-json

json 轉 xml(沒有使用)
https://code.google.com/p/x2js/

產出的json格式string無法eval成object
http://goessner.net/download/prj/jsonxml/

IE無法使用innerHTML抓XML內容，新的node內容需要被重複使用無法用appendChild做
http://stackoverflow.com/questions/4630611/how-to-get-the-innerhtml-of-a-xml-document-ajax
http://stackoverflow.com/questions/6170911/does-innerhtml-work-with-xml-elements (IE不支援XMLSerializer)

只能移動node，無法複製node
http://stackoverflow.com/questions/954725/copying-one-dom-xml-node-to-another-in-javascript
http://stackoverflow.com/questions/3066427/copy-all-childnodes-to-an-other-element-in-javascript-native-way

This is more of a guess as I don't know offhand what .parseXml does but IE needs createElement for unknown node names. Can you try document.createElement('BadBrowsers') for every new node you are going to manipulate? - IE只能用createElement新增XML的node
http://stackoverflow.com/questions/5073953/can-ie-manipulate-xml-using-jquery

IE $(newNode).appendTo($xml.find("node2")); 和 $xml.find("node2").get(0).appendChild(newNode); 都跑不動
http://forum.jquery.com/topic/jquery-1-6-1-add-a-new-node-in-xml-16-6-2011

w3school的方法(各瀏覽器相容)
http://www.w3schools.com/dom/dom_nodes_add.asp
http://www.w3schools.com/dom/dom_nodes_create.asp.
http://www.w3schools.com/dom/dom_nodes_clone.asp - 複製同一個XML的node，需求為複製不同XML的node

除錯注意事項：
1. 在用append時要先用clone複製出node，不然append後該node會消失
2. XML要這樣寫才能在firebug(IE不行)觀察結構 xml.documentElement，對該XML操作新增節點後，有時候要再觀察其他XML再切回來，原XML修改後的結果才會出現

瓶頸：
IE不支援我js生成的XML

解法：
最後全解成html再用jquery做
my_dom = $("#content").clone()
$("#content").html('')
for (var i = 0; i < 5; i ++){
$("#content").append(my_dom.find(".cell:eq("+i+")").clone());
}`

插曲：
在測IE7時發現IE7不支援display: inline-block
http://stackoverflow.com/questions/6544852/ie7-does-not-understand-display-inline-block

The IE7 display: inline-block; hack is as follows:(未測試)

display: inline-block;
*display: inline;
zoom: 1;

可使用 Conditional comments解
http://www.quirksmode.org/css/condcom.html












According to the conditional comment this is not IE 



http://stackoverflow.com/questions/9892616/jquery-switching-application-from-live-to-on-method/9892671#9892671
http://blog.timc.idv.tw/posts/deprecation-of-jquery-live-function/
使用下面語法做到jquery 的live效果( jquery live在新版底層是用on做 )

// 舊
$('#myid').bind(event, fn);
// 新 (改名字就好)
$('#myid').on(event, fn);

// 舊
$('#not_in_dom_yet').live(event, fn)
// 新
$(document).on(event, '#not_in_dom_yet', fn);

1. live() 的原理是把事件綁在上層的元素，事件 bubble 上去之後再去檢查從下面上來的事件是不是符合之前設定的 selector。這個原理在 on()（或是 delegate()）才會被暴露出來（有發現那個 document 嗎？）。如果只寫 live() 的話等於是不求甚解的用法，最明顯的問題是無法掌握事件觸發的順序，常常在 bind() 裡面有用的 ev.stopPropagation() 改成 live() 就沒用了。
2. live() 把事件掛在 document，雖然比每個元素都 bind() 有效率，但是還是要過濾很多傳上來的無關事件。用 delegate() 或是 on() 才能指定要把事件 bind 在哪裡。
3. live() 的語法不合邏輯。一個用 $('#not_in_dom_yet') 選元素的 jQuery 物件，裡面明明就沒有 DOM 元素，那照理說後面接上的方法都不應該做任何事情。結果 live() 反而是這樣運作的。

http://www.fileformat.info/info/unicode/char/200b/index.htm
 在unicode中是空的字元 'ZERO WIDTH SPACE'

在FF中，使用
var xml = "<response></response>";
var $xml = $j($j.parseXML(xml));
產生出來的XML可以用 $xml[0] 去抓真實的XML DOM，使用$xml[0].documentElement 在firebug中觀察

直接在console上重寫
self.xxx_template = string_to_xml('xslt_str'); 的內容，而不用重新publish

使用perl將xml和xslt(去讀取放在主機上xslt格式的檔案)產生html
http://search.cpan.org/~shlomif/XML-LibXSLT-1.81/LibXSLT.pm

老天尊的死期

2013年8月27日星期二

javascript 操作XML失敗

沒有留言:

張貼留言

著作人

2013年8月27日 星期二

javascript 操作XML失敗

沒有留言:

張貼留言

2013年8月27日星期二