单击按钮时未显示ajax弹出窗口答案

【问题标题】：ajax popup not showing when button clicked单击按钮时未显示ajax弹出窗口
【发布时间】：2014-10-12 16:36:35
【问题描述】：

我正在使用下面的代码来尝试创建一个显示文本和几个按钮的弹出窗口。问题是当单击按钮时弹出窗口不显示并且页面重新加载。

<script type="text/javascript"             src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("#button1").live("click", function () {
        $("#popup").dialog({
            title: "Display",
            width: 600,
        })
        return false;
    });
</script>

<asp:Button ID="button1" ClientId="button1" runat="server" Text="testpopuo" />
<div>
<div id="popup" style="display:none">
    <asp:Literal Text="Are you sure you want to delete the blog?"  runat="server"/>
    <asp:Button Text="Yes" runat="server" />
</div>
    </div>

【问题讨论】：

尝试从 button1 中删除 runat="server"
您需要使用控件的客户端 ID，因为 ASP.Net 会将 id="button" 更改为其他内容以满足其需要。您是否包含了 jQuery 以及 jQuery UI，因为它没有在示例中显示？由于代码在页面中的元素之前，您还需要将其包装在 DOM 就绪事件处理程序中。

标签： jquery asp.net .net ajax popup

【解决方案1】：

您还需要包含 jQuery js（您只显示 jQuery UI 脚本）。把它放在 jQueryUI include 之前
您可以设置 ClientIDMode="Static" ASP.net 属性，使ID 保持不变。有几个选项可用：http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode(v=vs.110).aspx
您需要将 jQuery 代码包装在 DOM 就绪处理程序中，因为它位于页面上的元素之前。 $(function(){YOUR CODE HERE}); 是 $(document).ready(function(){YOUR CODE HERE}); 的快捷方式

代码：

<script src="your jQuery.js path here" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
    $(function(){
        $("#button1").live("click", function () {
            $("#popup").dialog({
                title: "Display",
                width: 600,
            })
            return false;
        });
    });
</script>

<asp:Button ID="button1" ClientIDMode="Static" runat="server" Text="testpopuo" />
<div>
<div id="popup" style="display:none">
    <asp:Literal Text="Are you sure you want to delete the blog?"  runat="server"/>
    <asp:Button Text="Yes" runat="server" />
</div>
</div>

点击后的样子：

【讨论】：

我已经添加了 jQuery UI 脚本，将 $(function() 更改为 $(document).ready(function()。但仍然没有显示弹出窗口
@user3043862：始终使用较短的$(function(){});。您能否再次发布您的整个 HTML，以便我们发现任何其他/新问题。谢谢。
我已添加更改。感谢您的帮助。
@user3043862：只是构建一个示例 ASP 应用程序来测试任何其他问题。
@user3043862：排序...我忘记了 ID 选项是什么（自从我使用旧的 ASP.Net 以来已经有好几年了）。在控件上使用ClientIDMode="Static"。已经测试了上述内容，现在可以使用了。

【解决方案2】：

您在加载按钮之前使用查询选择器。所以在 jquery ready 函数下编写你的代码。

$( document ).ready(function() {
    $("#button1").live("click", function () {
        $("#popup").dialog({
            title: "Display",
            width: 600,
        })
        return false;
    });
});

【讨论】：

这只是问题之一。