0

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!

  • Do you know if the Minimal Download Strategy feature is enabled on the site where you are having issues? And is your custom code embedded in the HTML in <script> tags, or are you using <script src="/path/to/file.js"> to link in the code from another file? – Dylan Cristy Apr 15 at 20:01
  • I'm not sure on the minimal download strategy, will have to check that in the morning. The code it's self is in <script> tags, would there in this case be a benifit to linking the code instead? – K Henson Apr 16 at 4:42
  • Not necessarily. I was asking to try to get a sense of how many files might be affected by the Minimal Download Strategy feature, if that does turn out to be involved. MDS will cause linked script files to not re-load properly when returning to the page they should be loaded on, which in turn means that that code doesn't run. – Dylan Cristy Apr 16 at 13:15
  • The Minimal Download Strategy is active on the site. But everything (CSS, HTML and Java/Jquery) is in one file. – K Henson Apr 16 at 13:36
  • Except for the actual jQuery library file, I'm presuming? That's linked in, correct? – Dylan Cristy Apr 16 at 13:47
0

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.

  • Interesting! If i disable the MDS it looks like it doesnt have any direct impact on existing forms or documents on the SharePoint that are currently their (and it only impacts the subsite and not the entire collection), so doing this option would only impact some loading time, correct? Also with the changing of the master pages, it looks like the edit would be <SharePoint:ScriptLink language="javascript" name="my_javascript.js" runat="server" /> with the pointer being at the jQuery location its self. Which would if i understand correctly, force the file to re-download. – K Henson Apr 16 at 14:32
  • If im understanding correctly, since the source (jquery) is external to the document, regardless of if it is off the SharePoint or on it, it will still have an issue with this, is that correct? – K Henson Apr 16 at 14:34
  • Yes on both counts. The problem is that the MDS system ignores any regular HTML link or script tags except for the first time it encounters them (per session). In order for it to "know" that it should reload those resources, you have to use the special CSSRegistration and ScriptLink tags, but those have to be on a master page (or other APSX page) so that it is processed by the server. And yes, turning off MDS for a single site should only affect loading times, but you probably won't even notice a difference. I have yet to see a site where MDS offers a real performance improvement. – Dylan Cristy Apr 16 at 14:58
  • Perfect! Thank you for the suggestions and the answers! I will try the MDS solution first (since it sounds like it fits the needs and doesnt really have any expected impact), and then if needed i know what to fall back on! -- Again really appreciate it! – K Henson Apr 16 at 15:05
  • I believe if you have a Publishing site (what most people use), MDS automatically does not work, even if it is enabled in features. See Wictor Wilen's ridiculously comprehensive explanation of MDS: wictorwilen.se/… – BigRaj Apr 17 at 13:45
0

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?

  • The code starts with document ready as suggested. I hadn't thought about a server delay though or it firing too soon(before the response is ready). When I check the console in Chrome or IE no errors are shown, but also none of the console.log() events are fired either. – K Henson Apr 16 at 4:37
  • I added some code to the original question to hopefully better answer this question. – K Henson Apr 16 at 14:03

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.