Refresh browser when div contents changed - javascript

within the <div> I embedded an <img>, sometimes I have the problem that the browser didn't reload when new img came. So I refresh the browser within a specific time intervall. But how can I force the browser automatically refresh, when <div> contents changed? I use Internet Explorer and don't want to use Ajax or Jquery. It would be great if we find a solution in Javascript or Html only.
<body onload="JavaScript:AutoRefresh(5000);">
then in <script> section I set to window.location.reload(1)
For this solution is not user-friendly.
Hope you find a better solution.

Try on change of Image?
<img src="./img.src" onchange="javascript:window.location.reload();"

Looks like this means you are changing the image on the webserver, and want the browser to automatically reload. But the problem is that the browser would not know when the image has changed, unless you reload.
You can use a http request to poll the server.
It is not clear what way the image is updated, but I'd do this:
any time the image is changed put the hash or last update timestamp under a URL on my server
use XMLHttpRequest (e.g.: https://stackoverflow.com/a/4033310/ ) to poll the hash/timestamp from the server every x seconds or minutes
compare the received data with the last known value
reload the page if it is different
This way the page would only reload, when the image has changed.

Related

Browser window specific variable in javascript

I want to store a specific value for each browser window.
This value should stay the same after a reload.
An example:
I want to open 2 tabs of my page, both of them should be able to show the data of two different accounts. E.g. gmail has the ability to swap between 2 logged in pages. And even if you refresh the tab, the visible account stays the same.
At the moment I have only one possible solution in mind:
Store the value in the url
Make sure that every link on this page pass this value to the next page
But this way seems to be a little bit "dirty". It gets broken if I miss a single link.
Is there a way to use a hidden input instead, or some other js features?
Btw: I'm using aspx and IIS as web server.
I think you should use cookie, they stored in browser and stay after reload.
Set cookie and get cookie with JavaScript

F5 not fully refreshing my page

I've got a pretty complex webpage which uses alot of Ajax and Javascript. My problem is that this Javascript manipulates the background-picture in a div (scrolling it to the sides). When I hit F5 (mostly in FF) this only causes a "halfway" refresh. The content refreshes, but the background in the div stays in the same position. This causes problems because the offset is calculated wrong (the script thinks the background is at starting-position, but actually, it's moved).
Is there any way of forcing a full refresh to get rid of this problem? I am using jQuery for my Javascript. A workaround would be to check the offset at load, but this would be a pain in the ass to implement at this point.
Any ideas?
EDIT: The picture causing this problem is not loaded using javascript or ajax. It's pure, static html.
Try to use "Ctrl + F5", it will force your browser to reload every content in the page.
Why don't you just reset the state of the background to it's default when the page loads?
Is there a reason why that wouldn't work?
$(document).ready(function(){
// Set whatever value you're changing to make the background move to it's default
$('.changing-background').css({
'left' : ?px,
'background-position' : ?px ?px
// Whatever you're using
})
})
Add a unique string to the end of your javascript file path e.g. test.js?nocache=99999999. This will make the browser think it's a non-cached file and download a new copy every time.
It's meaning more data transfer, but unless you want to implement a client side fix I don't think there's much choice here.
If you just pressed F5 it will load the contents from the cache.So use " Ctrl+F5 " .It refreshes the browser cache also at the time of reload.
In Mozilla Firefox, Ctrl+Shift+P starts private browsing and nothing gets cached. or you can set cache:false to your ajax requests like
$.ajaxSetup({
cache:false
});
add no-cache
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
further information can be found here

Does changing the src attribute of an image stop the image from downloading?

Let's say that I have two accordion tabs. The first one loads hundreds of images and is open when the page loads.
I want to be able to stop the images from downloading if the user clicks on the second accordion tab. Will changing the src attributes of the images via js stop the images from downloading? Or do the requests just continue until completion and not show up on the page?
I have a script that loads the SO logo in exactly 3 seconds that I had made for another question.
http://alexturpin.net/slowimage/slowimage.php
Using it, I tried to reproduce the problem:
var img = new Image();
img.onload = function() {
alert("loaded");
};
img.src ="http://alexturpin.net/slowimage/slowimage.php";
setTimeout(function() {
img.src = "";
}, 1000);
http://jsfiddle.net/Xeon06/RrUvd/1/
From what I gather, in Chrome, the onload doesn't get fired, but the browser keeps on showing a spinner and if I go on the network tab and find my image and check it's content, it's there. So my answer would be no, the image still loads, at least in Chrome.
This is an interesting problem, I suggest you try and test it in as many browsers as possible and write some kind of blog post on it.
Your browser asks for that image with a specific HTTP GET request, as
specificated in HTTP protocol. Once it asks for it, the http server
starts the transfer.
So, it is between the browser (as http client) and the http server.
Since http protocol does not takes into account the option to abort a
transfer, the browser should implement a out-of-standard mechanism to
programmatically abort the connection. But since this is not specified
in any standard, i think you won't find any way to do that with
javascript or any client side code.
You can try window.stop() to stop all requests, but not individual
ones.
If you wanted to stop a single request for a large image, what you
could do is load the image into a document within a hidden IFRAME. The
onload event of the IFRAME can be used to load the image into the main
document, by which time it ought to be cached (presuming you have the
caching directives configured to do so).
If the image is taking too long, then you can access the IFRAME's
contentWindow and issue a stop command to that.
You need to have as many IFRAME elements as there are images that can
be requested simultaneously.
Taken directly from here & here.
Not sure if it will, just like the other comments. But I can suggest am approach that will work well. Assuming not all the images are visible, just set the right src attribute when they become visible.
So default the url to myGray.gif when it is not visible and set it to myImage.jpg when it does come into view.
When you close the current accordion, you can set the image source back to your lightweight gif again. (this prevents a bug related with gc on some versions of the ipad).

Persisting DOM changes after clicking a link and then pressing the Back button

I'm using jQuery's appendTo() method to append items to an unordered list. When the user clicks another link, and then presses the Back button, the appended items disappear. Is there a way to persist those changes using JavaScript?
When hitting BACK, some browsers cache te previous (originally loaded) page. If you can regenerate the page with a fresh reload you can use cache-control 'no-store, no-cache, must-revalidate' to force this on a BACK.
Chrome wants no-store, and IE wants must-revalidate. For other browsers (and w3c) no-cache is enough.
Once your user navigates away from your page, the DOM is discarded. When your user hits the back button, they get a fresh copy of the HTML from your server (or from their cache).
So, you have one of 2 options:
The correct way would be to save the DOM state in a cookie (or session), and then on page load check if that cookie is present, and if so, append that info.
Since you have not provided enough information, I'm not exactly sure what you're trying to accomplish. So, if a cookie is not good enough, you might have to attach a click event to the link, and instead of just sending them off to that link, you'll first store the DOM in a variable var theDOM = $('html').clone(true);, and then load in the HTML for that link with an AJAX request.
You'll also have to inform the browser that your history state has changed. That can be accomplished with HTML5's new History API. In older browsers you can do something similar via the hash part of the URL (although in older versions of IE even that won't work). Then, when the user clicks the back button, you'll reload that DOM from your variable...
Either way, this is WAY too complicated. You're probably looking at this the wrong way. What are you trying to accomplish?
If you dont have any problem to use iframe then you can use it to preserve the previous data. On iframe load event write a js code which will take the preserved data within it and append it to desired element. This way when you navigate to next page and press back button the iframe will load and then the load event handler will do its job,

Detecting whether or not file has been served to the browser?..kinda

I have a button which sets window.location to a php file which generates a feed which is then downloaded. However, as the files vary in size due to what data is put into the feed it can sometimes take a while from the click of the button to the file dialog popping up.
What I would like to be able to do is click the button and display a loading.gif until the dialog / file is complete.
Any ideas would be cool!
Cheers
I'm not really sure why you need to check the size of the file at all? If you use ajax to dynamically do the get/post, and all you are doing is trying to show a loading icon while this is happening, its fairly simple to throw up an asynchronous activity indicator. For instance, with jquery:
$("#loading").ajaxStart(function(){
$(this).show();
});
$("#loading").ajaxStop(function(){
$(this).hide();
});
$("#feeds").load("feeds.php?id=89734258972347895");
The above code sets a DOM object with id "loading" to show and hide when any asynchronous request has been initiated and stopped. .load(url) loads the content of the url into the div #feeds. If you are setting the content-disposition: attachment header with php, it will automatically initiate a file download window, even though it has been loaded asynchronously into a div. This is also possible without jquery of course, there's just a bunch of browser compatibility javascript and its not as easy as simply subscribing to the ajaxStart and ajaxStop events to show and hide your loading img.
Josh
before setting window.location you could display a hidden div with your gif
It's old school, but this can be done very easily with server push
<?php
$separator = "end_of_section_marker";
header('Content-type: multipart/x-mixed-replace;boundary=$separator');
print "\n--$separator\n";
print "Content-type: text/html\n\n";
// Send placeholder message here
print "--$separator\n";
ob_flush();
flush();
// Start long processing here
print "Content-type: text/html\n\n";
// send data here
print "--$separator--\n";
?>
Just adjust the content-types for the data you're sending. $separator can be any value so long as it does not appear in the data being sent.
A method I've used in the past works like this...
Set window.location to a loading page, and pass the destination page in the querystring. The loading page should display an animated gif or whatever you prefer to demonstrate that processing is taking place. The loading page should IMMEDIATELY redirect to the destination page passed in the querystring (along with any other applicable querystring parameters).
EDIT: The loading page should redirect to the destination page using javascript (set window.location to the URL provided in the querystring). This is an important point, because if you redirect on the server-side the loading page won't get displayed.
EDIT 2: If your loading page is a php file, you can check the to-be-downloaded file's size and display an estimated download time to the user (along with an animated "loading" gif), or whatnot.
The destination page should render with buffering enabled (call ob_start() before you render any content). With buffering enabled, nothing is sent to the browser until the entire page is rendered. Meanwhile your loading page from step 1 will continue to be displayed.
Just make the RSS generating script show image you want (output image's HTML, then flush output buffer and start data generation). At the end of the data generation do:
<?php
print '<script>window.location = "http://www.newlocation.com"</script>'
That's all.
You will have to use AJAX to communicate to the server to discover the exact size of the file you are downloading. Then you have something to test against. There is no way to know the size of the expected payload from the client side only.
Is it possible for you to use an iframe to load the feed and then check the readyState of the iframe/document using an interval? So the process would be:
Load a window containing an iframe of width and height 100% and a loading.gif over the iframe.
Set a timer checking for the iframe.contentWindow.document.readyState property
Once readyState == complete, show the save file dialog.
One downside is, for most browsers the PHP file would need to be on the same domain (on IE you can just check the readyState property of the iframe).

Categories