从代码隐藏中打开jQuery UI对话框 [英] Open jQuery UI Dialog from Code Behind

问题描述

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

I am kind of new with jQuery and JavaScript, and I ran into a problem.

我在从Gridview的ButtonField中打开jQuery UI对话框时遇到一些问题:

I am having some problems to open the jQuery UI Dialog Box from my ButtonField within the Gridview:

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

起初，我尝试为上述类提供一个类，并将其命名为"sliderPopupOpener"，并使其在单击时如下所示打开jQuery Popup:

At first I tried to give a class to the above and named it sliderPopupOpener, and make it open the jQuery Popup when clicked as below:

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

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

However, this was not working because of the postback, apart from that, it also does not work with my approach. Since I would like to get some data from the database before showing the jQuery UI Dialog. So I think the best approach is to call the Dialog function from the Code Behind.

我该怎么做?

我尝试了这种方法，但是没有用，我不确定自己做错了什么.

I tried this approach, but it did not work, I am not sure if I am doing something wrong.

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

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

Is the above possible? If so, what am I doing wrong?

我注意到每个人都在给出解决方案，而不是仅仅通过从隐藏代码"中调用jQuery函数来告诉我是否可行.尽管我很欣赏其他解决方案，但是如果我能以最少的努力通过背后的代码使它起作用，我将不胜感激，因为我已经以这种方式准备了一切.

I noticed everyone is giving their answers with a way around this, rather than telling me whether this is possible just by calling the jQuery function from the Code Behind. Although I appreciate other solutions, I would appreciate if I could get this to work, with the least effort possible, through the code behind, since I have everything ready that way.

推荐答案

您应该尝试使用 on .

Instead of directly bind the click event handler, you should try delegated events using live (deprecated since jquery 1.7) or on.

那样，您应该更改此内容:

That way, you should change this :

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

变成这样:

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

替代

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

alternative

If the code-behind approach is more suitable for you, you should try calling the method directly in your script, i.e, change this :

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).

Also, if your sliderPopup is a server-side control, you should replace the #sliderPopup with the client Id generated by ASP .NET (using sliderPopup.ClientID).

要考虑的另一件事是，如果您的sliderPopup位于更新面板中，则应首先尝试重新初始化Jquery UI对话框，如下所示:

Another thing to consider is if your sliderPopup located inside the update panel, you should try re-initialize the Jquery UI dialog first, something like this :

$("#sliderPopup").dialog().dialog("open");

这篇关于从代码隐藏中打开jQuery UI对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！