Uncaught ReferenceError: $ is not defined

I got a weird error when debugging my web page on Chrome. The Developer Tool shows a "Uncaught ReferenceError: $ is not defined". And the error is in getPageLang function.

I checked my code and grep on my whole project, I could't find  the codes in my project. It is very weird!

After hours study, I got the exception is from Skype extension of Chrome. If you disable the Skype extension, the error won't happen.

Great! It is not my problem!
And hope this can help you if you also encounter this ERROR!

Working with files in JavaScript

Worth to read!

Working with files in JavaScript
Part 1: The Basics
Part 2: FileReader
Part 3: Progress events and errors
Part 4: Object URLs
Part 5: Blobs

在HTML element要處理left-click與right-click

被指派一個任務，頁面上的一個元件，當right-click與left-click時，要有不同的反應，IE 8也要能兼容，且必須在mouse up時才觸發。
如果是mouse down就比較好處理，若mouse up，這個mouse event會bubble up，無法用stopPropagation()來停止，所以就不能直接bind在mouseup上了

最後用了幾個方法組合起來，來達成這個需求，HTML的tag如下，bind onclick來處理left-click；bind oncontextmenu來處理right-click：
<a href="#" onclick="return handler(event)" oncontextmenu="return handler(event)">CLICK</a>
JavaScript的function則如下
  function handler(e, id) {
    var clickType = 1; //1:left-click; 3:right-click
    if (e.which) {
      clickType = e.which;
    } else if (e.type) {  // for IE 8
      if (e.type=="click") {
        clickType = 1;
      } else if (e.type=="contextmenu") {
        clickType = 3;
      } else {
        clickType = e.button+10;
      }
    }
    alert("click type: "+clickType);
    return false;
  } 在Chrome 42, FireFox 37, Opera 28, IE 11/8上測試都OK

一個在Chrome裡不斷觸發onload的問題

昨天接獲回報，原來一個Chrome瀏覽正常的網頁(內含SVG)，不知為何在Chrome(35.0)中會一直閃爍。

看了一下，這閃爍是因為onload event一直被觸發，而且不僅是Chrome，連Opera(22.0)也有此狀況。這對難兄難弟同時發難，讓我想起了這則新聞 (Google將捨棄WebKit改用新的Blink瀏覽器引擎)，很有可能是Blink這個JavaScript engine的onload event handler行為與其他engine不同，造成onload一直被觸發。

修改就不在svg tag中加onload=""了，改用JavaScript的方式，在程式的最後加上
<script type="text/ecmascript">
 window.onload = function(evt) {
   load(evt); } 
</script>

寫網頁應用的朋友可以注意一下這個問題，看看你的應用在這兩個browsers會不會有問題。

加jQuery進使用MooTools的頁面

手邊有一些網頁用到了MooTools，不過為了一些需求，需要加進jQuery
看過一些網頁資料，MooTools與jQuery有某種程度的相沖
實際在使用時，jQuery不管加在MooTools前面或後面，原來使用MooTools的功能就出問題
後來經過一些嘗試，把下列這段加在MooTools之前
<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript">
var $j = jQuery.noConflict();
</script>

這樣$保留給原來MooTools用，而$j供jQuery使用

怪，IE8顯示的資料少了

今天遇到一件怪事，面對同樣的資料來源，IE8的呈現出來的資料筆數竟然與IE11, Firefox, Chrome不同

環境
這是個web-based的系統，browser以AJAX，透過XMLHttpRequest向server取得資料後，再以JavaScript呈現在頁面

問題
以現有的設定應該會顯示出3筆資料，在Firefox, Chrome與IE11都正確顯示，唯有IE8只顯示出一筆資料。

解決過程
用Chrome的development tool來看，responseText拿到的資料是
192.168.10.120/1/1##192.168.10.57/2/1##192.168.10.63/1/5
(我們是用"##"來做分隔號)
但在IE8中，responseText卻是
192.168.10.120/1/1## 
所以，問題就不是在javascript把資料呈現在頁面這段，而是資料來源了。而這就有點詭異了，因為在同一個時間點，這設定是不會變動的，IE8理應拿到的是跟其他browser相同的資料才對。難道IE8有問題？
直接用IE8連結資料源的網址，咦~~，拿到的資料是3筆呀。所以IE8從server拿的資料應該是正確的。那問題是在IE8的XMLHttpRequest把我的資料暗槓了嗎？應該不會才對，其他相同作法的頁面都沒事呀。

在百思不得其解時，突然想起用Wireshark來抓抓兩端間的封包看看，果然有了重大發現。server傳回來的responseText在Wireshark看到的是
192.168.10.120/1/1##\000192.168.10.57/2/1##\000192.168.10.63/1/5

在每個## (分隔號)的後面，都多了\000，也許就是因為這個，IE8的javascript engine解譯為octal null character，對null-terminated string來說，這就是字串的結束，所以把後面的都忽略了；而其他browser的javascript engine則是忽略掉這個null character，所以才有這樣的差別。

看來問題是在server-side的程式了。
查找了一下server程式，果然發現該程式(C language)在把分隔號##寫入response chunk，給的length竟然是3，難怪會多出那個null character。改正後就沒問題了。

結案！

FileDropJS 的 Java servier-side

最近要做drop file upload的系統，經過挑選，選擇了一個較light-weight的FileDrop (filedropjs.org)
不過它只有提供PHP server-side程式可參考，找了老半天，沒有看到Java的solution，於是只好自己來研究一下了
還好花一天的工就完成，在這裡做個記錄

protected void process(HttpServletRequest request, HttpServletResponse response) throws IOException {
PrintWriter writer = response.getWriter();
JSONObject obj = new JSONObject();

try {
saveRawDataToFile(request); // file upload by raw request

    obj.put(AbstractCommand.R_SUCCESS, true);
    obj.put(AbstractCommand.R_MSG, "upload completed");
} catch (IOException e) {
    obj.put(AbstractCommand.R_SUCCESS, false);
    obj.put(AbstractCommand.R_MSG, e.getMessage());
} finally {
    writer.println(obj.toString());
writer.flush();
}
}

protected void saveRawDataToFile(HttpServletRequest request) throws IOException {
String filename = request.getParameter("img") + ".png";
String outputFile = uploadPath + File.separator + filename;

InputStream in=request.getInputStream();
int size=request.getContentLength();

try {
OutputStream out=new FileOutputStream(outputFile);
byte[] chunk= new byte[size];
in.read(chunk);
out.write(chunk,0,size);
out.close();
} catch (Exception e) {
e.printStackTrace(System.out);
} finally {
in.close();
}
}