How to redirect, reload or refresh a page after closing the SharePoint 2013 Modal Popup Dialog

In the previous article we saw how to create a basic popup in SharePoint 2013. In this article we can see how to send back notification to the base page which invoked the Modal Dialog and perform a redirect,refresh or reload.

Use the below code to create a new Popup. This is bit different from the simple popup that we have seen in the previous article.

 <script type="text/javascript">
    //******** Dialog With Call Back Starts Here ***********/
     function openDialogWithCallBack(tUrl, tTitle) {
         var options = {
             url: tUrl,
             title: tTitle,
             dialogReturnValueCallback: onPopUpCloseCallBack
         };
         SP.UI.ModalDialog.showModalDialog(options);
     }
 
     function onPopUpCloseCallBack(result, returnValue) {
         if(result== SP.UI.DialogResult.OK)
         {
             /* Notify User */
              SP.UI.Status.removeAllStatus(true);
              var sId = SP.UI.Status.addStatus("You have clicked OK !!!");
              SP.UI.Status.setStatusPriColor(sId, 'green');
             
 
             //SP.UI.ModalDialog.RefreshPage(result);
             // window.location.href = 'http://www.ashokraja.me';//https://www.sharepointpals.com;
             //window.location.reload(); // forces a redolad of page
         }else if(result== SP.UI.DialogResult.cancel)
         {
             SP.UI.Status.removeAllStatus(true);
             var sId = SP.UI.Status.addStatus("You have cancelled the Operation !!!");
             SP.UI.Status.setStatusPriColor(sId, 'yellow');
         }
     }
     //******** Dialog With Call Back Ends Here ***********/
 </script>

An option called dialogReturnValueCallback is added to the list of options passed on to showModalDialog function. The function name passed to this option will be triggered once the popup is closed by the user.

The dialog result and the values if any passed by the user will be available as input for this call back method.

In the call back method, based on the dialog result we can perform the appropriate action required based on the scenario. In the code snippet, shown above, I am showing a status info, if the user have clicked cancel in the popup.

To redirect the user to a different page “window.location.href” can be called if the user have clicked the “OK” option. To refresh the page SP.UI.ModalDialog.RefreshPage(result); can be invoked. If the result is SP.UI.DialogResult.OK , the page will be refreshed (not reload, just a post pack will be performed). To force a reload of the page you can call window.location.reload();

To know how to show or close a popup , refer the previous article here.