Detecting if a file has been sent to the browser? .. kinda
I have a button that sets window.location to a php file that generates a feed which is then loaded. However, since files vary in size due to what data is placed in the feed, it can sometimes take a while from clicking the button until the file dialog appears.
What I would like to do is click the button and display load.gif before the dialog / file finishes.
Any ideas would be great!
Greetings
source to share
I'm not sure why you need to check file size at all? If you are using ajax to dynamically create a get / post, and whatever you do is trying to show the loading icon while it is happening, its quite easy to expose an asynchronous activity indicator. For example, with jquery:
$("#loading").ajaxStart(function(){
$(this).show();
});
$("#loading").ajaxStop(function(){
$(this).hide();
});
$("#feeds").load("feeds.php?id=89734258972347895");
The above code sets the DOM object with id "loading" to show and hide when any asynchronous request has been initiated and stopped..load (url) loads the url content into the #feeds div. If you set content title: attachment in php, it will automatically initiate the file upload window even if it was loaded asynchronously in the div. It's also possible without jquery, of course just a bunch of javascript compatibility browser and it's not as easy as just subscribing to the ajaxStart and ajaxStop events to show and hide your img load.
Josh
source to share
This is old school, but it can be done very easily with a push server
<?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 customize the content types for the data you send. $ separator can be any value as long as it does not appear in the submitted data.
source to share
The method I've used in the past works like this ...
- Set window.location to the download page and pass the landing page in the query string. The download page should display an animated gif or whatever you prefer to demonstrate that processing is taking place. The page loads are followed by an IMMEDIATE redirect to the destination page being passed in the query string (along with any other relevant query string parameters).
EDIT: The download page should be redirected to the landing page using javascript (set window.location to the url provided in the query string). This is an important point because if you are redirecting the server side, the download page will not be displayed.
EDIT 2: If the download page is a PHP file, you can check the file size to be downloadable and display the estimated download time to the user (along with an animated GIF "download"), or whatnot.
- The landing page should render with buffering enabled (call ob_start () before you render any content). If buffering is enabled, no page is sent to the browser until the entire page has been rendered. In the meantime, your download page from step 1 will continue to display.
source to share
Is it possible to use an iframe to load a feed and then check if the iframe / document is ready with an interval? So the process will be as follows:
- Load a window containing an iframe with 100% width and height, and load.gif above the iframe.
- Set a timer to check iframe.contentWindow.document.readyState property.
- After finished ReadyState == show the save file dialog.
One drawback is that for most browsers the PHP file must be in the same domain (in IE you can just check the readyState property of the iframe).
source to share