We Keep Coding

Firefox/IE cached page on startup only shows AJAX content

I have a webapp that uses AJAX calls to load HTML snippets in various places. Note that the webapp also simulates regular navigation with the use of history.pushState function (not sure it has anything to do with my problem but I still mention it).
Problem:
Whenever I exit the browser with a tab displaying my webapp and restart it again, the browser does not trigger a regular HTTP request to load the whole page. It simply uses a cache mechanism to load the response of the latest HTTP request. In my case, if the last request happens to be an AJAX call, then the browser will only load the HTML snippet without css, js nor the rest of the HTML.
Note that the problem appears in Firefox. In IE, the whole page can be reloaded if you accept the execution of scripts when being prompted. Chrome works fine as it loads the entire page.
Question:
Is this a normal behavior and how can I prevent it (i.e. make it work like in Chrome)?
Thanks for helping!

AJAX App JavaScript Loading Issue

I am creating a complete ajax application where there is one base page and any pages the user navigates to within the application are loaded via ajax into a content div on the page. On the base page I include the various scripts that are needed for every page within the application (jQuery, jQuery-UI, other custom javascript files). Then on the various pages with the application I include a script or two for each page that contains the logic needed for just that page. Each of those script files have something that executes on the page ready event. The problem is that every time the user navigates to page1, the page1.js file is loaded. So, if they visit that page 10 times, that script is then loaded ten times into their browser. Looking at the Chrome script developer tools after running around the site I see tons of duplicated scripts.
I read somewhere about checking to see if the script has already been loaded using a boolean value or storing the loaded scripts in an array. But, the problem with that is that if I see the script is already loaded and I don't load it, the page ready function doesn't get fired for the page's javascript file and everything fails.
Is there an issue having the javascript file loaded over and over when the user visit the same page multiple times?
I did notice looking at the network traffic that every time we visit the page, the script is requested with a random number parameter (/Scripts/Page1.js?_=298384892398) which causes the forced request for the script file every time. I set the cache: true settings on the jQuery ajaxSetup method and that removed the parameter from the request and thus the cached version of the javascript file was loaded instead of actually making a separate HTTP request for it. But, the problem is that I don't want all the ajax requests made to be cached as content changes all the time. Is there a way to force just javascript files to be cachced but allow all other ajax requests to be not cached.
Even when I forced caching on all requests, the javascript file still showed up multiple times in the developer tools. Maybe that isn't a big deal but it doesn't seem quite right.
Any advice on how to handle this situation?

About your first question:
Every time you load a JavaScript file, the entire content gets evaluated by the browser. It solely depends on the content if you can load and execute it multiple times in a row. I'd not consider it a best practice to do so. ;)
Still i'd recommend that you find a way to check if it was already loaded and fire the "page loaded" event manually within the already present code.
For the second question: I'd assume that the script is intended to show up multiple times when including it multiple times. To give an advice on how to not cache the loaded JS i'd need to know how you loaded the code, how you do AJAX and the general jQuery setup.

After doing some more research it looks like it is actually just a Chrome issue. When you load a script via AJAX you can include the following in your code to get it to show up in the the Chrome developer tools
//# sourceURL=some-script-name
The problem is that when you navigate away from the page, the developer tools keeps the script around, but it is actually not longer referenced by the page.

Advert javascript not being served correctly to the browser unless called directly?

I hope this is the right place to ask this question - I did have a look at the rest of the sites in the network but this looked like the most appropriate place.
We are having issues serving third party adverts on our websites. For various reasons our ad setup is a bit complicated - we serve third party javascript tags (AppNexus) through our own ad server (OpenX) through iframes. Currently, the third party javascript tags are not showing correctly, although they have worked just fine in the past.
Debugging this in Safari I have discovered a few things which seem to me to be a bit unusual, and I'm struggling to work out what's going on. Using the web inspector to check the third party's javascript, it appears in the web inspector as a blank file. Additionally, if I check the network tab, the headers are shown and look fine, but there is no 'content' tab with which to check the returned content. The network tab shows the request for the file as complete, and with suitable status codes (200/302):
http://cl.ly/401C1D3Y3u2G2k2k3s0x
However, if I load the file directly in the web browser, it loads fine:
http://ib.adnxs.com/ttj?id=694021&cb=[CACHEBUSTER]&pubclick=[INSERT_CLICK_TAG]
FWIW, the javascript file uses document.write to spit out either an image or another iframe. It's also worth mentioning that there are no related errors in the console - there is one relating to Google Ads, but the problem persists if I load the Ad server's iframe directly without the rest of the site.
Has anyone seen this behaviour before, where a file loads just fine directly, but is (blank / not retrieved / not parsed / whatever's going on) when called as part of another page? If so, would you be able to help me fix this?
Thanks in advance for any help you can give me - I hope this makes some sense and will be happy to provide any further information that might help me get to the bottom of this!
Ollie

I'm guessing that the third party site is filtering output from their servers based on the HTTP referer being sent in the request (a technique employed by many web hosts to thwart hot-linking content). Try putting the link to the javascript file in a clickable link on a web page on your server and click it and then see if it loads or if you get a blank page. You could also try loading a browser extension which lets you forge the HTTP Referer (such as RefControl for Firefox) and then change your refer to be your site instead of the third party's and try pasting in the URL to the browser and see if it loads.
This isn't your fault if it's what turns out to be the actual problem. It's up to the third party to configure their web host to allow for this.

Versioning Javascript Files to Prevent Unnecessary Cache Clearing

I version all of my client side JS files like "/js/myfile.js?v=3903948" so that my clients don't need to clear their browser cache to ensure they get the updated files. But every time I push an update, without fail, at least one person runs into a problem where they are running the old version and get some kind of error. I used to think that this was just them having already been on the page during the release and just needing to reload the browser, but this happened to me today when I was definitely not previously on the page. I browsed to the live site and was running the old code. I needed to do a browser refresh on that page to get the new file.
What can cause this?
PS I was using Chrome on Win7, but I have seen clients report this before on all different browsers.

If your main web page can also be cached, then the old version of that page can be requesting the old version of the JS file. JS file versioning works best if the page that actually refers to the JS file cannot be cached or has very short caching time.

I agree with jfriend00 about the webpage itself being cashed and thus requesting the old javascript version.
To prevent this, you can have the javascript file loaded by an ajax (Post) request, either requesting the server what is the accurate(latest) version number to download, or requesting the javascript itself and inserting it, e.g. in the head of the page.
Edit: see for example here

I make a quick AJAX request to the server for the version it expects them to have, then force them to refresh the page if the client's script is old.

Seems that proxy or some load balancer is serving old content instead of new. Also check IIS/webserver settings how are these files cached/expired.
You can check what is going on on the wire with tools like Fiddler.

jQuery load() throws "permission denied" error in IE

I'm loading a page through AJAX with jQuery's load() function. It doesn't work in IE8, giving the "permission denied" error. Using the IE debugger, it seems that when jQuery tries to open up the xhr, ie blocks it.
The problem is, my page has a javascript src that points to bing maps js api (which of course is in a completely different domain than mine). It seems to me that IE tries to grab this js file through a xhr, which then throws the "permission denied" error. Is there a workaround for this?
I can only remember of downloading the bing maps js myself and serving them locally.

I did more test on this. And seems the error was caused by invalid HTML structures on the page. As it is a very complicated page, there are mismatched open <div> or <table> on the page, as when I shorten the page to bare minimum, it works on IE as well. But I don't understand why it was not working when you get to the page first time, and if you refresh the page, it will work after that.

I just had this problem and I posted my solution on this thread:
jQuery AJAX problem in IE7 (possibly other versions as well)

I eventually grabbed a copy of the script and include it myself, so it is in the same domain.

You could include the script tag to the Bing Maps API in the parent document (the one making the jQuery load() call).

Just for the reference:
I experienced this error on Windows 8 with IE 10 inside my WinForms application.
In this application, I'm hosting a WebBrowser control that loads its content from a built-in web server and also communicates via window.external with my host WinForms application.
Enough keyword fishing.
Getting this error
Now what happens to get this jQuery error in my application was:
Browser has successfully loaded an URL.
I programmatically loaded another URL.
Then I immediately opened a child form with Form.ShowDialog.
After closing this form, the jQuery error was shown.
Resolving this error
I resolved the error by postponing the opening of the child form until the application was idle.
I.e. I used a Queue list inside my main form, subscribed to the Application.Idle event and inside this event handler, I processed the queue, one by one.
The new steps now were:
Browser has successfully loaded an URL.
I programmatically loaded another URL.
Put the action to open the child form inside the idle queue.
When the idle queue is processed, it opens the child form.
Then, the error was gone.
I guess, instead of using this idle processing, I also could have waited until the web browser finished its loading by subscribing to the DocumentCompleted event and show the child dialog from there.
Hope this will help someone...