最煩惱的就是JQUERY UI的DIALOG無法提交問題

最令人煩躁的就是提交按鈕失效，點選後無任何反應。即便是使用其它手段使頁面產生提交，伺服器端也無法取到Dialog中的表單資料。

我們首先來分析一下原因：JQuery會把Dialog的元素append到Body裡面，而不是form裡面。研究了頁面原始碼後發現，jQuery UI Dialog控制元件初始化時動態生成的HTML元素被新增到頁面的尾部、form元素的後面，而原始的Dialog模板部分（其內包含表單元素）也被移到了動態生成的HTML元素內。也就是說，原先在form內的表單在Dialog初始化後就被移到form外了，這就導致了Dialog模板內表單全部失效。

接下來是3種解決方案：

第一，不知jQueryUI的Dialog這樣設計是一項功能還是一個bug。為了在Dialog內實現正常的頁面提交，根據上述分析，我找到一個簡單的解決辦法——在 jQueryUI控制元件的“open”事件處理程式中將Dialog控制元件動態生成的HTML元素移到form元素內，程式碼如下： 使用程式碼：$(“#dialog”).parent().appendTo(“/html/body/form[0]“); 或者 $(“#dlg”).dialog({ open: function () { $(“body > div[role=dialog]“).appendTo(“form#aspnetForm”); } }); 程式碼中的“aspnetForm”是ASP.NET應用程式自動生成的當前頁面form元素ID，使用時你可以換成自己頁面的formID。

第二，加入一個這樣的DIV，然後把Dialog寫入這個DIV裡面。

$(“#dialog”).parent().appendTo(“#dialog_target”);

第三，（1）修改Dialog的JS程式碼，把程式碼新增到form中，而不是body裡面。（2）Dialog內部的自定義HTML不使用，而直接加入一個IFRAME，把裡面的HTML移到另外的頁面中，再與父頁面進行互動就OK（我使用的就是這種方法，這樣這些獨立出來的程式碼還可以複用。

本文為Anyforweb技術分享部落格，需要了解網站建設相關，請訪問anyforweb.com。