0

I have some code using the javascript object model to get items for several dropdown boxes on a form. I also heard that using Promises was the way to go for speeding up things and created 2 wrapper functions. The first one is using the object model to get items from a list and this is wrapped in a Promise with jQuery (.when). The second one fills the dropdown boxes(.then). There are several calls that are made using the .when and .then architecture. These work great and all the dropdowns get loaded. The issue is that no matter what method I try, I can't inform the user with an animation that the code is indeed running. The addwaitscreenwithnoclose function does start fine, but the image freezes and looks unprofessional. Hours of research has led me to try many options, but none of them work as it has been shown that the long calls by default will freeze the UI. I get that, but it just seems odd that you can't let the user know it is working. My form pops up so fast that the out of box loader is never seen because my form is loaded via the object model. Just wondering if anyone has created a solution or has an idea of what might work. I am not sure that I can post the code yet, but if it is needed I may be able to make it available.

[Code was removed due to client concerns...]

This is good stuff and for what it does is fast, but still takes about 5 seconds to maybe 8 seconds to load and users do not know that it is doing anything when the image freezes. My best attempt so far is using setInterval to draw a colored div across the page, but it too of course freezes due to the longer code...

UPDATE: As an FYI, this code is on a page that is opened in the SP.UI.ModalDialog. It is a custom page where the form is written as an html file that includes the javascript file in a script tag. This html file is the source of a Content Editor Web Part on the page that gets opened in the dialog. The dialog opens very quickly but the data does take some time...

1
  • It's hard to guess without some code i'm afraid. At least some stripped code if you can Nov 25, 2014 at 12:33

2 Answers 2

1

I'm not sure what you mean with freeze, but I can't see where you call or close the "working on it". I made simple example with dummy code, maybe it will help you. Because I have never seen that async calls have locked the UI etc, so you could try this approach:

SP.UI.ModalDialog.showWaitScreenWithNoClose("title", "message", 400, 400);

var dummyExecuteQueryAsync = function(func) {
    func();
}

var AMO = window.AMO || {};
AMO.csom = AMO.csom || {};
AMO.upload = AMO.upload || {};

AMO.csom.GetLookupData = function () {

    var getvalues = function () {
        var deferred = $.Deferred();
        setTimeout(function() {
            dummyExecuteQueryAsync(Function.createDelegate(this, function () { deferred.resolve( "Done: " ); }));   
          },  500 + Math.random() * 3000  );
        return deferred.promise();
    };

    return {
        getvalues: getvalues
    }

}();


AMO.csom.FillDropdowns = function (msg, no) {
    console.log(msg + no);
}


function GetLookupValues() {
    var defferedArr = [];
    defferedArr.push( $.when(AMO.csom.GetLookupData.getvalues())
        .then( 
            function (items) { AMO.csom.FillDropdowns(items,1); } 
        )
    );

    defferedArr.push(  $.when(AMO.csom.GetLookupData.getvalues())
        .then( 
            function (items) { AMO.csom.FillDropdowns(items,2); } 
        )
    );

    defferedArr.push(  $.when(AMO.csom.GetLookupData.getvalues())
        .then( 
            function (items) { AMO.csom.FillDropdowns(items,3); } 
        )
    );

    defferedArr.push(  $.when(AMO.csom.GetLookupData.getvalues())
        .then( 
            function (items) { AMO.csom.FillDropdowns(items,4); } 
        )
    );


    return defferedArr;
}


var def = GetLookupValues();
$.when.apply(null, def).done(function() {
        console.log("All done");
        SP.UI.ModalDialog.commonModalDialogClose();
    });
5
  • I will see if this makes any difference, but yes, I have also tried SP.UI.ModalDialog.showWaitScreenWithNoClose and it also freezes. I will post back results later... Nov 26, 2014 at 14:56
  • So, again, I have tried another method that does the same thing. The code executes fine, but the spinner gif freezes. I need to call the code from an ExecuteOrDelayUntilScriptLoaded function to ensure that sp.js is present. Then I open the wait dialog which opens fine and starts the animation. Then the animation will stop at some point and then start again right before it finishes loading. Nov 26, 2014 at 18:15
  • I also tried to put console log to tell me what was happening. I log when it calls each GetLookupData and then I log when it calls the FillDropdowns. Some of them take up to 10 seconds to get data. The logging will stop for a couple of seconds and then it comes back. During this time, the dialog can not be moved and the animation freezes. I just did not think that could happen with the async calls, but it appears to be. Nov 26, 2014 at 20:24
  • I have resolved most of my issue. I realized that my masterpage was older and was still using IE=8 and not IE=9 [<meta http-equiv="X-UA-Compatible" content="IE=9,8"/>] So this was updated to the 9,8 and this really sped up the page. I still freezes a little, but the form opens in about 5 seconds or less. Thanks for the the deferred array code as I had not thought of doing it that way. Nov 27, 2014 at 11:00
  • Unfortuantely I do have to remove my code as I was told to do so... Nov 27, 2014 at 11:00
1

We have used Spin.js in several such scenarios.

Usage

Define a <div> in the HTML markup

<div id="userTableSpinner"></div>

Then in Javascript code find the div and start spinner and finally stop it once all processing is done:

var userTableSpinner;
function someProcessStartsHere() {
if (userTableSpinner == null) {
    userTableSpinner = new Spinner().spin(document.getElementById('userTableSpinner'));
    }
    else {
        userTableSpinner.spin(document.getElementById('userTableSpinner'));
    }


    // JS Code

    //Finally stop processing
    if (userTableSpinner != null) {
        userTableSpinner.stop();
    }
}
1
  • Unfortunately I have tried using spin.js and it does the same thing. It stops spinning after a few seconds and then restarts after the dropdowns are loaded. It could be an IE thing but that is all this client is allowed to use. Nov 25, 2014 at 11:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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