Dynamically-added Parameter to JS File (cache-busting) Does Not Cause Reload

Question

I've added a random date param to my CSS and JS files in order to "cache-bust"...

HTML (head)

<!-- STYLE -->
<link href="assets/css/style.css" rel="stylesheet" id="style">

<!-- SCRIPTS --> 
<script src="assets/js/scripts.js" id="scripts"></script>

JS (jQuery 3.4.1)

var randomParam = new Date().getTime();
// CSS
var ogCSS = $("head").find("#style").attr("href");
$("head").find("#style").attr("href", ogCSS + "?" + randomParam);
// JS
var ogJS = $("head").find("#scripts").attr("src");
$("head").find("#scripts").attr("src", ogJS + "?" + randomParam);

The CSS file works great. The JS file not so much.

"Network" tab (CSS renamed and called again, JS is not)...

"Sources" tab (JS not called again, has original name)...

I cannot use PHP. I cannot access the server. This is all client-side.

What can I do to make it work? Or is this just how it is?

UPDATE

Forgot to mention that "Elements" in the DevTools show the JS file being renamed properly (see below). It's just not being re-called in "Network" or showing up as being renamed in "Sources". So it's stuck in cache.

Answer 1

I know this question is old, but in case someone comes across it (as I did), the problem is likely here:

ogCSS + "?" + randomParam

That does not create a valid and complete query string. The format of the query string should be:

?<param_name>=<param_value>

but in the code above, we only have ?<param_value>. This means the value will be treated as a name, presumably with a null value, which is generally ignored by most servers I have worked with. To make this correct, you would need to append both a parameter name (often "_" for this use case) and a value, so something like:

ogCSS + "?_=" + randomParam