Hiding a Progress Spinner after download is complete - javascript

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!!

Related

window.history.go(-1) on Firefox vs. chromium-based browsers different behaviours with forms

This is a bit of a messy situation that I'll do my best to describe as accurately and briefly as possible.
I have been tasked to maintain an old project. The code is extremely messy and everything is mixed together (One PHP file for every page, and that file contains JS and HTML..)
In that project there is a form to insert new data into the database.
The requirement was for a confirmation page to show up after submitting the form, that reflects what the user has input. From that confirmation page the user can either confirm, which would write the data to the database, or go back to the form, and the user has to see all the data he input previously.
One of the fields is a file upload, that has to be an image. If the user decides to upload an image, a few additional fields are to be displayed and made required.
I was tasked to generate a preview for the uploaded image on the form page, and on the confirmation page.
That was easy enough for the form itself..
const [img] = imgfield.files;
if (img) {
imgplaceholder.src = URL.createObjectURL(img);
}
For the confirmation page, after the user submits the first form, I had the picture uploaded to a scratch folder, that gets scraped regularly, and had the picture displayed from there.
And I had the brilliant idea to do window.history.go(-1) for the button on the confirmation page, that should take the user back to the form.
<label class="navLink" id="changeClick" onclick="window.history.go(-1)">Change</label>
This worked fine on firefox. When the user clicked that link, the browser went back instantly to the previous page, with the user's previous entries still intact, where they could edit them and submit again.
On Chromium-based browsers however, when using this link to go back to the form, the preview of the uploaded image would disappear, and is replaced with the broken image icon, and the fields that should also appear, since the user had uploaded an image previously, also disappear.
What's even more confusing to me is that on firefox, clicking the browser's own back button and this link works exactly the same. Whereby in chrome-based browsers, clicking on the link shows this problem, but clicking on the browser's own back button does not.
So now the question is: why do chrome-based browsers act differently here, and (besides making an entire new hidden form within the confirmation page to send the data back to the form, which would be far too much effort for what this is worth) how to I get that link with history.go(-1) to act like the back button in chromium?
I hope I explained the situation thoroughly enough. I'd be glad to provide any additional details that might be of help.

Disable page loading (browser spinning) after form submit

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.

Call function in another website from a button on my site?

So, to be specific, this site: https://www.overbuff.com/players/pc/Hizu-1730
Has a button right below the "Player X hours ago" which lets you update the info on that profile.
I see that the little button has data-type refresh-button, data-action {sameurl}/refresh and data-autoclick false.
Now I tried just opening https://www.overbuff.com/players/pc/Hizu-1730/refresh but that did nothing, so I'm a bit lost.
I want to be able to click on a button on my own site that refreshes the info on the overbuff profile (so, simulate pressing that little button).
Is that possible?
Via some kind of request or cUrl or something like that?
My site is just a little collection of 6 overbuff profiles (mine and my friends) collected via cUrl, it's easier for us to check everyones profile in just a single page than going to every profile one by one on the real site.
The only problem is that, this way the profiles are not updating, as you have to manually press that button which only works on the real site.
So I would like to add an update button to be able to refresh the info via my site.
Sorry for the poor english :)
When inspecting the element, and traking the network requests, you can see that te request is made by POST

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.

how to disable F5 keyboard keys

Am doing the online cab booking services,
once user reached the successfully completed his journey,
we are showing the thank for booking and we show the booking id, some people they hit the F5
key, so page get refresh and the new entry will inserted ,
So i want to deactivate F% on my cashthankyou you page,
Thanks
Bharanikumar
You won't have much luck with this - control / detection of key presses is heavily browser dependant, and overriding standard behaviour is usually impossible.
Rather than this approach, you need to detect and appropriately handle duplicate form submission:
How to handle multiple submissions server-side
The best option is usually to find a way that don't involves tampering with browser functionality. In your case, that would be making the user submit the booking to a page that inserts the entry, and then redirects the user to a thankyou-page that does nothing more than displaying that. The user would then be able to refresh the page any amount of times, without anything dangerous happening.
You can't. This is in how the browser is coded and you can't disable it from the webpage.
You need to restructure your application to identify a refresh of this kind and not creat an additional record.
One way to do that is to check if a record was entered for the user just several seconds ago and if that is the case, not insert a new record.
Another way it to add an interstitial page that will do the adding then redirect to your confirmation page (this page is just a display page and refreshing it won't do anything).
I dont't know if you can disable the F5 but can display some kind of "are you sure" message.
This can be done using window.onbeforeunload which is called before the window reloads or gets closed.
There could be a couple of reasons they refresh the page. Maye they used their back button, double-clicked on your submit button or anything else that does the loading twice.
Here are two real solutions to your problem:
1) Put in a form field with a random number, save this number along with the booking and then check against your booking table if there already are a booking with that value. This will stop them from sending the form twice.
2) Save a cookie with the last time they completed a booking. Check this value and don't allow a new booking for i.e. five minutes.
An alternative would be to redirect your user to the thank you page, loading the ID from the session.
This way, when the user hits F5 the thank you page will load and no form submission will be attempted again.
If no booking ID is in the session when the thank you page is loading, redirect back to the home page or a suitable error page.

Categories