1

i'm using MaterializeCSS, AngularJS and jQuery to build a simple webapp. Since i'm using Materialize, and due to the why i designed it, i need to initialize the sidebar button in every AngularJS view with jQuery.

If i copy this on every view, it works fine:

<script>
    $(".button-collapse").sideNav({
        menuWidth: 150
    });
</script>

however, if i create a new js file called sidenav.js:

<script src='/js/sidenav.js'></script>

for some reason, jQuery(or maybe Angular, but the XHR is initiated by jQuery) sends an XHR with a query string to load this script, thus invalidating the cache and causing an 'lag' due to latency. While after some usage all views are cached, the script keeps being reloaded because of the query string:

[Thu Jul 21 16:39:31 2016] 192.168.0.103:38124 [200]: /js/sidenav.js?_=1469129949496
[Thu Jul 21 16:39:37 2016] 192.168.0.103:38123 [200]: /js/sidenav.js?_=1469129949497
[Thu Jul 21 16:39:42 2016] 192.168.0.103:38126 [200]: /js/sidenav.js?_=1469129949498
[Thu Jul 21 16:39:42 2016] 192.168.0.103:38125 [200]: /js/sidenav.js?_=1469129949499
[Thu Jul 21 16:39:47 2016] 192.168.0.103:38128 [200]: /js/sidenav.js?_=1469129949500
[Thu Jul 21 16:39:51 2016] 192.168.0.103:38129 [200]: /js/sidenav.js?_=1469129949501

How can i stop jQuery or Angular from putting a query string on it, or other method to cache it?

Thanks.

Allan Araújo
  • 173
  • 2
  • 13

2 Answers2

3

jQuery's $.ajax() function has a cache parameter in its settings object. By default, cache is true for most data types, except for for jsonp and script where it defaults to false. This causes the random _ query parameter.

If you have access to the specific $.ajax() call that is downloading this script, you can fix this by adding cache: true to the settings object for that call.

Otherwise, you can use $.ajaxSetup() with a cache: true value. This should do the same thing, unless the specific $.ajax() call has cache: false in it, or if some other call to $.ajaxSetup() overrides this value. Also, if some other code relies on the default cache value, this will affect that code as well.

It's also possible that the script is being loaded with a $.getScript() call, which does not take a settings object and has no way to override the cache setting directly. If this is the case, you can either change $.getScript() to the equivalent $.ajax() call and add the cache: true setting there, or you can use $.ajaxSetup().

See the documentation for $.ajax(), $.getScript(), and $.ajaxSetup() for more information.

Michael Geary
  • 28,450
  • 9
  • 65
  • 75
0

Both jQuery and angualr don't load scripts you your page, the browser is the one that handle it.

For example in Google Chrome you can open the debug console using the F12 button then go to the network tab and press on "disable cache". this should prevent the browser from caching your resources.

Shlomi Haver
  • 954
  • 9
  • 14
  • Here's what chrome says when it loads: collapse.js?_=1469128268787 200 xhr jquery.js:8630 365 B It's a XHR, not the browser, i think – Allan Araújo Jul 21 '16 at 20:10