Reload parent page after AJAX modal popup is closed.

Modal popup window is more elegant way of showing information to the user in views,webform, etc. We can also insert an ajax modal popup link for a webform in a global text field of a view. When the view is rendered, the link is displayed to display the webform in an ajax dialog box, but many a times, when the webform is filled with newer values and saved on the ajax itself, the parent page, in this case, the view, is not refreshed to show the updated values in the form.

For eg, I have a below view with an edit link of the contact. This link refers to a webform which is used to update these contacts.

view link

The Edit link opens an ajax modalup of a webform to input the contact values -

ajax modal popup

Now, when the popup form is submitted and closed the view page is not reloaded which keeps the old values until the page is manually refreshed.

To reload the page from the code, we need to do a little core modification followed by a simple jQuery in our custom site-specific module.

Make modification in js/modal.js file of Ctools module. Add a single line in Drupal.CTools.Modal.unmodalContent function, search for the following code snippet.

// Unbind the events we bound
$(window).unbind('resize', modalContentResize);
$('body').unbind('focus', modalEventHandler);
$('body').unbind('keypress', modalEventHandler);
$('body').unbind( 'keydown', modalTabTrapHandler );
$('.close').unbind('click', modalContentClose);
$('body').unbind('keypress', modalEventEscapeCloseHandler);
$(document).trigger('AjaxModalClosed', $('#modalContent')); <---Add this line.
$(document).trigger('CToolsDetachBehaviors', $('#modalContent'));

This line triggers the new event AjaxModalClosed whenever the modal popup is closed, so you can use this in your custom module js file and perform any action you want to do after the ajax dialog is closed. For eg, to refresh the page, insert the following js code to the js file of your module -

(function ($) {
  $(document).bind('AjaxModalClosed', function(context) {
    window.location.reload();
  });
})(jQuery);