6

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/

4

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.

4

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.

3

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.

  • I press F5 and watch the source code of the page. I see the following registration of the js file: /sites/teams/_catalogs/masterpage/projectdashboard.js?ctag=102$$16.0.2607.1216. It looks like there is some querystring which is opening some old verstion. I open this file and see the old js content. I already try cntrl-F5 in firefox. It didnt help. – Ola Mar 3 '14 at 11:50
  • If you have IE you can try "Start In Private browsing" as mentioned. Otherwise, you may have to clear the browser cache in Firefox. – Nadeem Yousuf Mar 3 '14 at 11:52
  • I have try "Start In Private browsing" in FF and IE but it didnt work. Also when I try to access the js file in the browser it download an old version: mycompany.sharepoint.com/sites/teams/_catalogs/masterpage/…. When I open this file in SPdesigner it is the latest version. Im stuck! – Ola Mar 3 '14 at 12:09
  • Did you check-in the file after you made the changes? – Nadeem Yousuf Mar 3 '14 at 12:17
  • yes I did. I also explicit check out/check in. What about this post? sharepoint.stackexchange.com/a/84724/14036 Someone says I need to add the js file to the style library because this list is not caching. – Ola Mar 3 '14 at 12:21
3

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.

3

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 :-)

2

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.

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.