locked
Dialog needs to close after .Net function runs RRS feed

  • Question

  • User1838126768 posted

    I actually have 2 problems:

    1. I need a dialog to pop up and say "Please wait while the form is processing....."

    technically, I can get that to work,

    2. but I need it to automatically close when the button's ASP.Net click handler has finished running

    any ideas?

    My code so far is:

                        $("#popUp").dialog
                            ({
                                autoOpen: true,
                                closeOnEscape:true,
                                modal: true,
                                draggable: true,
                                width: 350,
                                height: 125,
    
    //maybe something for a close function???
    
                                hide: {
                                    effect: "fade",
                                    duration: 1000
                                }
                            });

    Friday, June 10, 2016 7:32 PM

Answers

  • User475983607 posted

    I don't see it before I hit 'submit', but after I press it, I can't get to the page

    Looking closer at your code snippet you are purposefully opening the dialog on load then hiding the dialog using a fade effect.  I'm not sure if that's what you want or not. Regardless, the dialog should eventually close when the page posts back.  Perhaps you want the default state to be closed?  If so, set autoOpen: false as shown below.

    $("#dialog").dialog
    ({
        autoOpen: false,
        closeOnEscape: true,
        modal: true,
        draggable: true,
        width: 350,
        height: 125
    });

    This example opens the dialog when the submit button is clicked.  When the browser receives the response, the dialog stays closed because closed is the default state.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta charset="utf-8">
        <title>jQuery UI Dialog - Default functionality</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
        <script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
      <script type="text/javascript">
          $(function () {
                $("#dialog").dialog
                ({
                    autoOpen: false,
                    closeOnEscape: true,
                    modal: true,
                    draggable: true,
                    width: 350,
                    height: 125
                });
                
                 $("#Button1").click(function () {
                  $("#dialog").dialog('open');
              });
    
            });
      </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="dialog" title="Basic dialog">
          <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>  
        </div>
         <asp:Button ID="Button1" runat="server" Text="Submit" onclick="Button1_Click" /> 
        </form>
    </body>
    </html>

    If you are still issues, then you might want to post all the code.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 15, 2016 12:48 PM

All replies

  • User475983607 posted

    I would forget about the server side button click and use AJAX to submit the the request.  On response make sure there were no issues then close the dialog.  This will give you better control over the dialog.

    Otherwise, I believe there is a property that will make the dialog stay on the screen after clicking a submit button.  You'll need to look in the docs - it might have been for a bootstrap modal though....  Anyway, when the response comes back the browser loads the HTML that was created on the server for that particular request.

    Friday, June 10, 2016 10:51 PM
  • User61956409 posted

    Hi elmowatson,

    1. I need a dialog to pop up and say "Please wait while the form is processing....."

    technically, I can get that to work,

    2. but I need it to automatically close when the button's ASP.Net click handler has finished running

    any ideas?

    You could use jQuery AJAX call web method (or web service) and do processing in web method (or web service), and you could show dialog when the AJAX request starts, and then you could you could call jQuery dialog plugin close() method to close the dialog on AJAX success callback function when you receive response.

    http://api.jqueryui.com/dialog/#method-close

    Best Regards,

    Fei Han

    Monday, June 13, 2016 6:39 AM
  • User1838126768 posted

    The problem is that it's a really complicated method that I've already created with WebForms. I understand the close() method with the dialog, but I don't know how or understand how to implement the close method and where.

    So, how can I use what I've got with the dialog and use an ajax call back when the asp.net function/method is finished?

    Tuesday, June 14, 2016 1:30 PM
  • User475983607 posted

    The problem is that it's a really complicated method that I've already created with WebForms. I understand the close() method with the dialog, but I don't know how or understand how to implement the close method and where.

    So, how can I use what I've got with the dialog and use an ajax call back when the asp.net function/method is finished?

    Frankly, what you are trying to do is not clear.  It sounds like you have an ASP button click event that should close a Dialog? 

    Here's an example.  The Dialog opens when the page renders.  Clicking the button renders a script element in the click handler that closes the dialog.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta charset="utf-8">
        <title>jQuery UI Dialog - Default functionality</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
        <script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
      <script type="text/javascript">
          $(function () {
              $("#dialog").dialog();
          });
    
      </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="dialog" title="Basic dialog">
          <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>   
        </div>
         <asp:Button ID="Button1" runat="server" Text="Button" 
            onclick="Button1_Click" />
        </form>
    </body>
    </html>
    protected void Button1_Click(object sender, EventArgs e)
            {
                string script = @"
                                <script type='text/javascript'>
                                    $(function () {
                                        $('#dialog').dialog('close'); ;
                                    });
                                </script>";
                ClientScript.RegisterStartupScript(this.GetType(), "closeDialog", script);
            }


    Is there anyway you can post your code so we can see what you're doing?

    Tuesday, June 14, 2016 5:21 PM
  • User1838126768 posted

    First off, I have a script that creates the dialog:

     <script type="text/javascript">
            $(document).ready(function () {
                var theDialog = $("#popUp").dialog
                 ({
                     autoOpen: false,
                     closeOnEscape: true,
                     modal: true,
                     draggable: true,
                     width: 375,
                     height: 100,
                     hide: {
                         effect: "fade",
                         duration: 1000
                     }
                 });
    
                $('#MainContent_btnSubmit').click(function () {
                    if (Page_IsValid) {
                        theDialog.dialog("open");
                    }
                });
            });
        </script>

    But there's also a server side script that does 2 things - creates the a long string to print and then calls the 'doActualPrinting' method (I added your ClientScript... to it to see if it worked and it did not:

             private void doActualPrinting(string output)
             {
                 DateTime thisDay = DateTime.Now;
                 string today = thisDay.ToShortTimeString(); ;
                 printer.Print();
                 lblError.Text = "Prescription Refill successfully submitted at " + today;
                 blankOut();
    
    // here is where I need to close the dialog
    // if not, in the first client side script, I need this to somehow send a callback to let it know the printing 
    //is finished and close the dialog
    
                 string script = @"<script type='text/javascript'>
                                    $(function () {
                                        theDialog.dialog('close');
                                    });
                                </script>";
                 ClientScript.RegisterStartupScript(this.GetType(), "closeDialog", script);
             }

    though I don't understand how this script will get fired using 'RegisterStartupScript'

    Tuesday, June 14, 2016 6:38 PM
  • User475983607 posted

    The example shown above works perfectly.  Did you try debugging your code using developer tools (F12)?  Is the script element rendered? 

    elmowatson

    though I don't understand how this script will get fired using 'RegisterStartupScript'

    Why? Is the doActualPrinting in a class library?

    Have you tried using the following syntax like the example?

    $("#popUp").dialog('close');

    Tuesday, June 14, 2016 10:40 PM
  • User1838126768 posted

    doActualPrinting is just a method in my page. I separated it due to other reasons I needed previously.

    mgebhard

    $('#popUp').dialog('close');

    I've tried that syntax also, using the ClientScript.RegisterStartupScript example.

    The dialog never closes.

    I'm not sure how to see if the script renders through the F12 tools - I don't see it before I hit 'submit', but after I press it, I can't get to the page

    Wednesday, June 15, 2016 11:19 AM
  • User475983607 posted

    I don't see it before I hit 'submit', but after I press it, I can't get to the page

    Looking closer at your code snippet you are purposefully opening the dialog on load then hiding the dialog using a fade effect.  I'm not sure if that's what you want or not. Regardless, the dialog should eventually close when the page posts back.  Perhaps you want the default state to be closed?  If so, set autoOpen: false as shown below.

    $("#dialog").dialog
    ({
        autoOpen: false,
        closeOnEscape: true,
        modal: true,
        draggable: true,
        width: 350,
        height: 125
    });

    This example opens the dialog when the submit button is clicked.  When the browser receives the response, the dialog stays closed because closed is the default state.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta charset="utf-8">
        <title>jQuery UI Dialog - Default functionality</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
        <script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
      <script type="text/javascript">
          $(function () {
                $("#dialog").dialog
                ({
                    autoOpen: false,
                    closeOnEscape: true,
                    modal: true,
                    draggable: true,
                    width: 350,
                    height: 125
                });
                
                 $("#Button1").click(function () {
                  $("#dialog").dialog('open');
              });
    
            });
      </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="dialog" title="Basic dialog">
          <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>  
        </div>
         <asp:Button ID="Button1" runat="server" Text="Submit" onclick="Button1_Click" /> 
        </form>
    </body>
    </html>

    If you are still issues, then you might want to post all the code.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 15, 2016 12:48 PM
  • User1838126768 posted

    I copied your posted code and I see what you mean -  it worked just as I need here.

    then, I stripped mine down to practically nothing to mimic what you had and it still doesn't close - I'm was really going nuts here.

    I just happened to look and one of my first attempts used an update panel. I saw that it was still there. I moved its close tags and everything worked fine.

    Thanks for helping and sticking with me.

    Wednesday, June 15, 2016 3:27 PM