Add showWaitScreenWithNoClose to SPServices GetListItems

Question

With a button on page which calls the function createListItems() which is added to the page as a link in a CEWP. The function takes 10-25 seconds to complete (get items from one list and add them to another). The only indication that something is happening is that the button remains 'pushed' until the script completes.

Where do I add SP.UI.ModalDialog.showWaitScreenWithNoClose so that the modal appears when the function executes and closes when complete? I have added it to this script in the obvious places but only get the waitScreen at the end for a millisecond.

Here is my current code:

 <script type="text/javascript" src="/SiteAssets/jQuery/jquery.min.js"></script>
 <script type="text/javascript" src="/SiteAssets/jQuery/jquery.SPServices-0.7.2.min.js"></script>

<script type="text/javascript">

function createListItems()
    {
    $().SPServices({
            operation: "GetListItems",
            async: false,  
            listName: "SourceList",
            CAMLViewFields: "<ViewFields><FieldRef Name='Title' /></ViewFields>",
            completefunc: function (xData, Status) { 
            $(xData.responseXML).SPFilterNode("z:row").each(function() { 
                        var name = ($(this).attr("ows_Title"));
                       CreateNewItem(name);
                    });
                }
    });
}
function CreateNewItem(name) {
$().SPServices({
    operation: "UpdateListItems",
    async: false,
    batchCmd: "New",
    listName: "ReceiveList",
    valuepairs: [["Title", name],
    completefunc: function(xData, Status){ 
    ""          
   }
});
//Refreshes page to show new items in 'ReceiveList' list view web part
window.location = window.location.pathname;    
}

Answer 1

i couldn't test it but it should work

var waitDlg = SP.UI.ModalDialog.showWaitScreenWithNoClose("Dialog Title", "Message in Dialog", 60, 260);
createListItems();
waitDlg.close(SP.UI.DialogResult.OK);  

You should wrap this in a function and call this function by the onclickevent of your button.

Hope this will help you ;)

Answer 2

You could try something of this sort. Couldn't test it but hopefully would work. Replace the <some gif> with a spinning icon or just show Loading...

var loadingGIF = "<some gif>";
$("#foo").html(loadingGIF).SPServices({
  operation: "GetListCollection",
  completefunc: function (xData, Status) {
    /*
     *code to do once call is returned
     */
    /*Clear the loading icon*/
    $("#foo").html("").append(<append your result here>);
  }
});

Answer 3

Follow bellow step for a working example:

1- add a div like bellow code:

<div id="Loading">Loading data please wait....</div>

2- create a css class to hide the dive:

<style>
   .HideMe{display:none;}

3- Once your after you called SPServices GetListItems inside completefunc before or after the .each

do this:

$("#Loading").addClass("HideMe");

4- Make Sure you in your SPservices code you put the value of async:true otherwise it will not work.

$(document).ready(function() {
    $().SPServices({
    operation: "GetListItems",
    async: true,
    listName: "MenuItems",
    CAMLViewFields: SPSMenu,
    CAMLQuery: "<Query><Where><And><Eq><FieldRef Name='Cafeteria'/><Value Type='Text'>"+CAMLF+"</Value></Eq><Eq><FieldRef Name='Date'/><Value Type='Text'>"+MyCurrenDate+"</Value></Eq></And></Where><OrderBy><FieldRef Name='Order0' Ascending='True' /></OrderBy></Query>",

    completefunc: function (xData, Status) {


    $(xData.responseXML).SPFilterNode("z:row").each(function() {


      });
      $("#Loading").addClass("HideMe");

     }
   });

 });

hope this helps someone who needs to add ajax loader or ajax spinner in SPServices GetListItems