JSLink (js)file is updated, but still can't see any changes, maybe caching?

Question

I am using SharePoint 2013 online (Office 365). I am following some JSLink tutorial where I am showing indicator icons in columns. It looks like the .js file is working, but when I change the file and check it in, I don't see any changes.

I have created a custom list with a column with choices : Green, Red, Yellow. After this I created a page and added this list as a webpart.

On this webpart I have set a path of my .js file. In this .js file there is some logic where the control is overridden with an icon. I see a broken image. I did some changes in my js file, but I still see the old path of the image. Is there some caching in SharePoint which is using the js file??

This is the tutorial: http://www.abhishan.com/create-project-dashboard-with-sharepoint-2013-js-link/

Answer 1

The only way to make the update available to all users is to edit the webpart and add a timestamp to the JSLink file. For example you can add ?timestamp=2016122200.

Also, to avoid this problem, I use a short static code in the JSLink file that will call another JS file where all the stuff I modify often will written. By doing it I'm able to do all the changes I want and it will be immediatly spread to the world.

Here is the code I use into the JSLink file:

// loadExt permits to load JS and CSS files
// https://gist.github.com/Aymkdn/98acfbb46fbe7c1f00cdd3c753520ea8
function loadExt(e,t){var s=this;s.files=e,s.js=[],s.head=document.getElementsByTagName("head")[0],s.after=t||function(){},s.loadStyle=function(e){var t=document.createElement("link");t.rel="stylesheet",t.type="text/css",t.href=e,s.head.appendChild(t)},s.loadScript=function(e){var t=document.createElement("script");t.type="text/javascript",t.src=s.js[e];var a=function(){++e<s.js.length?s.loadScript(e):s.after()};t.onload=function(){a()},s.head.appendChild(t)};for(var a=0;a<s.files.length;a++)/\.js$|\.js\?/.test(s.files[a])&&s.js.push(s.files[a]),/\.css$|\.css\?/.test(s.files[a])&&s.loadStyle(s.files[a]);s.js.length>0?s.loadScript(0):s.after()}

(function() {
  // onLoad() is called when all the fields in the form have been proceed
  function onLoad(ctx) {
    // if you need jQuery for example
    loadExt([
      "jquery-1.12.4.min.js"
    ], function() {
        // and to avoid the cache I put all the JS code into the Form_loaded.js file
        $.getScript('Form_loaded.js', function() {
          // the function onLoadReady() must be into the Form_loaded.js file
          onLoadReady(ctx)
        });
      }
    });    
  }

  // do some actions as soon as the fields are shown
  var loadAfterForm = {
    Templates: {
      OnPostRender:function(ctx) {
        // only trigger when everything is loaded
        // --> ctx.ListData.Items[0] all the fields
        if (ctx.ListSchema.Field[0].Name === "Attachments") {
          onLoad(ctx)
        }
      }
    }
  }

  // don't do it when editing the page
  if (GetUrlKeyValue("PageView") !== "Shared" && GetUrlKeyValue("DisplayMode") !== "Design") SPClientTemplates.TemplateManager.RegisterTemplateOverrides(loadAfterForm);
})();

So Form_loaded.js is called without this cache issue! Very useful :-)

Answer 2

Another perhaps simpler option is to remove the jslink reference from the web part, save the page and then add it again. This is one of many glitches that result from the poorly engineered SP platform.

Answer 3

I have fixed this to rename the js file and add it to the masterpage gallery of the root site of the current site collection. I also changed the JSLink path in the properties of the webpart. I hope this caching problem will be fixed in SP online office 365.

Answer 4

I had the same issue in my environment. The following DIDN'T work: - Put script in "Style Library" - use (d) tag - CTRL+F5 - InPrivate

The only thing that finally worked --> turn off caching on your network infrastructure device! When the caching on our NetScaler turned off --> everything worked like a charm.

Answer 5

Right click on IE and click on "Start In Private browsing". This will make sure to load latest copy of the .js file. Alternatively, you can ctrl-F5 the page. Personally I prefer first approach.

Answer 6

The only thing that :

Upload your updated js file to your location than open that js file and press ctrl + F5 for refresh js old code.

everything worked good.

Answer 7

You should change the jslink url to include the file version (if you have versioning enabled). Alternatively, you can use a random number (or hash of the file).

Ex:

~siteCollection/Style Library/somepath/yourjslink.js?v=4.0

Each time you update the jslink, also update its reference. For example, I have a PnP Script that check the file version to update the url

# Get JSLink version
$jsLinkFile = Get-PnPFile -Url "Style library/somepath/yourjslink.js"
$version = Get-PnPProperty -ClientObject $jsLinkFile -Property UIVersionLabel

$expectedJsLink = "~sitecollection/Style library/somepath/yourjslink.js?v=$version"
$someContentType= Get-PnPContentType -Identity $someContentType
if(-not ($someContentType.jslink -eq $expectedJsLink)){
    $someContentType.JSLink = $expectedJsLink
    $someContentType.Update($true)
    Write-Host "Updated content type $($someContentType.ID)"
}

Invoke-PnPQuery

I update some content type,but it can also apply whereever the jslink is referenced.

This works because from a browser perspective, url are considered differents when any parameter in the query change.

The benefits of these technic is that you still benefits from browser caching.

The downside is that it's not as simple as dropping a file in a folder.