Dialog box didn't complete close, why not?

Question

On the parent page there is button click to open the jQuery UI Dialog box which loaded another webpage. On the child page there is "close" button to close the dialog. I can load the child page on dialog box, but there is a few issues. I searched many website (tried use destroy and remove the dialog, on or live click on button) and didn't find the solution. Hope someone can help me to solve it. Thanks in advance.

There are my issues:

The open button on the parent page disappear after the dialog box open
After clicking the "close" button on dialog box, the dialog is close but the div is show even I change display to be none.

There is parent:

After clicking the close button on child page.

There is my parent page code:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Test.aspx.vb"    Inherits="COMM.Test" %>

<!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">
<title>Test</title>
   <link rel="stylesheet" href="/include/jquery-ui-themes-1.11.4/themes/smoothness/jquery-ui.css" />
    <script language="javascript" src="/include/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script language="javascript" src="/include/jquery-ui-1.11.4/jquery-ui.js" type="text/javascript"></script>
     <script language="javascript" src="/include/dailog.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        $('#btnOpen2').click(function (e) {          
            e.preventDefault();
            openDailog();
        });
    });

  </script>
</head>
<body>
    <form id="form1" runat="server">
       <div><h1>Test</h1>
       <div id="somediv" />
          <button id="btnOpen2"> Open 2</button> 
     </div>
    </form>
  </body>
 </html>

The child page :

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestClose.aspx.vb" Inherits="COMM.TestClose" %>
<!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">
<title></title>
 <link rel="stylesheet" href="/include/jquery-ui-themes-1.11.4/themes/smoothness/jquery-ui.css" />
    <script language="javascript" src="/include/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script language="javascript" src="/include/jquery-ui-1.11.4/jquery-ui.js" type="text/javascript"></script>
     <script language="javascript" src="/include/dailog.js" type="text/javascript"></script>

  <script type="text/javascript" language="javascript">
  $(document).ready(function () {
      $('#btnClose').click(function (e) {
            e.preventDefault();
          closeDailog();       
      });

  });
    </script>
</head>
<body>
  <form id="form1" runat="server">
    <div>
        <button id="btnClose"> close</button> 
   </div>
  </form>
 </body>
</html>

There is my js code:

function openDailog() {

$("#somediv").load('TestClose.aspx').dialog({
    autoOpen: false,
    modal: true,
    dialogClass: 'dialog',
    resizable: false,
    width: 500,
    height: 400,
    title: 'Close diaglog'
  });
  $("#somediv").dialog("open");
  return false;
}

function closeDailog() {

$('#somediv').dialog({
    autoOpen: false,
    modal: true,
    dialogClass: 'dialog',
    resizable: false,
    width: 500,
    height: 400

});

   $("#somediv").dialog("close");  
   $(".ui-dialog-titlebar").hide();
   $("#somediv").css("display", "none");


}

JB King JB King · Accepted Answer · 2015-10-16T19:18:55

Since the "Open 2" button is in the div, it gets removed when the load is done.

W3 Schools Load example does the same behavior in terms of removing what was in the div when you load something new.

As for the second point, there wasn't a change to load the child page so why would there be one when it is removed?

You may have a challenge making the child page reload the parent though you could possibly use the localStorage item in HTML5 to pass along a flag to trigger the reload in the parent. I suspect you could empty the "somediv" div of its HTML as a way to clear the page.

Dialog box didn't complete close, why not?

1 Answers