1

I use a modal dialog to display my custom aspx page. However, the page takes some time to load, and I would like to provide custom loading message while the modal dialog is loading. I found out here I can do this with SP.UI.ModalDialog.showWaitScreenWithNoClose, but how exactly do I use it? Where and how am I supposed to put it to display custom loading message prior to showing the modal dialog?

This is how I open a modal dialog (on button click):

<script language="javascript" type="text/javascript">    
    function OpenDialog(targetUrl) {
        var options = SP.UI.$create_DialogOptions();        
        options.url = targetUrl;        
        options.autoSize = true;
        options.allowMaximize = false;
        options.allowClose = true;

        SP.UI.ModalDialog.showModalDialog(options);        
    }
</script>

Where in this code does SP.UI.ModalDialog.showWaitScreenWithNoClose fit and how? I'd like it to automatically close after the page in modal dialog has been loaded.

2

To use the 'Waiting' dialog, for example, you can call it on page load (document.ready), then when the window is finished loading, close the dialog:

$(document).ready(function(){
  window.parent.eval("window.waitDialog = SP.UI.ModalDialog.showWaitScreenWithNoClose('Loading MySites', '', 90, 450);");

});

$( window ).load(function() {  
     if (window.parent.waitDialog != null) 
     {
        window.parent.waitDialog.close();
     }
});

Check out this link for the parms (Title, msg, height, width). The main lines you are looking for is window.parent.eval... & window.parent.waitDialog.close(), you just need to hook it into a trigger that makes sense for you.

  • 1
    @w128 really? eval as the accepted answer? – MdMazzotti May 28 '14 at 10:49
0

This is what I would do:

function OpenDialog(targetUrl) {
        var waitScreen = SP.UI.ModalDialog.showWaitScreenWithNoClose("Loading", "Please wait");
        var options = SP.UI.$create_DialogOptions();        
        options.url = targetUrl;        
        options.autoSize = true;
        options.allowMaximize = false;
        options.allowClose = true;
        options.args = waitScreen; //pass the reference of the wait screen to the dialog

        SP.UI.ModalDialog.showModalDialog(options);        
    }

Then, from within the opened dialog:

$(document).ready(function(){
   var waitScreen = SP.UI.ModalDialog.get_childDialog().get_args();
   waitScreen.close();
});
-1

You could use an approach like the following

    <script language="javascript" type="text/javascript">
        var notificationID = SP.UI.Notify.addNotification("<font color='#AA0000'>In Progress..</font> <img src='/_Layouts/Images/kpiprogressbar.gif' align='absmiddle'> ", true);

        //do your stuff

        SP.UI.Notify.removeNotification(notificationID);
        window.location.reload();

    </script>
  • Thanks for the input, however this is not related to a modal dialog, it merely display a notification. – w128 May 26 '14 at 14:53
  • why don't you put your "OpenDialog" method in the "do your stuff" section and remove the method as soon as the dialog is loaded? Or am I understanding your requirements wrong? – Gwny May 26 '14 at 15:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.