SharePoint Custom Webpage/Part Not Consistently Loading

Question

I hope this is the right place

I have been in a role within my organization working with SharePoint for a couple of months now, so i'm a newb more or less. I have some experience (again a novice) with coding (JavaScript/Jquery). So i'm assuming that i'm missing something minor that is causing this.

The Question: I have built a few Web Pages and Web Parts that are using REST to pull information in, and am managing that information via jQuery/JavaScript and using CSS. It works, as expected, however on occasion the page will not fully load the code (the main HTML and CSS shows but the code does not execute). But if we come back to it a few days later - it works again with no issues. I have also created another page for the same code (when one doesn't work, the other generally will).

So i'm wondering if possibly my code (Java or jQuery) is casing the issue (too much information in the cache or something). And should i empty my strings once done with them in the code, or is their something else i possibly might want to check into?

Using: Sharepoint 2013, jQuery 1.10, CSS, HTML, am including the .html using a Content Editor part. User base is Chrome, and IE (back to 9 I think).

When the document loads the first thing it does is pull the users for the sharepoint in, then loads their names and id's into an array. After its complete it then calls the GetMainBoard Function

$(document).ready(function() {

//the users for the sharepoint are pulled into an array that consists of only the user ID and Name  
    $.ajax({
        "url": "<SharePoint>/_vti_bin/ListData.svc/UserInformationList",
        "method": "GET",
        "headers": {
            "accept": "application/json; odata=verbose"
        },
        "success": function (data) {
            data.d.results.forEach(function(a){
//this loads the users found in the sharepoint into an array, it does not attempt to validate if the user already exists in the array, as each name in the sharepoint list has an idea (so if multiples exist it may assign a secondary number). 
                    UserLookup.push([{Id : a.Id, Name :  a.Name}])
            })
            ;$(this).GetMainBoard();    
//the main board function is called
        }})
        }); 

The Main Board function, pulls the list that its working with, and extracts the teams names for that list (there are multiple lists that the code works with).

$.fn.GetMainBoard = function() {
//This sets the array to nothing, blanking the array if any content exists. 
    xTeamName.length = 0;
    $.ajax({
        "url": "<Sharepoint>/_api/Web/Lists/getByTitle('"+SrcList+"')/Items?$top=1000&$Select=Team&$orderby=Team asc",
        "method": "GET",
        "headers": {
            "accept": "application/json; odata=verbose"
        },
        "success": function (data) {
            data.d.results.forEach(function(a){
//This calls the team names from the sharepoint list, it then checks the list against the array, and if it doesnt exist it adds it. 
                if($.inArray(a.Team,xTeamName) === -1){
                    xTeamName.push(a.Team); }
            })
            $(this).RunList();
        }});    
        } 

The RunList function determines which amount of information to pull from the list (there is a "short view" and a "full view" of the information that is pulled). There is no rest in this function, as all it does is passes the call to another function depending on the view type.

After this, another function is called that pulls the main content down from the list. It adds the html and content to a string and then $('.MainContent').append(content) writes the information to the DOM.

Thank you for the help so far, and let me know if i need to add anything additional!

Answer 1

You say that the Minimal Download Strategy feature is enabled on the site, and I'm guessing that's where the problem is coming from.

With MDS enabled, the MDS engine tracks which resources have already been loaded by the browser, like Javascript and CSS files. If something is determined to have been loaded already, MDS will prevent it from being reloaded from the server.

While most of your custom HTML, CSS and Javascript code is being injected on to the page through the CEWP, in all likelihood you are linking in the jQuery library from somewhere. So in all probablility, what is happening is that you go to the page where your custom code is, jQuery loads and then your custom code runs as expected. Then you go to a different page, and jQuery is lost. Then, in the same session, you go back to the page where your custom code is, but the MDS engine has determined that it already downloaded the jQuery file, so it does not reload it, which means jQuery is not active, and the $(document).ready() in your custom code is therefore meaningless, and your code does not execute.

More info on MDS in general.

The easiest solution in this case would be to disable MDS, if you can.

There are ways to work with the MDS system to register the jQuery library in a way that it will always get loaded, but for that you would need to use a SharePoint:ScriptLink tag, which you can't just add to your current HTML file, because it is an ASPX tag that needs to be handled server-side, so you can't just inject it on a page using a CEWP, you would have to add it to the master page or something.

More info on that here.

Answer 2

How are you getting the code to kick off? $(document).ready(function(){<code here>});?

It's possible that the token needed for a rest call hasn't been generated yet when the code runs, causing it to not kick off properly. Are you receiving any errors in the error callback?