Cache is not updating in browsers - javascript

I loaded jquery.min.js in head tag using script tag as below. this version was 1.2.6.
<script type="text/javascript" src="JS/jquery.min.js?v=1.2.6"></script>
<script type="text/javascript" src="JS/jquery-migrate-3.0.0.min.js"></script>
Then I cleared cache and loaded page (that one is ASPX)
So above jquery.min.js?v=1.2.6 is cached in browser now.
Migrate plugin is 3.0.0 which has issue with this version of jQuery.
So I changed content of (I know I can use different path anyway) jquery.min.js from 3.2.1 jQuery file and script tag changed to
<script type="text/javascript" src="JS/jquery.min.js?v=3.2.1"></script>
I reloaded same page at that time also it gives error of migrate plugin. in console also error is in JS/jquery.min.js?v=1.2.6
When I reload it second time (without clearing cache) , then it is not showing error anymore and also if I clear cache at first time then also error is not present.
What's wrong am I doing?
Here it doesn't matter which error it is but only matters is why it is occurring even after querystring is different.

Related

Preload Link found for Google Adsense, but wasn't used by browser

My Wordpress-Website [followmyinstagram.de] runs Google Adsense implemented within the head tags and some text areas. The code is written directly into a Child-Theme so I am not using any plugins for Adsense.
By analysing the site's page speed Chrome throws out:
Warnings: A preload link was found for "https://pagead2.googlesyndication.com/pagead/js/xxxxxxx/xxxxxxx/show_ads_impl.js" but was not used by the browser. Check that you are using the crossorigin attribute properly.
The browser wastes a lot of time requesting the document this way. There must be an opportunity to, as it says, preload the link or to lazy-load the link after the site has been displayed. Thing is, the mentioned link does not occur anywhere in my site's code, so it must be fetched by the original link within the Adsense-block. How can I fix this error?
According to [https://wordpress.org/support/topic/i-am-getting-a-warning-in-during-google-page-speed-test/] some plugins may interfere with Adsense but I have already tested all of my 8 plugins.
Caching plugins that could be interfering: Autoptimize, WP Super Cache
The Error disappears of course, if I remove the Adsense-code-snippets.
That's my header.php
<head>
<script src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" ></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-**************",
enable_page_level_ads: true
});
</script>
</head>
Warnings: A preload was found for "https://pagead2.googlesyndication.com/pagead/js/xxxxxxx/xxxxxxx/show_ads_impl.js" but was not used by the browser. Check that you are using the crossorigin attribute properly.
You can do nothing about it, This is a matter for Google to fix, But preloaded resources might be used in after render events.

Web page cannot load javascript files from primefaces library

I use primefaces 6.0 and Spark-layout in my project.
It works on localhost very well.
But when I upload it to the server (jboss or tomcat does not differ), sometimes the page cannot load.
It happens randomly. The page stucks while loading.
When I look the server logs :
It waits too much to log this line:
"GET /XXX/javax.faces.resource/images/preloader.gif.xhtml?ln=spark-layout HTTP/1.1" 200 17824
Also I have seen this in log :
"WARNING [http-nio-80-exec-27] com.sun.faces.application.resource.ResourceHandlerImpl.logMissingResource JSF1064: Unable to find or serve resource, components.js, from library, primefaces."
I have continued to investigate, and seen that, when the problem occurs, the page waits to load .js files from primefaces library.
Page stucks at this line in the head :
script type="text/javascript" src="/XXX/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces&v=6.0">
Other .js files cannot be loaded:
script type="text/javascript"
src="/XXX/javax.faces.resource/jquery/jquery-plugins.js.xhtml?ln=primefaces&v=6.0">
script type="text/javascript"
src="/XXX/javax.faces.resource/core.js.xhtml?ln=primefaces&v=6.0">
As a result, what can I do to get rid of this problem :)
Thanks...

When offline getting error Uncaught ReferenceError: $ is not defined(…)(anonymous > function)

I have a following javascript (It toggles visibility of my menu)
<!-- toggle visibility for filter -->
<script type="text/javascript">
$(document).ready(function() {
$("#extra-content").hide();
$("#toggle-content").click(function(){
$("#extra-content").toggle();
});
});
</script>
but when I am offline (I programme during my commute) I am getting error from this script
(index):101 Uncaught ReferenceError: $ is not defined(…)(anonymous
function) # (index):101
How I can figure out what js file to copy locally to make it work offline?
UPDATE
This is how I load jquery
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="{{ STATIC_URL }}/static/jquery/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="{{ STATIC_URL }}/static/jquery/jquery-ui.js"></script>
You will also have an additional error in the console that indicates a 404 not found.
This is the file that you need to copy locally.
Looking at the error this is almost certainly jQuery.
How Jquery is loaded ? If you get it by the cdn it's normal than you can't access it when offline.
Try to donwload it and install it locally
$ is not defined error is thrown when jquery file is not loaded.
Since you are using jQuery "$(document).ready(function(){});", you must ensure that jquery is loaded, either you copy jquery.min.js file locally or you can use HTML Application Cache feature as you are working offline. This will store your jquery.min.js file and will available untill you clear the cache.

Force browser to refresh javascript code while developing an MVC View?

Pretty straight-forward, I'm developing an MVC5 application and have noticed (lately) that my Browser appears to be caching the JavaScript code I have on the view within #section Scripts { }.
Currently I am developing with Chrome and I have tried CTRL+F5 & CTRL+SHFT+R which reloads the page, but the alert() I uncommented within the javascript code is still rendering as commented. I also tried going to my localhost through Incognito Mode as well as other Browsers (Firefox, IE) and am getting the same behavior. This is my /Home/Index.cshtml View, which is the default View which loads when the application starts. I have also tried adding some extra HTML text into the page and again the new code is not taking effect/showing.
My current Chrome version is Version 41.0.2272.118 m if anyone has any ideas what might be going on?
UPDATE:
I have gone under the Developer Tools => General Settings in Chrome and checked [X] Disable cache (while DevTools is open) and then repeatedly (with DevTools still open) tried CTRL+SHFT+R and CTRL+F5 with the same results of before where my changes are not taking effect.
UPDATE 2:
With DevTools open I have also held the Refresh button down and tried Normal/Hard/and Empty Cache & Hard Reload options all with the same result. For simplicity of testing I added an alert in the below to dispaly as soon as the page loads (and currently no alert comes up):
$(document).ready(function () {
alert("Test");
// Other Code/Functions -- No Error showing in Console
});
If you are using Bundling from MVC, you have two options to disable caching:
Use BundleTable.EnableOptimizations. This instructs the bundling to minify and optimize your bundle even while debugging. It generates a hash in the process, based on the content of the script, so your customers browsers can cache this file for a long time. It will generate a whole different hash the next time your file changes, so your customers can see your changes. The downside is that your script will become unreadable and you won't be able to debug it, so this might not be your best option.
Use System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("url", true) to resolve your script's URL, the second parameter (true) is requiring a hash to be generated with the URL, thus, preventing caching from your browser when you change the file. This is exactly the same hash generated in the first option, but without minifying.
I created a small demo showing that the second option prevents caching from happening, the trick is getting the hash generated from your script's content without minifying your script.
I created a script file called myscript.js with this content:
$(document).ready(function () {
alert('a');
});
Then I added this to my BundleConfig.cs:
// PLEASE NOTE this is **NOT** a ScriptBundle
bundles.Add(new Bundle("~/bundles/myscripts").Include(
"~/Scripts/myscript*"));
If you add a ScriptBundle, you will get a minified response again, since ScriptBundle is just a Bundle using JsMinify transformation (source). That's why we just use Bundle.
Now you can just add your script using this method to resolve the script URL with the hash appendend. You can use the Script.Render
#Scripts.Render(System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/bundles/myscripts", true))
Or the script tag:
<script src="#System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/bundles/myscripts", true)"></script>
Either way will generate a URL with a hash to prevent caching:
After editing my file:
You might want to add a no_cache variable after your script url like:
<script src="js/stg/Stg.js?nocache=#random_number"></script>
If you manage to put a random number to the place i indicated, the browser will automatically download the latest version of the script after an F5
A quick trick that solves this problem consists of opening the script file in a new tab, then refresh it on this page.
If you happen to have Chrome dev tools open it will even refresh it there.
From dev tool you can even easily right click-open in new tab the script.

Forcing cache refresh after modifying head.js javascript calls?

I am using head.js and using the below file to initiate the javascript file calls:
<script src="/scripts/load.js" type="text/javascript"></script>
In the load.js file I have the following code:
head.js(
{livechat: "/scripts/livechat.js"},
{jquery: "http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"},
{jquerytools: "http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"},
{slider: "/scripts/jquery.nivo.slider.pack.js"},
{prettyphoto: "/scripts/jquery.prettyPhoto.js"},
{sliderfunctions: "/scripts/slidercode.js"},
{functions: "/scripts/functions.js"}
);
My problem is, even though I removed the livechat line, the chat box is still appearing on all my website pages unless I manually clear the browser cache. My concern is that I no longer utilize the livechat service and I do not want the visitors to be confused by seeing the livechat box appear but not function correctly.
Is there any way to tell head.js that there has been a change in the files being loaded and to refresh browser cache or something?
You could put something along the lines of this:
<script src="/scripts/load.js?date=123456789" type="text/javascript"></script>
Adding a query string to this file should trick the browser into thinking it's something it hasn't seen before.

Categories