The file should be uploaded in the background via Ajax or Iframes. I should be able to detect via javascript when the upload has completed, so I can hide the loading graphic and redirect the user to a new URL. Using Jquery is fine.
Check out jQuery Uploadify
EDIT: There's also a similar question: how-to-upload-file-jquery - you could display the graphic after the upload button has been clicked and hide in the success/onerror function callback.
The jquery Form Plugin is capiable of doing Ajax upload (using an iframe i believe). It won't help you out directly with showing/hiding an loading image, but it has the appropriate events so you know when the upload starts and finishes.
Related
I have a PHP script (download.php) that receives Form Post data from the index.php page.
The processing takes a while to submit the form thus making the browser loading (the spinning wheel) for quite some long time.
Can I force the browser not to show the gray loading wheel until the form is submitted and the Post page (download.php) is done and ready to display?
For example like Youtube is doing now, they show a progress bar on top but the browser is not loading at all.
To achieve an effect similar to youtube you would need to use AJAX in conjunction with the history.pushState();.
Youtube has released a framework called spfjs for achieving the same effect that their own website has. Take a look at https://youtube.github.io/spfjs/.
If you click submit button and move to download.php, the web browzer will definitely show a loading tab. To avoid this, AJAX can be used.
Once the form data are submitted by means of AJAX, you can also receive back the download.php page contents ready to be displayed using the same AjAX response. Then hide the contents of index.php and place the received html instead. I hope it will work, for I am using this method.
Thank you.
I'm trying to have a loading indicator while a pdf is being generated. I redirect to a php page page for the generation of the pdf and then the pdf is downloaded. The thing is, you never actually leave the original page. It simply downloads the file. Is there a way of telling when the page is done processing so I can have a loading indicator appear when it starts and disappear when it's done?
Try using jQuery FileUpload plugin: https://github.com/blueimp/jQuery-File-Upload/wiki
you'll get the equivalent of a promise.done() where you can hide the loading inidicator.
On facebook, if you click on edit picture, you get a menu that offers the option Upload photo. I want to implement something similar on my website. I want the browser's file upload dialog to appear once I click on Upload photo, and I'd like it to automatically be submitted once the user selects a picture. How should this be implemented?
A colleague suggested a hidden div that has with an input field of type file, and to automatically trigger the click event when the user clicks on Upload photo, and then, to listen for the change event on the file field, and submit the form using jquery. What do you think?
I would look into a file uploader plugin such as plupload. Plupload has several nice features specifically for the uploading of images such as:
Lower the quality of the image to a specific percentage of the original
Resize the image to specific dimensions if possible
Also, I am pretty sure that plupload has a built in option to automatically submit once the user has selected an image.
I would like to add an animated loader image, which would appear after the user triggers downloading of an attachment, and disappear after the download actually starts - when the browser starts downloading the file (or displays the download confirmation dialog). The reason for it is that the attachments are quite complex documents generated on the server side, which takes some time and an animated loader would reassure the user that the page is working (and disable the download button until the download starts).
The attachment has properly set Http headers.
Here is what it looks like now:
var link = $("#download-link");
link.click(function () {
link.displayLoader();
$(document).load(link.attr("href"), function () {
link.hideLoader();
});
return false;
});
The main problem is that the load method obviously doesn't do what I would like to achieve. Is there a way to capture the actual start of downloading, triggered by window.location change?
You can do is.
Disable the whole screen until the Download is ready ( the server side processing).
And the user clicks a button download and the user directly downloads the file.
Approaches followed by most of the downloading website.
eg. Mediafire.com
PS: Disable the whole screen mean a System type dialog. disabling other options.
Why don't you show the loader image first?
If I understand correctly now, the problem is that you want the loader image to disappear once the file begins to download, and at present it disappears once the file has finished downloading?
I don't think there's an easy way to do it with jQuery, but if you drop down to using the normal JavaScript XMLHttpRequest object directly, you will get several callbacks at various stages of downloading that you can access through the readyState property.
I have a page that produces a PDF and automatically downloads the file.
I have to submit some variables to the page for the PDF be produced. Right now I have it submitting a form using jQuery like this $("#expForm").submit();. I am submitting form jQuery because I have to apply some logic before the form is submitted.
This works fine and a PDF pops up right away.
The problem is I need to have some sort of loading icon come up because the exporting page loads a lot of data and I do not want to confuse the user.
I tried doing this using $.post('exp.html', $("#expForm").serialize() ,function(data) {});
The export page loads but it does not pop up the PDF. If I open the link from Firebug's console the PDF then loads.
Does anyone know of a way to make it auto download the PDF with using the $.post()
Any help on this would be great. Thanks
return the path to pdf file in the response, and redirect in the success handler
$.post('exp.html', $("#expForm").serialize() ,function(data) {
location.href='path/to/pdf';
});
It is not possible using $.post() but you can use a hidden iframe and have a form which will submit the data to iframe.
With this approach you can show progress bar or a loading icon until the server responds. And then you can hide the progress bar on iframe's load event.