天天看點

關于jConfirm回傳的解決方案

在昨天lastwinter留言關于jconfirm的問題,如下

關于jConfirm回傳的解決方案
我趁今天有空就考慮了下。我覺得lastwinter問這個問題應該是關于asp.net的回傳問題,這主要是jconfirm這個為callback回調,

他是異步的,并非同步。

是以我嘗試了下阻止事件的冒泡,并當選擇為true是自動回傳。用linkbutton測試(button不同于這個解決的方案在後面解釋)

現貼出linkbutton的code demo:

關于jconfirm回傳demo

<%@ page language="c#" autoeventwireup="true" codefile="default.aspx.cs" inherits="_default" %>

<head runat="server"> 

    <title></title>

    <script src="script/jquery-1.3.2.min.js" type="text/javascript"></script> 

    <script src="script/jquery.alerts-1.1/jquery.alerts.js" type="text/javascript"></script>

    <link href="script/jquery.alerts-1.1/jquery.alerts.css" rel="stylesheet" type="text/css" /> 

</head> 

<body> 

    <form id="form1" runat="server"> 

    <asp:linkbutton id="linkbutton1" runat="server" onclick="button1_click" >linkbutton</asp:linkbutton> 

    <asp:label id="label1" runat="server" text="label"></asp:label> 

    <div> 

    </div> 

    </form>

    <script type="text/javascript"> 

        $(document).ready(function() { 

            $("#<%=linkbutton1.clientid %>").click(function(event) {

            jconfirm("test", "test jconfirm", function(r) { 

            if (r) { 

                    <%= page.clientscript.getpostbackclienthyperlink(linkbutton1,"") %> 

                    } 

                }); 

                event.stoppropagation(); 

                event.preventdefault();

            });

        }); 

    </script>

</body> 

</html>

linkbutton1 button click code

protected void button1_click(object sender, eventargs e) 

   { 

       this.label1.text = datetime.now.tostring(); 

   }

主要為先阻止事件的冒泡event.stoppropagation();event.preventdefault(); 在jconfirm的callback回調函數中判斷是否需要回傳,

<%= page.clientscript.getpostbackclienthyperlink(linkbutton1,"") %>;;

點選linkbutton1是效果為:

關于jConfirm回傳的解決方案

點選cancel時候就不會回傳,當ok時候就會發生回傳更新時間:

關于jConfirm回傳的解決方案
對于我們的linkbutton的實作是在輸出的用戶端html代碼有腳本自動回傳,而button這是html元素submit,送出,

是以在這兩個的差別下,linkbutton就多了幾處javascript 代碼:

<script type="text/javascript">

//<![cdata[

var theform = document.forms['form1'];

if (!theform) {

theform = document.form1;

}

function __dopostback(eventtarget, eventargument) {

if (!theform.onsubmit || (theform.onsubmit() != false)) {

theform.__eventtarget.value = eventtarget;

theform.__eventargument.value = eventargument;

theform.submit();

//]]>

</script>

和 input hidden

<input type="hidden" name="__eventtarget" id="__eventtarget" value="" />

<input type="hidden" name="__eventargument" id="__eventargument" value="" />

上面所說的意思就是如果要用button實作同樣的示例,我們必須保證我的輸出用戶端的代碼有這些回傳腳本注冊,還有就是回傳為

<%=page.clientscript.getpostbackeventreference(button1,"") %>。是以我覺得用linkbutton更适合。

繼續閱讀