Question

Im well aware of the fact that the problem im having has been asked and discussed on SO before, but i’ve read them all countless times and none of them actually helped me solve my problem.
I am working with Visual studio, ASP.NET and C#.

Here’s what i want to do exactly:
I have a JQuery dialog with a Label inside of it. I also have a button.
When that button is pressed,i want to jump inside the button’s click event and set a text for the label inside the JQuery Dialog. Then i want the dialog to open, displaying the label with the text that has just been set in my button’s click handler.

Here’s the content that should be in my JQuery dialog (note that i’ve simplified my code for this question):

<div id="dialog" title="Basic dialog">
<asp:Label ID="Label1" runat="server" ></asp:Label>
</div>

On my page i I have an ASP.NET button, with an onClick event. In the code behind, inside the click event for my button i set the text for Label1.

This is my button:

<asp:LinkButton ID="testButton" runat="server" onClick="button_Click" text="click me"/>

and here’s the code behind click handler:

protected void button_Click(object sender, EventArgs e)
{
    Label1.Text = "Hello";
}

This actually works, but not as i want it to.

My problem:
For some reason the label’s text only gets set the SECOND time i press the button. So that means, the first time i click the button, the dialog opens, displays nothing, then the dialog dissapears and the page posts back. The second time i press the button, i see that the text has been set for the label, but then again the dialog instantly dissapears and the page posts back.

i’ve tried adding the following to my button: OnClientClick=”return false;”
When i do this the postback issue is gone, but now my button’s click event doesn’t fire.

I’ve also tried to add the following to my script: event.preventDefault(); This causes the same problem as with the return false;, the page doesn’t postback but simply does not jump into the button’s click event.

here’s my dialog script:

<script>
 $(function () {

     $('#dialog').parent().appendTo($("form:first"))

     $("#dialog").dialog(
        {
            autoOpen: false,
            buttons: {
                "Ok": function () {
                    $(this).dialog("close");
                }
            }
                     } 

     );

     $("#testButton")
        .button()
        .click(function openConfirmDialog() {

            $("#dialog").dialog("open")


        });

 });
</script>

Basically all i want to do is click a button to set a label’s text, open a dialog, and keep that dialog open until a user closes it.

I might be missing something, but it amazes me to see how hard it is to do something as simple as i want to do.

kind regards,
Jane

Answer 1

When page is posted back by clicking on button control, dialog is refreshed and closed. You need to implement a way to show dialog box when page is posted back with data within in.

i: In first step create a variable at code behind. e.g

 protected string PostBackOption ="";

ii: Add check to set dialog option text when page is post back in page load or page pre render event. e.g

if (Page.IsPostBack)
{
   PostBackOption = "$(\"#dialog\").dialog(\"open\");";
}

iii: Now call this variable within javascript as shown below.

<script>
        $(function () {

            $('#dialog').parent().appendTo($("form:first"))

            $("#dialog").dialog(
                {
                    autoOpen: false,
                    buttons: {
                        "Ok": function () {
                            $(this).dialog("close");
                        }
                    }
                }

             );

                $("#<%= testButton.ClientID %>")
            .button()
            .click(function openConfirmDialog() {

                $("#dialog").dialog("open")


            });
            <%=PostBackOption %>
        });

Now when you click on click me button, page will postback, after post back dialog will not dis appear and label will be populated with text “hello” properly.