Firefox/IE cached page on startup only shows AJAX content - javascript

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!

Related

Django: How to make an API call just before browser tab close?

I am using Django v1.10 for an application where in need to send an API call just before browser close through crude javascript (don't want to use any library for sake) preferably. I've read about window.unload and window.onbeforeunload. The first one didn't seem to work at all. The second can work but it also gets executed when there is reload or redirection to another page (it works as it should but that is what I don't want). I've tried using SESSION_EXPIRE_AT_BROWSER_CLOSE of Django which works only when a user has totally exit out of the browser (no browser process running). I've also seen answers on the web where people have suggested to open another window/tab of the browser through JS as the tab closes.
So in precise words, I want to make an API call just before browser tab close (not in any other situation).
Please help!

How to apply JavaScript changes in Firebug?

I am playing around with a JavaScript code in Firebug and I would like changes to take effect in that page. Especially when there is code inside jQuery's $.ready() function.
Some kind of refreshing the page without losing of what has been edited. Is there any way to do that?
Page changes made via Firebug or via Javascript do not persist from one page load to another. Each time a page is loaded, the original HTML, CSS and JavaScript is parsed and loaded (from cache or from the server). Any prior changes will not be there.
The only way for a dynamic page change to be still present after a refresh is for you to save the changed state to a persistent location and then rebuilt the appropriate page content from that state each time the page is loaded.
But, if you make a change to the page and store some state in a cookie, in local storage or on your server, then you can have JavaScript that runs each time the page loads that gets that state from wherever you stored it and then applies the appropriate change to the page. If you're saving the state on the server (on behalf of this particular user), then you could even have the serve modify the page contents before it is served to the browser.
You can type JavaScript code in the Firebug command line and see changes take effect on the page. You can do the same in the Firefox, Chrome, Opera and Safari DevTools.
Changes to pages done via Firebug do not persist. After a page reload the original sources will be loaded again (from the server or the browser cache).
Currently Firebug doesn't allow you to edit the code of the loaded scripts directly.
Though you can execute JavaScript code within the context of the page by using the Command Line:
Or for longer scripts you can use the Command Editor:
But again, code you executed there will be gone as soon as the page is reloaded.
To make permanent changes to the JavaScript code of a page you need to have access to the server and make them there.

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.

Chrome History API problems

I'm having problems with a website is Chrome.
Most of the site uses ajax/xmlhttprequest for pages loads and the history API to enable the back button. Only the page content is changing with the request, the menu etc are never reloaded. This just re-reuns the ajax request for the previous page. This all works fine until someone clicks the back button after viewing the blog. The blog isn't loaded with ajax, it's just a standard link.
In Firefox if I go to the blog then press back the site loads correctly. The main page with the navigation loaded and so is the page to be viewed within it.
In Chrome however if I press the back button from the blog the 'outer' page isn't loaded, only the contents of the ajax request is. You may need to view it to fully understand.
Is this a bug in Chrome or my work? It seems I can't return to a page that was partially loaded using xmlhttprequest as only the requested item is loaded.
The site is here: http://www.basmooarc.com
Thanks
Ric
short answer
Add a Cache-Control: no-store HTTP header for XHR responses.
long answer
I'm pretty sure this is a bug in Chrome. I found the exact same bug in my app, and it works fine in Firefox but breaks in Chrome. I think the issue is that Chrome caches the XHR response and serves it from the cache when you press the back button. My app uses Etags, but Chrome does not bother to check the Etag. It just uses the cached response, which is missing all the outer content. The best solution I've come up with so far is to add no-store to the cache control header for XHR responses.
You can see the behavior through Chrome's net-internals page. Type chrome://net-internals in the URL bar, open the Events tab and go through the steps to reproduce your bug. When you go to a non-ajax page and then press the back button, you'll see a URL_REQUEST entry for the URL of the page you're trying to go to, but Chrome just checks the cache and that's it. Contrast that with a normal request for that URL. The normal one will have a cache check, followed by an HTTP_TRANSACTION_SEND_REQUEST section, which is where Chrome makes the actual HTTP request.

Firefox reloads javascripts

I am a beginner web developer and here is my problem:
In short:
I keep getting similar message in Firebug for all the javascripts I include in the page:
GET http://localhost.:33085/Scripts/jquery.form.js?_=1284615828481 200 OK 1.01s
In details:
I am loading a webpage using AJAX . This page contains references to some java scripts. It also contains some embedded javascript code. Firefox keeps reloading the referenced java scripts each time I navigate to these pages which seems to take time. My questions are:
These scripts are already referenced in the page that has the where I load this page using AJAX. if I remove the references from this ajax loaded page, I start getting '$ is not defined'. Is there away to avoid that error other than referencing these scripts in the AJAX loaded page?
How can I stop firefox from reloading those pages and start using cached version?
Why is it so slow on firefox? I don't seem to see such perf issues on IE or Chrome?
Thanks
The best approach is to ensure that the initial page that you first access loads the required scripts and then subsequent ajax requests only load the content that you need (i.e. the references to the scripts is not in the html returned by the ajax request). There are server side frameworks to help you achieve this but without knowing your server technology I cant recommend a specific solution.
Firefox may be slow due to Firebug, with full debugging enabled in firebug it can slow you web pages down.

Categories