从代码后面打开jQuery UI对话框

本文关键字：jQuery UI 对话框 代码 | 更新日期: 2023-09-27 18:04:29

我是jQuery和JavaScript的新手，我遇到了一个问题。

我有一些问题打开jQuery UI对话框从我的ButtonField在Gridview:

<asp:ButtonField ButtonType="link" Text="Modify Deadline" Visible="true" runat="server" CommandName="modifyDeadline" ControlStyle-CssClass="button" ItemStyle-CssClass="sliderPopupOpener"/>

首先我试着给上面的类命名为sliderPopupOpener，并使它打开jQuery弹出点击如下:

$(".sliderPopupOpener").click(function () {
  $("#sliderPopup").dialog("open");
});

然而，由于回发，这不起作用，除此之外，它也不适用于我的方法。因为我想在显示jQuery UI对话框之前从数据库中获取一些数据。所以我认为最好的方法是从后面的代码中调用Dialog函数。

我该怎么做?

我试过这种方法，但它没有工作，我不确定如果我做错了什么。

if (e.CommandName == "modifyDeadline")
{
     string sliderPopupFunction = @" <script type=""text/javascript""> 
                                        $(function () { 
                                            jQuery(function () {
                                                $(""#sliderPopup"").dialog(""open""); 
                                            }
                                         });
                                    </script>";
    ClientScript.RegisterStartupScript(typeof(Page), "key", sliderPopupFunction);
}

以上是可能的吗?如果是这样，我做错了什么?

编辑:

我注意到每个人都在用一种方式给出他们的答案，而不是告诉我是否可以通过从后面的代码调用jQuery函数来实现。虽然我很欣赏其他解决方案，但如果我能通过后面的代码以尽可能少的努力使其工作，我会很感激，因为我已经准备好了所有的东西。

从代码后面打开jQuery UI对话框

不要直接绑定click事件处理程序，您应该尝试使用live(自jquery 1.7起已弃用)或on委托事件。

这样的话，你应该修改这个:

$(".sliderPopupOpener").click(function () {
    $("#sliderPopup").dialog("open");
});

变成这样:

$(body).on("click", ".sliderPopupOpener", function(){
    $("#sliderPopup").dialog("open");
});
<标题>选择

如果代码隐藏方法更适合您，您应该尝试在脚本中直接调用该方法，即更改如下:

string sliderPopupFunction = @" <script type=""text/javascript""> 
                                    $(function () { 
                                        jQuery(function () {
                                            $(""#sliderPopup"").dialog(""open""); 
                                        }
                                     });
                                </script>";
将

简化为:

string sliderPopupFunction = @" <script type=""text/javascript""> 
                                    $(""#sliderPopup"").dialog(""open""); 
                                </script>";

另外，如果您的sliderPopup是服务器端控件，您应该将#sliderPopup替换为由asp.net生成的客户端Id(使用sliderPopup.ClientID)。

另一件要考虑的事情是，如果你的sliderPopup位于更新面板，你应该尝试重新初始化Jquery UI对话框，像这样: 
$("#sliderPopup").dialog().dialog("open");

只需将<asp:ButtonField替换为<asp:TemplateField即可。

<asp:TemplateField>
    <ItemTemplate>
        <input type="button" onclick='jsFunctionThatShowsTheDialog()'/>
    </ItemTemplate>
</asp:TemplateField>

我认为在这种情况下，您最好使用普通的旧<input type="button/>按钮并使用ajax执行对服务器的调用，然后将返回的数据附加到html并使用对话框。Ajax将在后台执行您的代码，而无需返回整个页面。

编辑:这是我之前做的一个例子

//declaring the web method annotation allows this method to be accessed by ajax calls
//scriptmethod tells this method to take the data that we're returning, and encode it as a json so we can use it in javascript
        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)] 
        public static List<Person> getPeople() {
            List<Person> people = null;
            using (testDataEntities context = new testDataEntities()) {
                people = context.People.ToList();
            }
            return people;
        }

美元(文档)。Ready (function () {

        $("#getPeople").click(function () {
            $.ajax({
                type: "POST",
                data: {},
                url: "Default.aspx/getPeople", //getPeople is the name of the method
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                  var data = msg.d;
                  var $table = $("<table></table>");
                   $.each(data,function(){
                    $table.append("<tr><td>"+this.MyProperty+"</td></tr>")
                    });
                  $table.dialog();
                }
            });
        });
    });
相关文章：