Re: [問題] jquery - thiekbox

看板Ajax作者TonyQ (沉默是金)時間16年前 (2009/07/04 11:55)推噓3(3推 0噓 4→)

留言7則, 3人參與討論串2/2 (看更多)

※ 引述《sdallan ()》之銘言： : 其實我也不是很明白，在這邊問是否適切XD : a.php 中一個超鏈結按下後開啟 plugin thickbox : 在box中把條件選一選，按下submit 後再送值回去給a.php : 然後a.php 顯示結果。以上是理想狀態 : 現在遇到的問題是， : box中按下submit 送值給 a.php 是成功了， : 不過，a.php的結果畫面出現在 thickbox 中。這個問題其實不只有一種解 , 應該說每種解都可以 , 端看流程設計而已. 要先瞭解的是 thickbox 有兩種主要模式 , 在顯示上沒有很明顯的不同 , 但是運作流程卻有些微不同 .也因此適用環境、能選用的取捨條件也不同. a.ajax mode . 在使用者要求開啟子頁面時 , 對子頁面url 發 ajax request 取得子頁面 body, 並在主頁面上建立能容納並顯示子頁面內容的 dom 物件 , 關閉時是採用隱藏(或刪除)剛建立的 dom物件的方式進行基本上採用這項設定 , 最大的差異在子頁面載入後是主頁的一部分子頁是視為主頁的一個附屬元件. 你不太容易只改變子頁的內容 , 或者只將子頁區域做刷新(refresh)/送出(submit)動作. (通常就是要手工撰寫重作一次ajax的流程 ) 但是也因為同一頁面的關係 , 如果有需要透過子頁面的動作, 來改變、影響父頁面的頁面元素 , 用ajax mode是比較理想的. 可以在同一個dom tree , 不需要透過 parent 來作多層調用. 還有一個不常出現的缺點 , 因為是同一個頁面 , 所以主頁面跟子頁面有時候會有 css衝突、重複載入script的狀況. 這些是你要依據你選擇的模式不同去進行的微調 , 當然大部分狀況下是不見得會碰到這些狀況 , 端看你的設計方法. b.iframe mode 在使用者要求開啟子頁面時 , 建立一 iframe 並設定其 url 為欲顯示的子頁面 . 剛剛描述 ajax 模式的反過來說就是 iframe 的 , 基本上相對於 ajax mode , 他就是有主頁面跟子頁面兩個區塊 , 你可以只針對子頁面來進行submit 或 refresh 而不影響主頁面 , 對於子頁面區塊是功能獨立或者需要特別具有時效性的頁面 , 是很適合用 iframe mode 的. 缺點就是當你想要比方說送出後讓主頁轉向或修改主頁的內容 , 需要透過 parent 來取得主頁來作處理, 流程上會稍微繁複一點. （但對dom 操作得熟一點這就不是問題.) ──────────────────────────────── 兩種模式選擇的不同 , 通常會影響你在設計接受 ajax 調用的 html 內容. 就我過去經驗 , 會使用到 thickbox 的狀況大概可以分成以下幾種，我也分別會建議採用一些不同的對策： 1.在子頁面操作後主頁切換以登入( Login ) 為例 , 按下去之後跳出登入子頁面 , 如果登入失敗或者取消登入 , 就取消 thickbox效果回到原頁面 , 如果登入成功就將原本主頁面跳往登入後的頁面. 以這種情形而言 , 我個人是認為 ajax mode 比較適合使用 , 因為這種情形的操作流程主要還是在於主頁 , 子頁只是附屬. 2.子頁面的行為是獨立區塊以"要刪除一項資訊"為例 , 我可能會需要列出可能影響到的範圍 , 請使用者確認 , 在使用者進行確認送出後 , 在子頁面單獨顯示刪除完成的訊息 . 在這種狀況下就適合採用 iframe mode , 因為流程的進行主要在子頁面. 3.子頁面的行為具有時效性以"瀏覽即時統計資料" 為例 , 因為該資訊可能會需要一直刷新 , 我們又不希望更新時更新整個主頁 , 只想針對子頁來進行更新 , 這時我們會採用 iframe mode. 當然採用ajax mode , 並在其中撰寫定期 ajax 的code也是可行的 , 只是相較之下 iframe mode 撰寫定期 refresh 相對容易. 當然也還有一些其他的狀況 , 要怎麼設計 , 其實是 case by case 的 . 就算因為某些其他的理由必須選擇其中一種 mode , 但要達成那個mode 所有的缺陷 , 除了部份 iframe 本身所無法改變的問題外 , 幾乎都可以透過撰寫額外的script 來達成目標 . 單看原問題所給的資訊 , 顯然是透過 iframe mode 來進行設計 , 這時候可選擇改成 ajax mode (也有可能需要跟著修改對應response page) , 也可以繼續沿用 iframe mode , 但是在送出完成後的頁面的 onload 中 , 下 parent.window.location ='某特定網址'. 來改變主頁的連結 . 這箇中巧妙 , 可以按照自己需要來進行撰寫 , 我個人是認為先以能達成最低要求為主 , 再瞭解相關資訊來瞭解其他處理問題的方法囉. -- What do you want to have ? / What do you have? 從書本中，你可以發現我的各種興趣。從ＣＤ中，你可以瞭解我所喜歡的偶像明星。或許從文字你很難以瞭解一個人，但從物品可以。 My PPolis , My past. http://ppolis.tw/user/Tony -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 59.105.101.26