Disable page loading (browser spinning) after form submit - javascript

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.

Related

I want to show loading indicator whenever a server request happens from my page

My requirement is I have an ASP.NET web page which is taking some time for loading first time because it has a custom control(ascx) of grid and some other buttons. Also I have some other buttons,check boxes, print reports (ssrs report) in my web page, on click of which it will take some time to process and comeback with result. So my requirement is whenever my page load first time or any server request process I want to show loading indicator to the client user by restricting any other action in the page until the result come up and page is ready.
I have the same solution as that already mentioned in How to show Page Loading div until the page has finished loading which already there in stack over flow. But in first research I haven't seen these answer that s why I put this question. I hope it is the best solution so far.

Popup displaying on refresh

I have a form, with a code to show a popup when I press a create/edit link. Now when I do a page refresh, I get the following popup
I have managed to stop the popup from appearing when Retry is pressed, by handling it on the code behind of my aspx, but when Cancel is pressed, the page blinks (I guess it renders again?) and the popup is shown.
It doesn't go back to the server. It just goes to the javascript function that displays the popup, and shows it.
It should be noted at this point that this popup is just a <div> which can be shown or hidden.The default property of this <div> is hidden.
Please help me solve this issue and also explain why this is happening. I haven't been able to find anything on the internet explaining this issue.
When submitting a form, content may be sent with either POST or GET.
Sending with GET appends values to the address defining what webpage you are on. It could look like this:
www.domain.tld/page?value1=apple&value2=banana
Sending with POST sends the value in a hidden field that the server receives.
Clicking "Retry" will load the website with the information currently held within the POST field. Clicking cancel should display the address you are heading to without the POST content.
I hope this answers your question. If not, is there any way for you to show the piece of code that handles the POST data?
The browser saves the data in the form when you submit it, and when you refresh the page, the browser attempts to send this data again. The popup is a warning from the browser that this is about to happen, which is important since the form could be on a shopping site, so resending the data would result in accidentally buying the same things multiple times.
To fix this, you can redirect to another page once the form has been submitted, or you can add code to reset the form so the data won't be sent again.
We should follow a best practice to solve this problem. Better have a look at this. When you press the cancel button, it simply load the previous page and values will be persisted.
My understanding so far is that when you press the cancel button, the values for the page is taken from the browser's cache. I cleared the cache to test this theory. The cache isn't just storing the values of the page but also the last server response received. In my case, the last server response was to show the the popup by calling my javascript function, along with the required values, which is what it did.
Now my work around to it was to make the closing button as a server command as well, so that the final response would be to hide the popup.
Please do let me know if there is something wrong in this explanation.

Hiding a Progress Spinner after download is complete

I have a JSP, with an HTML form, where a user gives a couple of inputs. After submitting the JSP calls some server-side Java code to create a report. Based on the inputs this report could take a few seconds or a few minutes. After the Java code completes it sends ouput in the form of an Excel file back to the browser in the Response object. This gives the user the standard prompt to Open or Save the file.
During report creation I have a little animation that displays fine after submission, but after the user Opens or Saves the file, the animation remains on the screen. I want the animation to be hidden after the user Opens or Saves.
My thought was using the javascript timeout and interval functions but because of the variability of the report creation I have no idea what to set the duration for. I've tried to find ways to key off of download completion or when the user clicks on Open or Save but that doesn't seem to be possible. I'm looking for any other ideas because right now I'm stumped.
Thanks in advance!!

URL change without flicker

How can a page be reloaded with a new URL and the corresponding contents smoothly, so that the header does not flicker? For instance if on Twitter I click the menu items Home, Connect, Discover, the header stays displayed, no flicker. The only way I know this can be done is using Javascript, but Javascript cannot change URLs. What is the magic behind Twitter's website?
They are simply using ajax.
The header does not flicker because it does not change. The ajax call ask for data, and when it gets it, it inserts it into the body.
For the body,
You could use an effects function to fade in the new content if you do not want an abrupt change when it is ajaxed in.
If you want to load your static data in one upload, you can then flip through static content using the CSS display property.
You can see that the browser is not loading a new url because there is no indicator.
Also, you can see the ajax indicator for twitter is running.
To keep a history of your ajax calls use info. from this post:
For ajax - Hashes vs HTML 5 History API?
For Twitter:
They are using CSS to flip through the page as the ajax indicator and the load indicator do not light up after the initial ajax call.
You can verify that they are using history by doing window.history.back() in the console.
To change the URL dynamically see:
Change the URL in the browser without loading the new page using JavaScript
You could use history.pushState to manipulate the currient url. And reload the page with ajax functions.

jQuery ajax load a page with an automatic download

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.

Categories