Open Jquery Ui Dialog From Code Behind

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:

Solution 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, i.e, change this :

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

into simply this :

string sliderPopupFunction = @" <scripttype=""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");

Solution 2:

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

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

Solution 3:

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)] 
        publicstatic 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 methodcontentType: "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();
                }
            });

        });
    });

Share