My web application makes changes to the CSS dynamically with Javascript, in response to user input. When the user navigates away from the updated page, then hits BACK, it reloads the page from the disk cache but the CSS changes are gone. So the page looks like it did before the user input.
Is this normal? Is there a way to get Chrome to cache the updated HTML that includes my CSS changes?
This is not related with Chrome. If CSS rule is changed by end user input (with JavaScript CSS operation) and nothing else is done, these CSS rule update (the latest CSS rules) is stored in browser memory, which is cleaned when page refreshes.
To make these updated-CSS "cached", you need to make it persistent by store it in LocalStorage (browser side) or Database in server.
Related
My website is hosted by blue host.
Whenever I modify/add text in the HTML and I refresh my webpage, the change would be reflected.
However, when I update the css file, i must clear my chrome brower cache in order to reflect the change.
This is painful as I need to constantly clear my cache. Sometimes tweaking format takes several such clearing.
Is there any way i could avoid clearing the cache but still reflect the css related changes?
You have three options:
-reload the page with cntr+shft+R
-add a dummy Parameter to your css file which you change when you need to refresh the css. E.g. .../yourpath/css.css?v=1
(In case you can use scripts such as PHP, you can use a random value for this parameter which will automatically force the css-reloading on each page refresh)
-open the developer console (F12) and disable the cache on the network tab.
I want to achieve:
I have a html page that displays an image.
which is pretty easy. [say my image file name is xyz.jpeg]
When the file changes or replaced with new content, say, the server or by some other mechanism the file is getting changed,
Now I want this modified image gets displayed in the browser WITHOUT REFRESHING the web page
So, kind of a notification system in which the browser is notified with new image, and gets displayed.
I am not expecting the exactly source code, but a direction of which tool that can be used?.
I have come across websocket, but I am not sure if this solves this purpose.
The image can be refreshed on timely manner(for eg 10 seconds) using javascript, ie request will be send to server in specified time interval, and the image will be updated, this is pretty easy to code also. Please refer this question
However this solution has got a negative impact on performance, since the number of request to be served is too high if the page is accessed by multiple users.
Hope this solves your doubt.
I see in Javascript; Sending user to another page and how to change page from within javascript references to using the window.location to switch to a new page. It is also possible to have a similar result by including a meta tag http-equiv with a refresh value.
While these work as advertised, I need something that will continue to retry in the event the host application is not available at the time the client starts up.
A cross-browser solution would be particularly appreciated.
Update:
My current solution does as suggested. Initial AJAX to verify connectivity, followed by an update of the window.location. My concern is exactly the one given - the status can change between getting the response and updating the page reference.
I could update a lower level element body.innerHtml, for example, in the page body, but prefer to change the top level element to cleanly switch over to the new page.
The purpose of the initial page is just to bootstrap a long running application that similarly uses an AJAX loop to fetch updates of both content and periodic page refreshes. The intent is to be able to drop off web display panels and have them automatically configure themselves when they are eventually connected to a network.
I have an asp.net application and am experiencing a surprising behavior.
Whenever I leave one particular page in the application, The back button starts behaving in the following way:
hitting back (which should take me to the offending page) makes the current screen flash - as if going back - but then reloads the current page instead.
It doesn't matter how I leave that page I see this effect. If I click on a link on the offending page and hit back, same thing. If I am on the offending page and type in a new address in the address bar, then hit back, same thing. It doesn't matter if I go to another page in the same application or an external application, same thing.
I tried using fiddler to see what is going on, and all that I see when I hit back, is all of the external links (css, jquery, etc) get reloaded on the current site. I don't see a 320 from the offending page at all.
Note: disabling Active Scripts hides this symptom.
Most likely the external page either is tampering with your browser history (via JS) and setting the same page as the last page in your history when the site is being loaded, or it has another page set between that redirects to the page you are seeing, and when you click back you are loading the redirect page again.
Try to disable JavaScript and see if it is still happening. If yes, try to analyse the first load of the page with fiddler and see if another page is redirecting you.
False alarm:
This is an inherited project and I hadn't read all the code. There is javascript that says:
<script type="text/javascript">
if (window.history.forward(1) != null)
window.history.forward(1);
</script>
Problem solved.
I have a situation where my page loads some information from a database, which is then modified through AJAX.
I click a link to another page, then use the 'back' button to return to the original page.
The changes to the page through AJAX I made before don't appear, because the browser has the unchanged page stored in the cache.
Is there a way of fixing this without setting the page not to cache at all?
Thanks :)
Imagine that each request to the server for information, including the initial page load and each ajax request, are distinct entities. Each one may or may not be cached anywhere between the server and the browser.
You are modifying the initial page that was served to you (and cached by the browser, in most cases) with arbitrary requests to the server and dynamic DOM manipulation. The browser has to capacity to track these changed.
You will have to maintain state, maybe using a cookie, in order to reconstruct the page. In fact, it seems to me that a dynamically generated document that you may wish to move to and from should definitely have a workflow defined that persists and retrieves it's state.
Perhaps set a cookie for each manipulated element with the key that was sent to the server to get the data?