I have an ASP.NET 3.5 web application written in VS 2010. I have an aspx with a script reference to a .js file that resides in a Scripts folder.
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/HeaderControl.js" type="text/javascript"></script>
Within the .js file I'm using jQuery to do some various operations, one of which was simply a debugging statement that used alert to spit out a value on the page so I could see what it was.
if ($) {
$(document).ready(function () {
$("input[id='q']").click(function($e) {
alert("clicked");
});
});
}
This all worked great until I went to remove the debug statement (the alert "clicked"). Upon completely removing it from the .js, I rebuilt the project, hit F5 to run it on my localmachine, but as soon as I clicked upon the input tag above the alert still popped up and said "clicked". I tried one thing after another trying to get the web app to realize that the .js had been changed, but it kept displaying the alert every time that I'd click on the input tag. I finally decided to rename the .js to something completely different, at which time the web app realized that the .js had been changed and it quit displaying the alert when I'd click upon the input tag.
So why was this .js file being cached? It's a very annoying behavior and I'd love to know what exactly was causing it. Any help would be appreciated. Thanks!
EDIT:
Browser was IE7. I didn't check to see if it did it in Mozilla as well. Regardless, I've done at least a 100 different .js files and I've never noticed this behavior before. The only difference for me is that this .js is in a web app, whereas usually I'm creating them in ASP.NET web site projects.
You need to Shift + Refresh, or, just clear your browser's cache.
This is normal behavior:
Javascript and CSS files do not even check for a new version (an If-Modified-Since request) if the old version is still valid according to the cache headers in the response sent the first time.
I believe that if you put in any query string, even just ?, at the end of the url (i.e., Scripts/jquery-1.4.1.min.js?) some browsers (Firefox at least) will change to check for a new version of the file every time like it will for images. This could be useful during development.
Some developers will also append a version to the file (?123) so that they can cause the browser to ignore the cache completely when a new version of a web app is released. I'm not sure how effective this is if you already have a question mark at the end, since it will be looking for an updated version anyway (again, not sure about all browsers).
Related
I have bootstrap in an ASP.NET MVC application. I changed one single value in the bootstrap.css file and now it's not updating. When I actually view the source file in debug mode, it also appears as though I have updated nothing. I have had an issue before where it didn't update upon deployment, and in that case I had to delete the minified file, so I also tried deleting every bootstrap file (aside from the scripts) except bootstrap.css, but still it is as if I never updated it even in debug mode. I used to be able to change the file and the screen would live update in debug mode. It's like somehow I totally locked it but I don't know how.
Starting with the basics, have you definitely hit CTRL + F5 (as opposed to just F5) when viewing the page to ensure that you're not viewing a cached version of the page? I've had a similar issue where, even though changes to a stylesheet are usually picked up when a page is reloaded, sometimes you need to force the cache to refresh to view the page correctly.
I'm hosting an ASP.NET website on Local IIS (not IIS Express), and as soon as I save a change to a .css file in Visual Studio, the change immediately appears in browser windows that use that file (or after mousing over the window in Chrome), without clearing caches and refreshing.
Why do the changes appear immediately?
Opening the .css file itself (not a page using the file) in the browser shows a more expected result: saving the file in Visual Studio does not change what I see in the browser until I refresh the .css file.
As it turns out, I had Browser Link enabled in Visual Studio, and with it, CSS Auto-Sync. This opens up a port on the local machine and uses SignalR to communicate with the browser window about 400 times per second, including any CSS changes needed.
For more information, see these topics:
.net localhost website consistently making get arterySignalR/poll?transport=longPolling&connectionToken= calls
How can I disable __vwd/js/artery in VS.NET 2013?
This probably happens due to caching. when you open the css itself, it retrieves a new copy from the server, but when you open a page that uses the css file, the css file is being cached as the page's resource and the browser just shows the cached resources until you force it to reload them.
a trick i learned to fix the issue, is to link the css file to the aspx page and include a random query string to the linking, that way it tricks the browser to think that its a new resource and reload it from the server anyway.
like this:
<link href="../stylesheets/MyCSS.css?<%=DateTime.Now%>"
rel="stylesheet" type="text/css" />
we use the aspx preprocessor directive <%=DateTime.Now%> to append the current time as a query string, to ensure the link is always different.
Dont forget the question mark between the css filename and the preprocessor directive
I'm working on a .Net/ASP project and my responsibility is to work on the design part of the application only (mostly changing css, js, images, and cshtml files)
I'm working directly on the server, so my app is not running in visual studio or locally or any environment where I can rebuild the app.
That being said, any changes I make to the website takes about 45 minutes before it shows up (I do clear browser cache every time as well).
Is there any way I can manually clear the application cache or rebuild it on the server so my changes start showing immediately?
This is something I added to the we.config but still not helping:
<caching>
<outputCacheSettings enableOutputCache="false"/>
</caching>
Well, if I'm not mistaken the cache you're targetting is not about this kind of resources as they're simply not processed by .NET. This outputcache is rather about the final HTML rendered. So I don't think that's where you should be looking. But there may be some kind of proxy somewhere caching those resources aswell.
To avoid client/server caching problems with CSS and javascript, I usually add a time ticker to every request avoiding them to be cached client-side. It should also override any "server caching" of those resources, and I would advise testing it manually before putting an automatic solution in place. so, if you're including js file that way :
<script src="/mypath/myscript.js"></script>
you could just do that :
<script src="/mypath/myscript.js?123></script>
and see if you get the changes in the file immediately now. If yes, just automate the addition of that number (ideally a timestamp so it's always different on each request) to every javascript/css inclusion you make...
I'm just starting to play with Durandal, using the starter kit. I've added a very simple new view/viewmodel combination (essentially a copy/paste of an existing one from the sample) and mapNav()'d the route.
The problem is happening when I try to refresh my browser...the new view simply does not appear. It's not in the nav bar, nor can I navigate directly to the view by typing in the address bar. I know the code is (or should be?!) correct because if I go to the page in a different browser, everything appears as it should.
Is there some browser caching that Durandal is doing somehow? Sometimes F5 or Ctrl+F5 works to refresh, sometimes it doesn't. I also can't deep-link to a specific 'page'. Ie:
http://localhost:52625/#/newpage just gives me a blank
What am I missing?
The option that I use in Chrome is to open developer tools and right-click on the refresh button. There is an option for 'Empty Cache and Hard Reload' which always fixes this issue for me. I don't know the equivalent in IE but try this and see if it fixes your issue.
Most browsers will cache modules returned via RequireJS, which is how Durandal obtains its modules and view models.
CTRL+F5 doesn't help because that just refreshes the initial page - all the modules are still requested using javascript (RequireJS), so they are usually pulled from cache first.
I've found it's best to disable caching in your browser's developer tools. Doing so will ensure that all network requests are loaded directly from the source and not from cache.
See this question for additional information: Debugging when using require.js cache
Another solution is configure RequireJS to set its urlArgs property: https://stackoverflow.com/a/8479953/91189
This solution works ok, but makes it harder to debug, at least in Chrome, because breakpoints are lost every time the module is loaded, since it's technically a different file being requested each time.
I am curious to know how asp.net bundling works.
I know we've to add the all scripts and css and images to the bundle so that browser will initiate single request for all the resources.
I 've some confusion how the pages will refer these bundled resources from client browser.
Let's take a look at what happens when we use the bundling in System.Web.Optimization.
In this example I used the "Empty ASP.NET MVC 4 template" and grabbed the latest "Microsoft.AspNet.Web.Optimization" package from nuget.
I then proceeded to register 2 javascript files. One for jquery and another for bootstrap.
public static void RegisterBundles(BundleCollection bundles)
{
var javascriptBundle = new Bundle("~/bundles/javascripts")
.Include("~/Scripts/jquery-{version}.js")
.Include("~/Content/bootstrap/js/bootstrap.js");
bundles.Add(javascriptBundle);
}
Now that we have our setup done, let's see what happens when we view the page.
You can see that both the javascript files were just included as we would normally do. This is what happens when you have the "debug" flag set in your web.config.
Let's turn this to false and see what happens now.
Now what we see is a single reference was added but with a very unique looking location. By clicking on it, we see that it spits out a minified and combined version of both of the javascript files that were referenced in our bundle.
This funny query string parameter v=loMmcAiXrKwMoVsM8Ok8Q5jVmuFQUI3fiiRVJQC33Hs1 is a reference to our content and we can see that no matter how many times we hit the website, it's going to stay the same. (i.e. refreshing multiple times).
Let's see what fiddler says about the reference to our javascript files.
We can see that the response is cachable. The cache expiration has been set for "Wed, 26 Mar 2014 06:49:06 GMT". Almost a year from today.
Subsequent requests to the resource will get read from the browser's cache.
"This HTTP/304 response indicates that the existing cached response remains fresh. Cache-lifetime headers on a HTTP/304 response may be used to update the cached response's freshness."
If you require any more information, see also http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification