How to display SharePoint ShowWaitDialog till SharePoint list items get bind to html table

Question

I am using below piece of line to execute the required function on-load. But I would also like to execute "ShowWaitDialog" and display the dialog until my html table get binds from SharePoint list

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', myfunction);

Can any one please guide me how can I make it.

score 0 · Answer 1 · answered Apr 01 '18 at 18:43

You can try this link Where you can show the dialog on the before your logic to retrieve the list items i.e. in myfuction beginning and close the dialog on bind list items to HTML table. Something like this.

    function RequestEnded() {
          try {
            waitDialog.close();
            waitDialog = null;
          } catch (ex) { }
        };

        function RequestStarted() {
           ExecuteOrDelayUntilScriptLoaded(ShowWaitDialog, "sp.js");
        };

        function ShowWaitDialog() {
           try {
              if (waitDialog == null) {
                 waitDialog = SP.UI.ModalDialog.showWaitScreenWithNoClose('Processing...', 'Please wait while request is in progress...', 76, 330);
              }
           } catch (ex) { }
        };

function myFunction(){
RequestStarted();
//logic to retrieve list items
clientcontext.executeQueryAsync(function(){
//Get list of items
//logic to bind it to html table
RequestEnded();
},function(){
//failed to read list items
RequestEnded();
})
};

All the best!

score 0 · Answer 2 · answered Apr 02 '18 at 08:35

Try:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        SP.SOD.executeFunc('sp.js', 'SP.ClientContext', myfunction);
        function myfunction() {
            var dialog = SP.UI.ModalDialog.showWaitScreenWithNoClose('Processing...', 'Request is in progress...', 80, 300);
            retrieveListItems().done(function (data) {
                dialog.close(0);
                dialog = null;
                //processing your data
                alert(data.d.results.length);
            });            
        }
        function retrieveListItems() {
            var deferred = $.Deferred();
            var listName = "MyList2";
            var fileCollectionEndpoint = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items";
            $.ajax({
                url: fileCollectionEndpoint,
                type: "Get",
                async: false,
                headers: {
                    "X-RequestDigest": $("#__REQUESTDIGEST").val(),
                    "accept": "application/json;odata=verbose",
                    "content-type": "application/json;odata=verbose"
                },
                success: function (data) {
                    //remove timeout, just for test purpose
                    setTimeout(function () {
                        deferred.resolve(data);
                    }, 3000);                                                              
                },
                error: function (jqXHR, textStatus, errorThrown) {                    
                    console.log(jqXHR);
                }
            });
            return deferred.promise();
        }
    </script>

How to display SharePoint ShowWaitDialog till SharePoint list items get bind to html table

2 Answers2