Open jQuery UI Dialog from Code Behind

Question

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

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"/>

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");
});

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.

How can I do this?

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?

EDIT:

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.

Answer 1

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");
});

Into something like this :

$(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, ie, change this :

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

into simply this :

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

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

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");

Answer 2

I think in this situation it would be better for you to use a plain old <input type="button/> button and use ajax to perform your call to the server, and then with the returned data append it to your html and use the dialog. Ajax will perform your code behind without posting back your entire page.

EDIT: here is an example I did a while ago

//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;
        }

$(document).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();
                }
            });

        });
    });

Answer 3

Just Replace the <asp:ButtonField with <asp:TemplateField the write whatever you want:

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