Friday, March 23, 2012

Refresh the Parent showModalDialog

There are many blogs showing how to refresh the parent window when returning from a SharePoint modal window using SP.UI.ModalDialog.showModalDialog.  However, I could not find one that worked adequately  for my needs.  The use case discussed here is for launching an application page within a modal.  When the application page is submitted, the parent window should refresh.  When the modal is closed (i.e. x'd out of from upper right of the window), the parent page should not refresh.  In addition, the submit happens within an SPLongOperation using block in the code behind of the application page.  For some reason, calling the following at the end of the using statement did not work.


  operation.EndScript("window.frameElement.commitPopup();"); 


Hence the fix was performed in the JavaScript where the modal was originally launched from.  A callback function was added to the options of SP.UI.ModalDialog.showModalDialog.  This code is as follows:


  function refreshParent(result, target) {
    window.parent.location = window.location.href;
  }


The problem with this was that when the modal was canceled out of (i.e. not submitted), the parent would still refresh.  Although this is not the end of the world, it clearly lessens the user's experience.  By adding a check for the result, this can be remedied.  The entire script is as follows:


  function launchModal(url) {
    var options = SP.UI.$create_DialogOptions();
    options.url = url;
    options.dialogReturnValueCallback = Function.createDelegate(null, refreshParent);
    SP.UI.ModalDialog.showModalDialog(options);
  }


  function refreshParent(result, target) {
    if(result == 1) window.parent.location = window.location.href;
  }


Now the parent window refreshes as expected.

2 comments:

  1. when form is submitted how to set result=1?

    When I submit the form by clicking 'Submit' button, Server side code executes and then nothing happens. I am just trying to figure out when 'Cancel' is clicked then how to set result to 0 and when custom form is submitted then how to set result to 1 so that parent page (from where model is open) should reload.

    My requirement is on click on submit button in modal window, updating few columns in list and then need to reload the parent window so updated data should resfected and when click cancel on modal window then should now reload parent.

    Thanks in advance

    ReplyDelete
  2. Hi Ajay,

    If I understand you correctly, you have a modal launched via JavaScript, using SP.UI.ModalDialog.showModalDialog(options). Clicking cancel executes server code, and closes the modal. However, nothing happens on the parent window (i.e. no refresh). If this is correct, what you can do is remove the if statement within the refreshParent JavaScript function. It would then look like this:

    function refreshParent(result, target) {
    window.parent.location = window.location.href;
    }

    As usual, remember to f12 clear cache (ctrl + R is supposed to do this to, but I have had sporadic results with this) post deployment to clear out the old JavaScript.

    ReplyDelete