同事需要做一個下載 xls 的動作, 用 frames 切分成左選單, 右主頁內容, 在主頁內容用了 iframe 內坎在頁面來執行下載的動作, 但卻發生怪異的事, 在 IE(FF沒這個問題) 使用 iframe 的這個動作時, 卻會發生頁面上的 javascript 都失效了, 真怪. 找不到答案.

原因是 download.php 它的的 header 用了 application/octet-stream , 而造成這個結果. 我試著用各種不同的檔案直接下載, 是沒這個問題的. 像這樣 header(’Location: test.xls’);

較怪異的是, 如果它是獨立的單一個頁面, 就沒有這個問題, 但它剛好坎在 frames 裡面, 又用了 iframe. 問你要存檔後, 就出現後續要執行的 JavaScript 完全無法作用.

估且不管他的動作流程是否正確, 最後我延用它的 jQuery 裡, 把要寫入的 $(document).ready 之中, 再把要坎入的 iframe 寫到($(”xxx”).html(要寫入的 iframe內容))某個隱藏的 div id 裡即可. 我想像了一下, 就叫當 docment 都 ready 了, 再往下 go, 真沒想到卻解決了. 超級奇怪的問題.

最後, 我建議他可以考慮用 ajax 做下載處理, 一來它的動作有 respone , error, success 的相關狀態, 對於需要確認某些動作後才能往下走的網頁設計, 其實較為正確也方便. 不然, 利用視窗或是 iframe 的下載連結方式, 通常會有一些問題, 像是該做的還沒做完, 卻叫你開始做一個動作的混亂.

google 的瀏覽器 Chrome , 是低階電腦的好幫手.

我的 NB, CPU pentium M 1.1Ghz, ram 512MB, HD 40GB, 轉速 4200. winXP pro sp3.

以上硬體無法更改, 因為都被銲死了. 所以, 我試著使用不同的瀏覽器, 從原先的 Maxthon, 到 FF3.0, 然後到 Chrome, 嗯..Chrome 果然是最佳的選擇.

不過 Chrome 有些功能還很陽春, 我希望它有像 Maxthon 的快速手指軌跡功能, 或其它, 這樣就更棒了, 但怕的是功能一多之後, 效率就變差了.

Jeditable 真是一個好物啊.

在號稱 web2.0 的年代裡, Ajax 的處理方式應該是大家所熟悉的方式. 以前, 程式設計師只要把參數丟往下一頁承接的程式, 再依參數做不同的顯示, 這種做法相當容易. 簡單來說, 這樣看網頁的形式有點像在翻書, 一頁一頁翻.

但在 web2.0 的年代裡, 呈現的方式不同了, 直接透過 ajax 在背景處理, 然後再加上一點點的動態效果, 猶如在看 CD-title (Web Title). 然後這種方式, 卻需要一點想法和概念來執行.

Jeditable 是幫你解決這件事. 簡單說, 他是把 ajax 的功能加強了. 讓你可以在所看到的任何地方直接修改, 不需要換頁, 跳視窗..等等. 甚至結合其它外掛可以做出更方便的在線編輯功能. 不管是在即時修改內容, 或是上傳檔案, 下拉選單, 日期選擇, 特定格式的輸入, 它都做得到, 效果也相當不錯.

來看看 demo:

• 基礎使用範例 - input/textarea/select
• 配合其它外掛的範例, 讚喔. - textarea 因應輸入文字自動放大, ajaxupload, Masked input, Character counter
• 更進階的應用 - 在地文字編輯器

不過仍有幾個不足的地方, 可以再加強

• 輸入檢查的功能, 可以在前端先檢查再傳送, 例如, 是否允許輸入空白資料
• ajax erro 的處理
• ajax timeout 的處理, 畢竟, 網路的不確性太多了. 總要能防呆.

現階段沒有 error 的處理, 如果遇見 404 或是 500, 甚至網路連不上線, 那不就傳回了很大的怪物回來了? 甚至是 timeout 時間的設定, 怕剛好遇到網路狀況, 至少還可以防呆一下. 還是說, 反正….

在2個不錯的小技巧,

1. callback, 也就是當處理完後, 可以設定要做的動作
2. 因為還沒有前端的檢查內容, 可以透過接收程式時, 回傳的內容, 可以含 javascript 做處理. 如下範例

如此一來, 利用程式檢查後, 可以回傳一個 alert 訊息(包含成功/空值/錯誤/重複..等等, ), 或是配合其它的 plugin 做一些警告訊息.

雖然 Jeditable 看來少了點東西, 但它仍是 web2.0 style 所需要的好物啊.