Solved

Javascript simple loading image

Posted on 2007-12-05
12
3,731 Views
Last Modified: 2013-11-19
Hi

I am trying to show a loading animated gif when a form is submitted, and pause the submission for about 4-5 seconds.  I have some code, but when it is submitted, the form 'freezes' for 4 seconds, then it will quickly show loading image and submit it.





function loading(millisecondi)
{
		document.getElementById('loading').innerHTML = '<img src="/loading.gif">';
    var now = new Date();
    var exitTime = now.getTime() + millisecondi;
 
    while(true)
    {
        now = new Date();
        if(now.getTime() > exitTime) return;
    }
}

Open in new window

0
Comment
Question by:logicjb
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
12 Comments
 
LVL 18

Accepted Solution

by:
Morcalavin earned 168 total points
ID: 20411614
Couldn't you just use window.setTimout to send the transmission at a particular time instead of blocking your entire script execution(and your browser)?
<script type="text/javascript">
function delay(myform)
{
document.getElementById('loading').innerHTML = '<img src="/loading.gif">';
window.setTimeout(function(){myform.submit()}, 4000);
}
</script>
 
<form action="whatever.html">
<input type="text" value="I am a text box"/><input type="button" value="Submit" onclick="delay(this.form)"/>
</form>

Open in new window

0
 
LVL 18

Expert Comment

by:Morcalavin
ID: 20411626
Stuffed the button code.  It should be:

<input type="button" value="Submit" onclick="delay(this.form)">

Open in new window

0
 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 166 total points
ID: 20411641
Yes. You cannot loop inside a function to emulate a "wait"

Instead use setTimeout

I assume you do not have an onSubmit on the form tag if you do you need to tell me

1. change the submit button to

<script>
document.write('<input type="button" value="submit" onClick="loading(this.form.name,3000)">')
</script>
<noscript>
<input type="submit">
</script>

2 change your function to

function loading(formname,milliseconds) {
  document.getElementById('loading').innerHTML = '<img src="/loading.gif">';
  setTimeout('document.forms["'+formName+'"].submit()',milliseconds);
}



Alternatively use a hidden iframe, show a div on submit and have the form result hide it again
0
Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20411684
Morcalavin you also stuffed the passing of the form

The function that does the submit does not know what form was passed when it eventually executes

As you can see from my code you need something like

var theForm = ""
function delay(myform) {
  theForm = myform;
  document.getElementById('loading').innerHTML = '<img src="/loading.gif">';
  window.setTimeout(function(){theForm.submit()}, 4000);
}


I have never used a function inside a setTimeout - I normally pass a functioname in quotes...
Interestingly yours works too
0
 
LVL 18

Expert Comment

by:Morcalavin
ID: 20411723
@mplungjan

No I didn't.
<input type="button" value="Submit" onclick="delay(this.form)">

This button passes the form object to be submitted.

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20412093
Yes you did

function delay(myform)
{
document.getElementById('loading').innerHTML = '<img src="/loading.gif">';
window.setTimeout(function(){myform.submit()}, 4000); <<<<<<<< when THIS anonymous function executes, there is no more "myform" object available to it
}
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20412167
No you didn't... How on earth does THAT work???

<script>
function delay(myform) {
document.getElementById('loading').innerHTML = 'loading';
window.setTimeout(function(){ if(myform) { alert('submitting '+ myform.name);  myform.submit()} else alert('What form???')}, 4000);
}
</script>

<form name="form1" action="http://www.google.com/search">
<input type="text" name="q" value="javascript scope">
<input type="button" onClick="delay(this.form)" value="Delayed submit">
</form>
<span id="loading"></span>
0
 
LVL 18

Expert Comment

by:Morcalavin
ID: 20412286
Using an anonymous function inside another function extends the scope of the variable to the anonymous function itself.  For instance, this works too.  Click submit, then the text box, then submit2.  You get 'bar' every time, even though foo appears to go out of scope when it's wrapped in the anonymous function.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
<script type="text/javascript">
function delay(myform)
{
      var foo = 'bar';
      document.getElementById('id').onclick = function(){alert(foo)};
}

</script>
 
<form action="whatever.html">
<input id="id" type="text" value="I am a text box"/><input type="button" value="Submit" onclick="delay(this.form)"/>
<input type="button" value="Submit2" onclick="document.getElementById('id').onclick()"/>
</form>
</body>
</html>
0
 
LVL 18

Expert Comment

by:Morcalavin
ID: 20412300
I don't know why the scope inside an anonymous function carries over the way it does.
0
 
LVL 16

Assisted Solution

by:LeeKowalkowski
LeeKowalkowski earned 166 total points
ID: 20568558
It's called a 'closure', http://www.jibbering.com/faq/faq_notes/closures.html.  They're not easy to spot all the time, and can lead to serious memory leaks particularly in Internet Explorer, especially when accidentally created over large collections.

--
Lee
0
 
LVL 1

Expert Comment

by:Computer101
ID: 20953179
Forced accept.

Computer101
Community Support Moderator
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
replacing inline javascript with jquery 4 63
Why is my $_POST not going to results page 10 69
Boolean 13 51
Natural height and jquery 6 40
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

751 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question