asp button click not firing on jquery modal dialog

Question

<asp:Button ID="btnShowPopup" runat="server" Text="Show popup" />
    <div id="dialog" style="display: none">
        <table>
            <tr>
                <td>
                    <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
                </td>
            </tr> 
            <tr>
                <td>
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                </td>
                <td>
                    <asp:Label ID="Label1" runat="server"></asp:Label>
                </td>
            </tr>
        </table>
    </div>

<script type="text/javascript">
    $(function () {
        $("[id*=btnShowPopup]").click(function () {
            ShowPopup();
            return false;
        });
    });

    function ShowPopup() {
        $("#dialog").dialog({
            title: "Test",
            width: 500,
            buttons: {
                Close: function () {
                    $(this).dialog('close');
                }
            },
            modal: true
        });
     }
</script>

I'm trying to pass the textbox1 value to label1 on my button1 click event.But unfortunately asp button click events not firing on modal dialog.Give me a solution to correct it in a right way.

Currently i'm having two buttons on my page.One for show modal dialog and other one for submitting the values — thilim9, Aug 23 '15 at 06:58
@vijayP this is my onclick function [ Label1.Text = TextBox1.Text; ] assigning textbox1 value to label1.Do I need to write a client script? — thilim9, Aug 23 '15 at 07:14
possible duplicate of [jQuery UI Dialog with ASP.NET button postback](http://stackoverflow.com/questions/757232/jquery-ui-dialog-with-asp-net-button-postback) — Taleeb, Aug 23 '15 at 08:36

Taleeb · Accepted Answer · 2015-08-23T10:47:06.793

Try the following code:

function ShowPopup() {
            var dlg = $("#dialog").dialog({
                title: "Test",
                width: 500,
                buttons: {
                    Close: function () {
                        $(this).dialog('close');
                    }
                },
                modal: true
            });
            dlg.parent().appendTo($("form:first"));
        }

Due to postback the popup will be lost. To show the popup again on postback we can maintain a hidden field

<head runat="server">

    <title></title>
    <script type="text/javascript" src="content/js/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <script type="text/javascript">
$(function () {
            $("[id*=btnShowPopup]").click(function () {
                ShowPopup();
                return false;
            });

            $('#Button1').click(function () {
                $('#hdnPostback').val(true);
            });

            if ($('#hdnPostback').val() == 'true') {
                $('#hdnPostback').val(false);
                ShowPopup();
            }
        });

        function ShowPopup() {
            var dlg = $("#dialog").dialog({
                title: "Test",
                width: 500,
                buttons: {
                    Close: function () {
                        $(this).dialog('close');
                    }
                },
                modal: true
            });
            dlg.parent().appendTo($("form:first"));
        }
    </script>
</head>
<body >
    <form id="form1" runat="server">
    <asp:Button ID="btnShowPopup" runat="server" Text="Show popup" />
    <div id="dialog" style="display: none">
        <table>
            <tr>
                <td>
                    <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
                </td>
            </tr> 
            <tr>
                <td>
                    <asp:TextBox ID="TextBox1" runat="server" Text=""></asp:TextBox>
                </td>
                <td>
                    <asp:Label ID="Label1" runat="server"></asp:Label>
                </td>
            </tr>
        </table>
        <asp:HiddenField runat="server" ID="hdnPostback" Value="false" />
    </div>
    </form>
</body>

In case of master pages - the client id is dynamically generated (so the id of hidden control is no longer hdnPostback)

Based on this the code needs to be modified something like this:

$(function () {
            $("[id*=btnShowPopup]").click(function () {
                ShowPopup();
                return false;
            });

            var hdnPostbackID = '<%= hdnPostback.ClientID %>'

            $('#Button1').click(function tt() {
                $('#' + hdnPostbackID).val(true);
            });

            if ($('#' + hdnPostbackID).val() == 'true') {
                $('#' + hdnPostbackID).val(false);
                ShowPopup();
            }
        });


        function ShowPopup() {
            var dlg = $("#dialog").dialog({
                title: "Test",
                width: 500,
                buttons: {
                    Close: function () {
                        $(this).dialog('close');
                    }
                },
                modal: true
            });
            dlg.parent().appendTo($("form:first"));
        }

This is work for me.But modal dialog went disappear when I click the button even if I put modal: true.How do I prevent it on click function? — thilim9, Aug 23 '15 at 09:03
The pop up is lost as the page got reloaded because of postback. — Taleeb, Aug 23 '15 at 09:06
How do I solve it?is that possible to call the show popup function on button1 onclientclick event? — thilim9, Aug 23 '15 at 09:10
Even if you put a hidden field there still remain the problem — thilim9, Aug 23 '15 at 09:21
@Randz90. Why will the problem remain? Is the above solution not working (it is working on my local)? — Taleeb, Aug 23 '15 at 09:23
Ya it's not working on my solution.Do I need to add client script code behind? — thilim9, Aug 23 '15 at 09:25
Can you try and debug the value of the hidden field at different steps. Try to put the hidden field value from Button1_Click event in code-behind — Taleeb, Aug 23 '15 at 09:32
you can use console.log (or alert) to write the value of the hidden field in each function... then we can see why is it not working — Taleeb, Aug 23 '15 at 09:49
I tried what you said.when I debug the solution hdnPostback value assign as false. — thilim9, Aug 23 '15 at 10:01
In your code behind - set the value of hidden field as true. Label1.Text = TextBox1.Text; hdnPostback.Value = "true"; — Taleeb, Aug 23 '15 at 10:14
If it still does not work --- please show me the content of your aspx page. — Taleeb, Aug 23 '15 at 10:22
Now value is change into true.But still not work for me.In my solution enable theming also false in hdnPostback button — thilim9, Aug 23 '15 at 10:22
I've edited the answer based on your aspx. Please see if this works — Taleeb, Aug 23 '15 at 10:49
There should be a tick (correct) mark next to the answer. You have to click on it to accept the answer. Refer: http://meta.stackexchange.com/questions/23138/how-to-accept-the-answer-on-stack-overflow — Taleeb, Aug 23 '15 at 11:11

score 0 · Answer 2 · answered Aug 23 '15 at 10:31

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
    <asp:Button ID="btnShowPopup" runat="server" Text="Show popup" />
    <div id="dialog" style="display: none">
        <table>
            <tr>
                <td>
                    <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
                </td>
            </tr> 
            <tr>
                <td>
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                </td>
                <td>
                    <asp:Label ID="Label1" runat="server"></asp:Label>
                </td>
            </tr>
        </table>
        <asp:HiddenField runat="server" ID="hdnPostback" Value="false" />
    </div>
</asp:Content>

<script type="text/javascript">
        $(function () {
            $("[id*=btnShowPopup]").click(function () {
                ShowPopup();
                return false;
            });

            $('#Button1').click(function tt() {
                $('#hdnPostback').val(true);
            });

            if ($('#hdnPostback').val() == 'true') {
                $('#hdnPostback').val(false);
                ShowPopup();
            }
        });


        function ShowPopup() {
            var dlg = $("#dialog").dialog({
                title: "Test",
                width: 500,
                buttons: {
                    Close: function () {
                        $(this).dialog('close');
                    }
                },
                modal: true
            });
            dlg.parent().appendTo($("form:first"));
        }

</script>

asp button click not firing on jquery modal dialog

2 Answers2