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.
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 got a HTML page with a form. When I post, it returns a pdf based on the form data.
Is it possible to open the browser when submiting (post) the data when the user are in standalone mode?
I tried to set target="_blank" in both the form tag and on the submit button but it doesn't work.
It's not any problem if it's an a-tag link. But the problem with a link is that my form doesn't get posted (I know that I can post it trough JS but it will still be in the app).
If it isn't possible to post it with a submit button. I'll need to use a link (or another element) and with Javascript make an event that builds me the URL with a querystring with the form data. And that opens the browser and that will return me the pdf.
(However the main problem is that it isn't no way back to the app when the server give the user a pdf in app-view (standalone). And that problem isn't it any solution for what I can find. That's the reason to why I need to open it in the browser.)
What I am trying to do is load content via Ajax on a site. So suppose we have this as the main page example.com/blankpage (I have used htaccess to get rid of the .html part). Currently I have this working, I click a link on the page that directs to mysite.com/blankpage#PAGE1 and the Ajax script will load all the text from PAGE1.html and place it into a div on blankpage.
Now here is what I am actually trying to do. Pretend I have another link on the page as such: mysite.com/blankpage?action=PAGE2. Clicking on the button works and it actually does load the contents of the file, however it only does so after loading a new page. It doesn't actually load PAGE2, it loads the blankpage and then replaces the contents of the div with the contents of PAGE2, which is what I want, but without a page load/refresh.
For the past hour I have been trying to find an error in my Ajax loading script but then it occurred to me that it might be the hash tag. Do Ajax page loads NEED # or am I actually making a mistake somewhere.
I can post the code if need be.
you can try jquery load() function.
I think it's useful for your requirement.
like div has is "blankPage".
so you can do like this
$('#blankPage').load(your url);
in this load function you can return your view and put this blankPage div.
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.
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.