Archive for 4 月 22, 2008

form preview within Thickbox via Ajax

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

jQuery Ajax

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

流程其實很簡單,就是把結果 post 到後端處理的程式,再把結果 callback 到頁面元素就行了,會用 post 就是不用受限於 get 的 2KB 限制;整個流程的重點在於「如何在 javascript 中呼叫 Thickbox」,方法就是直接使用 tb_show 函式,把 url 直接替換成呼叫 inline 的方式即可:

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

Demonstrate: form preview within Thickbox via Ajax

其實試出來以後才想到包括 tinyMCE 等 Rich Text Editor 早就都提供預覽的功能了。
原來這就是吃飽太閒嗎?XD


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

Powered by WordPress with GimpStyle Theme design by Horacio Bella.
Entries and comments feeds. Valid XHTML and CSS.