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.

I have edited your title. Please see, "Should questions include “tags” in their titles?", where the consensus is "no, they should not". — John Saunders
– John Saunders, Commented Mar 18, 2013 at 5:14
@JohnSaunders thanks John, I was unaware of this. Thanks for the reference — Ryan S
– Ryan S, Commented Mar 19, 2013 at 1:27

andri · Accepted Answer · 2013-03-18 02:28:48Z

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

edited Mar 18, 2013 at 2:28

answered Mar 18, 2013 at 1:46

andri

1,0211 gold badge9 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Ryan S Over a year ago

Would this then be able to be called from the code behind, or is this change not related?

andri Over a year ago

Using delegated events means your event handler should work across postback, so no need the code-behind. Also, I've updated my answer to include the proposed fix of the code-behind approach.

Ryan S Over a year ago

Thanks for the explanation, it all makes sense now :) Having said that, I still preferred the 'alternative' approach since I have everything in place that way, but it did not work. This is the code I have in the code behind: string sliderPopupFunction = @" <script type=""text/javascript""> $(""#sliderPopup"").dialog(""open""); </script>"; ClientScript.RegisterStartupScript(typeof(Page), "key", sliderPopupFunction);

andri Over a year ago

Is your sliderPopup a server-side control? If yes, I've updated my answer to include that possibility.

Ryan S Over a year ago

Slider Popup is a div: <div id="sliderPopup" title="Modify Deadline"> it contains a jQuery UI Slider, some Labels and Two Butons.

|

Muhammad Omar ElShourbagy · Accepted Answer · 2013-03-18 01:42:08Z

0

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

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

answered Mar 18, 2013 at 1:42

Muhammad Omar ElShourbagy

7,1182 gold badges34 silver badges51 bronze badges

Comments

MorningDew · Accepted Answer · 2013-03-18 01:44:51Z

0

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

        });
    });

edited Mar 18, 2013 at 1:44

answered Mar 18, 2013 at 1:35

MorningDew

5033 silver badges10 bronze badges

4 Comments

Ryan S Over a year ago

I believe I cannot insert a <input type="button"/> within the <asp:GridView> <Columns> field. Because I had tried that, since my functionality works perfectly outside the gridview.

MorningDew Over a year ago

@RyanSammut yes you can, you need to use the asp template though.

<asp:TemplateField>               <ItemTemplate>                   <input type="button" />               </ItemTemplate>           </asp:TemplateField>

Ryan S Over a year ago

Thanks for that, I didn't know. I have managed to add it and it works as you said. Now the next challenge is to get the data how I want it through AJAX. What I want to know is how can I know which button in which row was pressed. From the code behind I usually use this: int index = Convert.ToInt32(e.CommandArgument);. But if I do it through AJAX what do I need to do?

MorningDew Over a year ago

@RyanSammut you could get the index of the row with jquery. give your plain input button a class. <input type="button" value="submit" class="dostuff"/> $(".dostuff").click(function(){ var index = $(this).closest("tr").index(); alert(index); }); jsfiddle.net/maH2N/7

Collectives™ on Stack Overflow

Open jQuery UI Dialog from Code Behind

3 Answers 3

alternative

6 Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

alternative

6 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related