Caching problem when using external JavaScript files

Forms Public Forms
1

Hi,

We are experiencing caching issues when we add a link to a JavaScript file in Plumsail Forms for SharePoint Online.

Configuration:
PS

Problem:
Users do not always see the latest version of the JavaScript. Even when the user cleared his browser cache. I suppose it has something to do with the SharePoint online object cache.
One moment we see the latest version of the JavaScript. Moments later we see an old version.

We have also tried to pass extra parameters to the URL so that the browser always retrieves the latest version, but without success.

Example:

PSwithdate
PSwithdate801×420 18.5 KB

Are we the only ones that experiencing these issues?

PS: When we paste the JavaScript code directly into the Plumsail form, we always get the latest version.

Regards,
Johan

1 Like
2

Dear @Johan,
The approach with the date should work, though it will only refresh on the next day. If you use a GUID instead, it should never get cached.

3

Here's an option. Note it's very close to what you had but getTime returns to the millisecond.

  var ds = new Date().getTime().toString();
  var scriptUrl = 'https://abc.sharepoint.com/Assets/code/zyr/forms/init.js?v=' + ds;
4

Thanks for the suggestions!

However, we occasionally experience cache problems when working with the date parameter solution. I suspect that the synchronization between the different object cache servers in Office 365 does not always go smoothly?
We have now tried importing an html file and that seems to work perfectly so far. Al the changes that we made are immediately visible for the users when refreshing the form.
(html files are not cached in the Office 365.)

Thanks,
Johan

Plumsail code:

window.fd = fd;
window.$ = $;
window.pnp = pnp;

fd.spRendered(function () { 
    renderForm();
});

async function renderForm(){
    //Load custom script files
    await loadHTML("https://test.sharepoint.com/sites/mysite/SiteAssets/form.html");
    loadForm();
}

function loadHTML(url){
    return new Promise((resolve, reject) => {
        $("body").first().append($('<div>').load(url, function() {
              resolve();
        }));
    });
}

Html file:

<script>
function loadForm(){

//My form code

}
</script>
1 Like
5

Johan, did you see that I had getTime added to the date? That should made it refresh on every load. That said, if the entire page is cached, I don't know if it's going to actually run and notice the updated query string. I too have had the same issue as you, and ultimately if you manually change your form and resave, it WILL update on next page load. You can't obviously do that with hundreds of forms though.