I am using AJAX to get some data and fill-up the form. Data is quite large so it takes some time to get from DB and fill up in fields, so while all doing this stuff i am showing loading icon.
Now there is a submit button in a form, and we want - that form should not be submitted until that loading icon gone away. I have done this thing so far.
I am using prevent default - if user hit the submit button before AJAX done its work and that loading icon gone away, and after AJAX done its work that form got submitted.
But now issue is, if i hit submit - because of prevent default is doesn't shows loading icon in browser tab (so user might think form submit button isn't working and hit it multiple times,(we got this data from GOOGLE ANALYTICS))
but form will automatically submits, when AJAX completes it works.
Is it possible to show that "Browser Tab Loading Icon" ?
I know other things like (hide submit button and etc etc)
Here is my piece of code :
$("#formsech").submit(function(event){
submit = -1;
if ( $("#loading").css('display') == 'none' ){
submit = 1;
}
else{
event.preventDefault();
}
});
setInterval(function(){
if(submit == -1){
if($("#loading").css('display') == 'none' ){
submit = 1;
}
}
}, 100);
setInterval(function(){
if(submit == 1){
$("#formsech").submit();
submit = 0;
}
}, 100);
Any help would be highly appreciated.
If you are using AJAX, you can do simply like this:
$(form).submit(function (e) {
e.preventDefault();
$(form).css("cursor", "loading");
$("#loading").show();
$.post("/path/to/url", $(form).serialize(), function () {
$("#loading").hide();
$(form).css("cursor", "initial");
alert("Saved");
});
});
A better example using a setTimeout just for demo purpose.
$(function() {
$(".loading").removeClass("hidden").hide();
$("#myform").submit(function() {
$(".loading").fadeIn();
setTimeout(function() {
$(".loading").fadeOut();
}, 2000);
});
});
* {
font-family: 'Segoe UI', sans-serif;
}
.loading {
background: url("http://www.arabianbusiness.com/skins/ab.main/gfx/loading_spinner.gif") center center no-repeat;
width: 150px;
height: 150px;
position: absolute;
z-index: 1;
opacity: 0.5;
}
.hidden {
display: none;
}
#myform {
display: block;
position: relative;
width: 150px;
line-height: 150px;
text-align: center;
border: 1px solid #ccc;
overflow: hidden;
}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<form action="." id="myform">
<div class="loading hidden"></div>
<input type="submit" />
</form>
The setTimeout is just for mimicking the AJAX delay. The z-index will not allow the user the press the submit button.
You can use below html in your page.
<div id="overlay"></div>
The css will be
#overlay {
background-color: rgba(0, 0, 0, 0.8);
z-index: 99;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: none;
}
Before ajax call use following code
$("#overlay").show(500);
After ajax call is completed write this:
$("#overlay").hide();
Related
I am building my first web app using Flask. I'm new to html/ JavaScript/ CSS - please bear with me.
The app does the following: The user uploads an Excel file as follows:
<form method="POST" enctype="multipart/form-data">
<input type="file" name="file" id="file" />
Then they select certain parameters using dropdown lists. When the user clicks "Submit", the data is manipulated using pandas and a new file is exported in Excel.
I managed to add a spinner to the "submit" button using html and CSS. I added an event listener to my JavaScript so the spinner is activated when the button is clicked. At the moment, the spinner runs indefinitely, however I would like the spinner to stop and the button text to revert to "submit" once the operation is finished, i.e. the export is complete. Does anybody know how I can accomplish this?
Here is my html:
<button type="submit" id="submit" class="button">
<span class="button__text">Submit</span>
</button>
Here is my CSS:
<style>
.button {
position: relative;
padding: 8px 16px;
background: #009579;
border: none;
outline: none;
border-radius: 2px;
cursor: pointer;
}
.button:active {
background: #007a63;
}
.button__text {
font: bold 20px "Quicksand", san-serif;
color: #ffffff;
transition: all 0.2s;
}
.button--loading .button__text {
visibility: hidden;
opacity: 0;
}
.button--loading::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border: 4px solid transparent;
border-top-color: #ffffff;
border-radius: 50%;
animation: button-loading-spinner 1s ease infinite;
}
/*animate spinner - spin from 0 to 1 turn*/
#keyframes button-loading-spinner {
from {
transform: rotate(0turn);
}
to {
transform: rotate(1turn);
}
</style>
Here is my JavaScript:
<script type="text/javascript">
(() => {
const elem = document.getElementById('submit');
elem.disabled = false;
elem.addEventListener('click', e=> {
elem.classList.add('button--loading');
});
})();
</script>
Basically, your frontend (the HTML/Javascript) needs some way of knowing when "the export is complete". Depending on your definition of "export" and "complete".
At the most rudimentary level, you could have the frontend poll the server every second after the upload starts, and have the server return some kind of status as to what the state of the process is. This could be as simple as:
GET /status/1234
> {"status": "IN_PROGRESS"}
which, when the "export is complete" switches to:
> {"status": "COMPLETE"}
And when the frontend receives the COMPLETE status, it removes the spinner. Notice the 1234. You will need some way of identifying the upload in progress. One way to do this would be to assign it a random id when you first accept the form, so the initial POST /upload returns > {'id': 1234} which the client can then use for the subsequent polling.
If "export is complete" actually only means that the file is finished uploading, you could still use a polling method, but a much slicker way is to use the client (web browser) method of determining how many bytes have been sent (see this SO answer).
I have a form that uses very basic input validation using javascript onSubmit before the server side processing begins in PHP.
However, due to the time the PHP script takes to process (uploading images etc) I am trying to use the same onSubmit function to display a "please wait" notice if it passes validation. Or is there a better way? I tried in PHP, but the processing has to complete before I can echo any output. Anything I have tried from other SO posts stops the validation process.
<form id="form" method="post" action="" onsubmit="return Validate(this)" autocomplete="off">
Current Javascript Example
function Validate(myForm) {
var error = '';
// Example Filed
if(myForm.name.value == '') {
error += '- Please enter your Name.\n';
}
// Show Error Notice
if(error != '') {
error = 'The form has not been completed correctly, please check the following:\n\n' + error;
alert(error); // Displays Error
return false;
} else {
// Allows the form to move on to PHP Processing
// Need to Show Waiting Notice here
return true;
}
}
CSS & HTML Waiting Notice (Initially Hidden)
<style>
#processing {
display:block;
position: fixed;
top: 0;
left: 0;
background: rgba(255,255,255,0.8);
width: 100%;
height: 100%;
}
#popup {
width: 300px;
min-height: 160px;
padding:20px;
background-color: #fff;
border: 5px solid #06C;
text-align: center;
color: #202020;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -100px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
#popup img {
height:60px;
width:60px;
}
</style>
<div id="processing">
<div id="popup">
<img width="60" height="60" src="../waiting.gif" />
<h3>Please Wait!</h3>
<p>The form is processing...</p>
</div>
</div>
Any help would be appreciated
All you need to do is have the "...Please Wait..." element already present in the document, but hidden and then show it when the submit takes place. You do this by applying a CSS class to the element in the HTML, which hides it initially and then remove that class when the form is valid.
A couple of side notes...
Don't use inline HTML event attributes (onsubmit, onclick, etc.). That is how events were registered 20 years ago and there are many drawbacks to using them. Unfortunately, because most people just copy what others have done, the use of this approach just will not die. Instead, follow modern standards and use .addEventListener().
Also, don't ever name an element or a variable name as name is a property of the Global window object and the use of that name can cause problems in the code.
// Get references to the DOM elements that your code will need
var frm = document.getElementById("form");
var wait = document.getElementById("processing");
var userName = document.getElementById("txtName");
frm.addEventListener("submit", validate); // Set up events the modern, standards-based way
// All event handlers will automatically be passed a reference
// to the event object for that event
function validate(evt) {
var error = '';
// Example Filed
if(userName.value == '') {
error += '- Please enter your Name.\n';
}
// Show Error Notice
if(error != '') {
error = 'The form has not been completed correctly, please check the following:\n\n' + error;
alert(error); // Displays Error
evt.preventDefault(); // Stop the event
} else {
// Allows the form to move on to PHP Processing
// Need to Show Waiting Notice here
wait.classList.remove("hidden"); // Remove the hidden class
}
}
#processing {
display:block;
position: fixed;
top: 0;
left: 0;
background: rgba(255,255,255,0.8);
width: 100%;
height: 100%;
}
#processing.hidden { display:none } /* This hides the message by default */
#popup {
width: 300px;
min-height: 160px;
padding:20px;
background-color: #fff;
border: 5px solid #06C;
text-align: center;
color: #202020;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -100px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
#popup img {
height:60px;
width:60px;
}
<form id="form" method="post" action="#" autocomplete="off">
<input type="text" id="txtName">
<input type="submit">
</form>
<div id="processing" class="hidden">
<div id="popup">
<img width="60" height="60" src="../waiting.gif" />
<h3>Please Wait!</h3>
<p>The form is processing...</p>
</div>
</div>
On your javascript validation, you could let the user know the image is loading by showing a simple message.
<div class="loading" style="display:none;">Loadin ...</div>
function Validate(myForm) {
var error = '';
// Example Filed
if(myForm.name.value == '') {
error += '- Please enter your Name.\n';
}
// Show Error Notice
if(error != '') {
error = 'The form has not been completed correctly, please check the following:\n\n' + error;
alert(error); // Displays Error
return false;
} else {
// Allows the form to move on to PHP Processing
// Need to Show Waiting Notice here
// show the user the image is loading
$('#form .loading').show();
return true;
}
}
After it loads you may remove the message once you get a response from the server.
$('#form .loading').hide();
When i click on a link (a href), only background loader appears. But the defined link is not opening, the screen strucks in the loader screen. In this screen i cant access any function. I have been trying this for weeks, but no positive results. Please help me to find the error in the added codings
$(document).ready(function() {
var loading = $('<div>').prop('id', 'loading');
loading.html('<div id="stretch"></div><img src="assets/img/ring.gif" style="repeat:no-repeat;" /> Loading...');
//FOR TESTING
//alert( loading.text() ); //FOR TESTING ONLY!!!
$("#cmd").click(function() {
loading.appendTo('body');
var event = $(document).click(function(e) {
e.stopPropagation();
e.preventDefault();
e.stopImmediatePropagation();
});
// disable right click
$(document).bind('contextmenu', function(e) {
e.stopPropagation();
e.preventDefault();
e.stopImmediatePropagation();
});
});
});;
#loading {
background-color: white;
background-color: rgba(1, 1, 1, 0.7);
bottom: 0;
left: 0;
position: fixed;
right: 0;
text-align: center;
top: 0;
}
#loading * {
vertical-align: middle;
}
#stretch {
display: inline-block;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li></i>Application</li>
.
Well of course it's not doing anything, when you stop the default event from triggering (clicking).
e.preventDefault();
This prevents the default action from happening. However, you are going to hit issues when you load 3rd party websites using Javascript.
My divs are not showing when I click on submit.
I can get them to show if I do a window.onload() but the divs have to have display: none; by default;
How can I make it so these divs show when I hit submit because my form takes about 30 seconds to process, it has a lot of fields.
HTML
<div id="overlay-back"></div>
<div id="overlay">
<div id="dvLoading">
<p>Please wait<br>while we are loading...</p>
<img id="loading-image" src="img/ajax-loader.gif" alt="Loading..." />
</div>
</div>
Submit Button
<div class="form-buttons-wrapper">
<button id="submit" name="submit" type="submit" class="form-submit-button">
Submit
</button>
</div>
CSS
#overlay {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
z-index : 995;
display : none;
}
#overlay-back {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
background : #000;
opacity : 0.6;
filter : alpha(opacity=60);
z-index : 990;
display : none;
}
#dvLoading {
padding: 20px;
background-color: #fff;
border-radius: 10px;
height: 150px;
width: 250px;
position: fixed;
z-index: 1000;
left: 50%;
top: 50%;
margin: -125px 0 0 -125px;
text-align: center;
display: none;
}
jQuery
<script>
$(function() {
$('#submit').on('submit', function() {
$('#dvLoading, #overlay, #overlay-back').prop("display", "block").fadeIn(500);
});
});
</script>
The reason I am displaying none by default in css because if someone has javascript disabled I do not want any inteference
Please provide your own custom form validation as I have no context to supplement that. This should be placed in a document ready OR in a setInterval JavaScript function (the latter typically yeilds much better results).
$('button#submit').click(function() {
If (formValid === true && $('#dvLoading, #overlay, #overlay-back').not(':visible');)
{
$('#dvLoading, #overlay, #overlay-back').toggle(500);
$('button#submit').toggle(500); //hide this to prevent multiple clicks and odd behavior
} else {
var doNothing = "";
}
});
Try this:
<script>
$(function() {
$('#submit').on('click', function(evt) {
evt.preventDefault();
$('#dvLoading, #overlay, #overlay-back').fadeIn(500);
});
});
</script>
The fadeIn will make the div visible.
.prop sets the properties of the element, not the style.
Changed to use the click event
I'm trying to do Dropbox like login button.
There was a thread dropbox login popup method in jQuery? but I couldn't do something on this.
I want it to be opened when I press the login button same as dropbox.com
This is an example code. Now it works on hover. But I want on click. I tried focus but couldn't succeed.
<div id="login">
Login
<div>
Login Form
Lorem Ipsum blablbalbabababa lbablaabalbalba
</div>
</div>
And
div#login {
position: relative;
float: right;
height: 20px;
padding: 5px;
}
div#login:focus {
background: rgba(0,0,0,.2);
}
div#login div {
position: absolute;
top:30px;
right:0;
width: 200px;
height: 100px;
padding: 10px;
background: rgba(0,0,0,.2);
visibility: hidden;
}
div#login:focus div {
visibility: visible;
}
This is the demo of this code http://jsfiddle.net/sXmAe/
Probably it is easier with Jquery but I don't know how.
Simply eliminate this rule:
div#login:focus div {
visibility: visible;
}
And then this piece of jQuery will make it visible on click:
$("#login a").click(function(){
$("#login div").css("visibility","visible");
});
You can see it action here: http://jsfiddle.net/jPPew/2/
(I added a margin so the JSFiddle "Result" banner wouldn't get in the way of the click.")
EDIT: If you require that the behavior also "close" the login area if you click elsewhere, try something like this: http://jsfiddle.net/jPPew/6/
$("#login").click(function(e){
$("#login div").css("visibility","visible");
e.stopPropagation();
});
$("body").click(function(e){
$("#login div").css("visibility","hidden");
});
You can try this http://jsfiddle.net/sXmAe/50/