Refresh parent page when jQuery UI Dialog is closed

Question

So every time a specific dialog box in jQuery UI is closed I want the parent page to be refreshed. How can I achieve this.

jQuery Code:

        $(document).ready(function() { 
         var dlg=$('#createTeam').dialog({
         title: 'Create a Team',
         resizable: true,
         autoOpen:false,
         modal: true,
         hide: 'fade',
         width:600,
         height:285
      });


      $('#createTeamLink').click(function(e) {
          dlg.load('admin/addTeam.php');
          e.preventDefault();
          dlg.dialog('open');
      }); 
});

HTML Code:

<button href="" type="button" id="createTeamLink" class="btn btn-primary custom">Create Team</button>
<div id="createTeam" class="divider"></div>

How do I get the main parent page to refresh/reload after the dialog box is closed?

Is the dialogue a promise? you could use that and wait for a result before calling a refresh function... What @Bernhard said. — Jon Wells, Sep 28 '15 at 15:06

score 13 · Accepted Answer · answered Sep 28 '15 at 15:06

13

Use the dialogclose event (http://api.jqueryui.com/dialog/#event-close).

var dlg=$('#createTeam').dialog({
     title: 'Create a Team',
     resizable: true,
     autoOpen:false,
     modal: true,
     hide: 'fade',
     width:600,
     height:285,
     close: function(event, ui) {
          location.reload();
     }
  });

answered Sep 28 '15 at 15:06

Bernhard

8,583
4
41
42

That works great, thank you. I will accept the answer in 5 mins. – George Baca Sep 28 '15 at 15:12
Do you know how I can close the dialog by clicking outside it? – George Baca Sep 28 '15 at 15:28
Check this question and answers: http://stackoverflow.com/questions/2554779/jquery-ui-close-dialog-when-clicked-outside – Bernhard Sep 28 '15 at 15:39

score 1 · Answer 2 · answered Sep 28 '15 at 15:05

You should be able to do this with the reload() function:

window.location.reload();

In your code:

var dlg=$('#createTeam').dialog({
     title: 'Create a Team',
     resizable: true,
     autoOpen:false,
     modal: true,
     hide: 'fade',
     width:600,
     height:285,
     close: function() {
         window.location.reload();
     }
});

score 0 · Answer 3 · answered Sep 28 '15 at 15:07

0

When you initialize the dialog, add the close listener.

$( ".selector" ).dialog({
  close: function( event, ui ) { window.location.reload(true); }
});

answered Sep 28 '15 at 15:07

epascarello

204,599
20
195
236

Refresh parent page when jQuery UI Dialog is closed

3 Answers3

Linked