Reload html page after jquery dialog box is closed

Question

I am new to jquery. All I want is to reload my html page after I close my dialog box as shown below:

$("#patient_info").html(response);
$( function() {
  $( "#patient_info" ).dialog({
     autoOpen: false,
     show: {
        effect: "Bounce",
        duration: 1000
     },
     hide: {
        effect: "Fade",
        duration: 1000
     }
 });
                        
                            
 $( "#patient_info" ).dialog( "open" );
                              
});
},
 complete: function(){

}

How do I do that?

nfn · Accepted Answer · 2021-06-27T06:32:07.900

try this one:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Dialog</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#dialog" ).dialog({
      autoOpen: false,    
    });

    $( "#opener" ).on( "click", function() {
      $("#dialog").dialog({closeOnEscape: true, title: 'View', 
   close: function(event, ui){ location.reload(); }}).dialog("open");
    });
  } );
  </script>
</head>
<body>

<div id="dialog" title="Basic dialog">
  hello
</div>

<button id="opener">Open Dialog</button>
<div id="dialog-message"></div>

</body>
</html>

This method optionally accepts a Boolean parameter true or false. If the parameter true is specified, it causes the page to always be reloaded from the server. But, if it is false (which is default) or not specified, the browser may reload the page from its cache.

source: https://www.tutorialrepublic.com/faq/how-to-refresh-a-page-with-jquery.php#:~:text=This%20method%20optionally,from%20its%20cache.

score 0 · Answer 2 · answered Jun 27 '21 at 06:39

The dialog component offers an event handler for that use case.

There are different examples of how to reload the current page on this question. You can use location.reload(); I have commented it out on the snippet.

$(function() {
  $("#patient-info").dialog({
    autoOpen: true,
    appendto: $('body'),
    title: 'Hello world dialog',
    close: () => {
      // location.reload();
      console.log('Dialog is closed');
    },
    show: {
      effect: "Bounce",
      duration: 1000
    },
    hide: {
      effect: "Fade",
      duration: 1000
    }
  });
});

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div id="patient-info">Lorem ipsum</div>

Reload html page after jquery dialog box is closed

2 Answers2