Third asp.net button doesn't open a jQuery dialog

Question

I have a very basic testing asp.net web application. There is one <asp:Button> that pops a jQuery dialog. In this dialog there is another <asp:Button> that makes a <div> tag visible, and in this <div> tag there is a third <asp:Button>. So far everything is okay. Now according to my code the third button should pop a second jQuery dialog, but this never happens. Where am I mistaking?

Here is my aspx code:

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>

    <asp:Button ID="btn" runat="server" Text="btn" />
    <div id="div1">
        <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <ContentTemplate>
                <table>
                    <tr>
                        <td>
                            <asp:Button ID="btn1" runat="server" Text="btn1" OnClick="btn1_Click" />
                        </td>
                        <td>
                            <div id="div2" runat="server" visible="false">
                                <asp:Button ID="btn2" runat="server" Text="btn2" />
                            </div>
                        </td>
                    </tr>
                </table>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>

    <div id="div3" style="display:none">
        <h1>test</h1>
    </div>

And here is the code for the jQuery:

<script type="text/javascript">
        var dialogOpts = {
            resizable: false,
            bgiframe: true,
            autoOpen: false,
            width: "710px"
        };

        $('#div3').dialog(dialogOpts).parent().appendTo($("#form1"));;
        $(function () {
            $("#div3").dialog({
                maxWidth: 1050,
                maxHeight: 534,
                width: 1050,
                height: 534,
                resizable: false,
                autoOpen: false,
                buttons: {
                    Cancel: function () {
                        $(this).dialog("close");
                    }
                }
            });

            $("#btn2").click(function () {
                $("#div3").dialog("open");
                return false
            });
        });
    </script>
    <script type="text/javascript">
        var dialogOpts = {
            resizable: false,
            bgiframe: true,
            autoOpen: false,
            width: "710px"
        };

        $('#div1').dialog(dialogOpts).parent().appendTo($("#form1"));;
        $(function () {
            $("#div1").dialog({
                maxWidth: 1050,
                maxHeight: 534,
                width: 1050,
                height: 534,
                resizable: false,
                autoOpen: false,
                buttons: {
                    Cancel: function () {
                        $(this).dialog("close");
                    }
                }
            });

            $("#btn").click(function () {
                $("#div1").dialog("open");
                return false
            });
        });
    </script>

It is placed in the body and so far only the first jQuery pops up. And this is my c# function that makes the second <div> tag visible:

 protected void btn1_Click(object sender, EventArgs e)
    {
        div2.Visible = true;
    }

netchkin · Accepted Answer · 2013-10-19 19:30:21Z

2

visible = false

essentially prevents element from rendering. If you register the onclick event for the unrendered (UNRENDERED, not display:none nor visibility:hidden, your button does not physically reside in the page), the onclick event does not register to anything at all. After you show your button in the update panel, there is nothing to be run on click, because no click handling has been set (the button did not exist in the time of

$("#btn2").click(function () {
            $("#div3").dialog("open");
            return false
        });

)

answered Oct 19, 2013 at 19:30

netchkin

1,3941 gold badge12 silver badges22 bronze badges

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

3 Comments

Apostrofix Over a year ago

okay, i see. removing the visible = false seems to fix the problem with opening the second jQuery dialog. But how else can I make the second div to shows up only on btn2 click?

netchkin Over a year ago

you can for example set css property display to none. Another approach would be to convert the adding of click handling to a function, which in turn you would assign to the OnClientClick.

Apostrofix Over a year ago

can you help me with some code? setting style="display:none" didn't work.

Collectives™ on Stack Overflow

Third asp.net button doesn't open a jQuery dialog

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related