突然想研究用 Thickbox 搭配 Ajax 來達成表單預覽的功能，就動手實作了一下。

jQuery Ajax

var url = "preview.php?" + new Date().getTime();
$.post(url, {c: $("#content").val()},
      function(result){
        $("#preview_temp").html(result);
        tb_show('caption', '#TB_inline?height=480&width=640&inlineId=preview_temp', false);
      }
);

流程其實很簡單，就是把結果 post 到後端處理的程式，再把結果 callback 到頁面元素就行了，會用 post 就是不用受限於 get 的 2KB 限制。

整個流程的重點在於「如何在 javascript 中呼叫 Thickbox」，方法就是直接使用 tb_show 函式，把 url 直接替換成呼叫 inline 的方式即可：

//tb_show('Your Caption', href, group);
tb_show('caption', '#TB_inline?height=480&width=640&inlineId=preview_temp', false);

Demo: form preview within Thickbox via Ajax

其實試出來以後才想到包括 tinyMCE 等 Rich Text Editor 早就都提供預覽的功能了。

原來這就是吃飽太閒嗎？XD

—
話說…最近正在瘋狂使用 jQuery 來虐待自己！