1

I am having trouble getting a simple jQuery preloader to work. I've tried a couple different methods, I've also moved the function around in the code. Can anyone shed some light on why this isn't working and what the solution would be?

Updated to include the entirety of my code:

SP.SOD.executeOrDelayUntilScriptLoaded( getSPListData, 'SP.js' );

$(window).load(function() {
    $(".loader").fadeOut("slow");
});

function getSPListData() {
    this.result = [];
    this.siteUrl = 
'https://site/subsite/'; 
    this.ctx = new SP.ClientContext( siteUrl )
    this.lists = ctx.get_web().get_lists();
    this.expr = /(RDTEN)|(procurement)/i 
    this.ctx.load( this.lists, "Include(Id,Title)" );

    ctx.executeQueryAsync( 
      this.getSPListData_SecondQuery.bind(this), 
      this.getSPListData_LogError.bind(this) 
    );

}

function getSPListData_SecondQuery(sender, args){
   lists.get_data().forEach( function( list ) {
      // Set up the second query and push its results into the "Result" array
      var items = list.getItems( SP.CamlQuery.createAllItemsQuery() );
      ctx.load( items );
      // This entry is the list's base data
      var listEntry = {
           id: list.get_id().toString(),
           title: list.get_title()
      }
      // Push the data into result, items will have all items in each list.
      result.push( {
           list: listEntry,
           items: items
      } );
   } );
   ctx.executeQueryAsync(
      this.getSPListData_SecondQuery_Success.bind(this),
      this.getSPListData_LogError.bind(this)
   );
}

function getSPListData_SecondQuery_Success(sender, args){
   //transform listitem properties.
   result.forEach( function( item ) {
       item.items = item.items.get_data().map( function( listItem ) {
          return listItem.get_fieldValues();
       } );
   } );


*_spBodyOnLoadFunctionNames.push('hideLoader');
function hideLoader() {
    $(".loader").fadeOut(1500);
}*

   // Filter each by the ReGex expression earlier on the Title field.
   var oListData = [];
   var itemTitle;
   for ( listNum = 0, listTot = result.length; listNum < listTot; listNum++ ) 
{
       for ( itemNum = 0, itemTot = result[ listNum ].items.length; itemNum < 
itemTot; itemNum++ ) {
          itemTitle = result[ listNum ].items[ itemNum ].Title
          if ( itemTitle && itemTitle.match( expr ) ) {
               // put data into a list
               oListData.push( result[ listNum ].items[ itemNum ] )
          }
       }
   }


   // Here's where you can make the data visible. in the manageData function.
   manageData( oListData, result );
}

// incase an error comes up in the execution of the queries
function getSPListData_LogError( sender, args ) {
    console.log( args.get_message() ); 
}

function manageData( oListData, allData ) {
    // Do stuff with list items here...
    var oListDataField = document.getElementById( "listItemData" );
    var stringBuilding = '';

    for(i=0, itemMax = Math.min(5, oListData.length); i < itemMax; i++){
        stringBuilding += " Title = " + oListData[i].Title + "<br/>"
        stringBuilding += " Library = " + oListData[i].FileDirRef + "<br/><br/>"
    }
    oListDataField.innerHTML = stringBuilding

    // For seeing the relative data:
     console.log(allData)
     console.log(oListData)

}

This is the CSS/HTML associated with the jQuery

<style type="text/css">
.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100px;
    height: 100px;
    background: fuchsia;
    opacity: .8;
}
</style>
</head>
<body>
Files:<div id="listItemData"></div>
<div class="loader"></div>
</body>
  • What’s the error saying in the developer console (F12 screen)? – KGlasier Jan 24 at 13:31
  • As of now, there is no console error. I just get a blank page and the list data no longer loads either – Torybee Jan 24 at 14:43
3

Putting $(".loader").fadeOut("slow"); into $(window).load will lead to it being called immediatelly when the page finishes loading, thereby directly hiding the loader.

But that is typically much earlier than when your CSOM query is ready.

What you actually want to do is to hide that loader after your CSOM query/queries finish. I would do the following:

Pack the hiding into a function:

function hideLoader() {
    $(".loader").fadeOut("slow");
}

Then call that function both in getSPListData_SecondQuery (or if you also fire off any more queries there, put it in the last function being called asynchronously) and getSPListData_LogError functions, i.e. only after the queries finished or failed.

  • Figured it out, added _spBodyOnLoadFunctionNames.push('hideLoader'); function hideLoader() { $(".loader").fadeOut(45000); } to the very bottom of my code and that worked. Thanks for the help @KGlasier and Anon – Torybee Jan 24 at 19:13
1

Looks like loader is an id, not a class. Try changing your scripts accordingly in the CSS and JavaScript.

— previous answer —

I think the duration for $().fadeOut("slow"); is about 0.6 seconds. Using $(window).load(); can be tricky with SharePoint, as the body of it loads differently than the actual window. Essentially, your "fadeOut" has already been executed by the time the body actually loads.

A solution for this is to use the _spBodyOnLoadFunctionNames.push("functionHandle"); which will execute the script you're looking for after the body has loaded.

Also rather than putting in slow for the argument, try puting in a time (in milliseconds) for greater control. Something like this may work, instead of your $(window).load(...)

_spBodyOnLoadFunctionNames.push('hideLoader');
function hideLoader() {
    $(".loader").fadeOut(1500);
}

If I remember correctly, your last question said the script made it load in ~20 seconds. So you might want to make the delay a similar time. But this should at least make it work, visibly.

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.