jquery-confirm 放在 WebForms 無法彈出提醒視窗

jquery-confirm webforms

Kai 2021-08-25 16:45:33 ‧ 1568 瀏覽

分享至

前輩們好

想做一個能自訂義confirm

參考網路上的程式碼範例都能正常使用

我另外在CodePen 上去測試也都能正常使用

我是用framework 3.5

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


<!-- jquery-confirm -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
    <script>
        $('#btnFoo').click(function() {
          $.confirm({
            title: '請確認資料',
            animation: 'zoom',
            closeAnimation: 'scale',
            content: '這次的資料如下',
            buttons: {
              確認: function() {
                alert('確認被按下了');
              },
              我再想想: function() {
                alert('資料有誤');
              }
            }
          });
        });
    </script>

    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <button href="#" id="btnFoo" type="button">詢問用戶</button>
        </div>
    </form>
</body>
</html>

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2021-08-25 22:05:23 檢舉

元件未獲得事件。你需要將程式寫到元件後面。或是用ONLOAD之類的東西。
下面有人教你了。我就不用回答了。

Kai iT邦新手 5 級 ‧ 2021-08-26 08:42:42 檢舉

不好意思我其實有綁定一個function
但是出現會只有一瞬間而已

```
function Reset1() {
showtxt = document.getElementById('<%=leader.ClientID%>');
var obj =document.getElementById("ctl00_ContentPlaceHoldr1_coulist");
var index = obj.selectedIndex;
var val = obj.options[index].text;

if (val == "A" || val == "B") {
$.confirm({
title: '請確認資料',
animation: 'zoom',
closeAnimation: 'scale',
content: '這次的資料如下',
buttons: {
確認: function() {
alert('確認被按下了');
},
我再想想: function() {
alert('資料有誤');
}
}
});

}
}
```

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

天黑

iT邦研究生 5 級 ‧ 2021-08-25 17:10:07

最佳解答

事件綁定時，需要頁面程式載入完畢再執行

<script>

$(document).ready(function() {
        $('#btnFoo').click(function() {
          $.confirm({
            title: '請確認資料',
            animation: 'zoom',
            closeAnimation: 'scale',
            content: '這次的資料如下',
            buttons: {
              確認: function() {
                alert('確認被按下了');
              },
              我再想想: function() {
                alert('資料有誤');
              }
            }
          });
        });
});

</script>

回應 4
分享
檢舉

看更多先前的回應...收起先前的回應...

Kai iT邦新手 5 級 ‧ 2021-08-26 08:42:29 檢舉

不好意思我其實有綁定一個function
但是出現會只有一瞬間而已

function Reset1() {
showtxt = document.getElementById('<%=leader.ClientID%>');
var obj =document.getElementById("ctl00_ContentPlaceHoldr1_coulist");
            var index = obj.selectedIndex;
            var val = obj.options[index].text;

            if (val == "A" || val == "B") {
                    $.confirm({
                title: '請確認資料',
                animation: 'zoom',
                closeAnimation: 'scale',
                content: '這次的資料如下',
                buttons: {
                  確認: function() {
                    alert('確認被按下了');
                  },
                  我再想想: function() {
                    alert('資料有誤');
                  }
                }
              });
                
            }
}

天黑 iT邦研究生 5 級 ‧ 2021-08-26 09:22:56 檢舉

其實重點是

$(document).ready(function() {

// your code

});

html的載入順序，由上到下，你的寫法是script放在head，
但是你要怎樣知道你的script再綁定時，頁面上的element是已經存在的?
需要透過window.onload或者$(document).ready()，確保頁面載入完成後執行，
你的套件是依靠jquery，所以我給的範例是用$(document).ready()，
這樣可以確保jquery也是載入完成可正常運作的。

相關連結

Kai iT邦新手 5 級 ‧ 2021-08-26 09:53:05 檢舉

我後來有照大大做的
但點確認要點好幾下才會恢復
再請教一番
非常感謝

$(document).ready(function () {
            var test = $("#ctl00_ContentPlaceHolder1_coulist").find('option:selected').text();
            $("#ctl00_ContentPlaceHolder1_coulist").children().each(function(){
                if (test=="A" || test == "B"){
                    $.confirm({
                        title: test,
                        animation: 'zoom',
                        closeAnimation: 'scale',
                        content: '這次的資料如下',
                        buttons: {
                            確認: function () {
                                //alert('確認被按下了');
                            },
                            我再想想: function () {
                                //alert('資料有誤');
                                
                            }
                        }
                    });
                }
            });
        });