2013年8月27日 星期二

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

<p class="accent">
<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is IE 6<br />
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is IE 7<br />
<![endif]-->
<!--[if IE 8]>
According to the conditional comment this is IE 8<br />
<![endif]-->
<!--[if IE 9]>
According to the conditional comment this is IE 9<br />
<![endif]-->
<!--[if gte IE 8]>
According to the conditional comment this is IE 8 or higher<br />
<![endif]-->
<!--[if lt IE 9]>
According to the conditional comment this is IE lower than 9<br />
<![endif]-->
<!--[if lte IE 7]>
According to the conditional comment this is IE lower or equal to 7<br />
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is IE greater than 6<br />
<![endif]-->
<!--[if !IE]> -->
According to the conditional comment this is not IE<br />
<!-- <![endif]-->
</p>

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
&#8203; 在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月23日 星期五

全球時間

http://www.worldtimeserver.com/current_time_in_TW.aspx
左邊點台灣會顯示台灣的時間 - Standard Time +0800 UTC

原本要開VM進linux查的,發現VM開不了,出現以下錯誤:
VMware Player Error while powering on: The VMware Authorization Service is not running.

解法:
http://writecodepeople.blogspot.tw/2012/08/vmware-player-error-while-powering-on.html
開始->搜索"服務"
將 VMware Authorization Service 啟動即可

2013年8月12日 星期一

使用float (right)使得另一邊(left)的內容自動依對邊(right)內容長度而調整

特別銘謝:Rei指導

以下方法Firefox 測試OK

<style type="text/css">
#A { float: right; } /* 右邊那塊 */
#B { width: auto; } /* 左邊那塊,裡面不能有clear:both;,其中的float全改為display:inline-block; */
/* 這樣左邊那塊內容會自動依右邊那塊長度而換行 */
</style>
<div>
<div id="A">This is A</div>
<div id="B">test test test test test test ...</div>
</div>

在float:left; 改 display: inline-block;後,tag之間的換行會變成空白
因為IE7不吃inline-block,所以還是照舊的方法,固定寬度比較好。
老天尊: 我發現改display:inline-block, 當初換行的縮排換變多一個空白 @_@
Rei: 對啊
Rei: inline-block的話
Rei: 標籤跟標籤中間不能空格或換行
老天尊: 冏rz
Rei: <div class="a">a</div>
<div class="b">b</div>
Rei: 這樣中間會空格
Rei: 但是
<div class="a">a</div><div
class="b">b</div>
這樣不會
Rei: 所以我都會寫成
<div
    class="a">a</div><div
    class="b">b</div>
老天尊: 其實可以換行... 你塞註解進去
<div class="a">a</div><!--
 --><div class="b">b</div>
老天尊: 喔喔 酷!
Rei: 嗯 那也是一個方式

使用樣板語言時,前後都要加註解
[if xxx]
     <div>A</div><!--
-->[endif]<!--
--><div>B</div>
OR
<div>A</div><!--
 -->[if xxx]<!--
   --><div>
        B
      </div>
    [endif]

ssh dev12 'free -m'

http://blog.jsdan.com/2504?doing_wp_cron=1376277627.2986490726470947265625
目前記憶體使用了多少
$ free -m

查某台機器目前記憶體使用了多少
$ ssh dev12 'free -m'

2013年8月8日 星期四

使用”马克鳗”作圖量距離

因為要做圖和別人討論layout排版距離時,朋友推薦用這套軟體

http://www.getmarkman.com/
下載時會自動安裝adobe air ( 如果電腦沒裝會自動裝 )
目前看起來是免費的
畫線後可以點右鍵選顏色


2013年8月2日 星期五

find 用法

http://blog.miniasp.com/post/2010/08/27/Linux-find-command-tips-and-notice.aspx
find ./ -iname *match* #查檔名,大小寫忽略
find ./ -maxdepth 1 -iname 'cgi' -type d  # 查深度為1的資料夾


查某個資料夾(當該路徑下有很多資料夾時)
http://stackoverflow.com/questions/4923834/how-to-ls-only-one-level-deep
方法1:
$ ls -d H2* -l
方法2:
$ ls -l | grep H2*

刪除專案下所有*.log檔案
http://unix.stackexchange.com/questions/116389/recursively-delete-all-files-with-a-given-extension
$ find ./ -iname *.log -type f -delete
再查一次,發現log檔都被刪除了
$ find ./ -iname *.log