2016年1月15日 星期五

asp.net web form updatepanel + jQueryUI dialog 按鈕postback造成textbox文字消失 | button postback cause textbox text missing

功能情境:
一個網頁有查詢區跟查詢結果gridview
GRID的資料行有可以點擊查看明細的按鈕
明細的DIV用jquery UI 的dialog來顯示
明細DIV裡有包在updatepanel裡的明細Grid
並且有一個同意按鈕 跟一個加備註按鈕 和備註文字textbox
原本只設定了按鈕的onClick 後端程式
但是按下按鈕postback時會無法觸發後端事件

所以我找到一篇說
前端的按鈕click事件加上

__doPostBack($('input[id$="按鈕ID"]').attr("id"), null);

的事件來觸發postback

但只有同意按鈕正常運作,需要填備註的按鈕就出問題了
同樣做法會讓備註文字欄的文字在postback後消失,
但是又不想要整個打掉改寫成Ajax 要改太多了,
所以又再找了一下做法,找到以下這篇
http://blog.roonga.com.au/2009/07/using-jquery-ui-dialog-with-aspnet-and.html

解法很簡單就是在dialog設定的open事件中加上

$(this).parent().appendTo("form");


還有updatePanel的屬性加上 ChildrenAsTriggers="true"
就成功觸發後端事件了

PS:記得移除前面那個__doPostBack不然會變成觸發兩次...

2016年1月12日 星期二

jquery ui dialog 關閉按鈕圖案消失 jquery ui dialog button icon missing

問題:
在一個有載入jquery ui跟bootstrap的網頁裡
dialog的關閉按鈕的icon不見了
但同樣的功能別的網頁上都正常

解決:
查了半天發現是css載入順序問題
要先載入bootstrap的css再去載入jquery ui的css
icon就出現了