Solved

Display a processing image while the submit button is clicked

Posted on 2014-12-08
6
1,147 Views
Last Modified: 2014-12-14
Hi,

I have successfully created a Web Application which takes inputs from the users and creates their accounts on different devices based on their location. This whole process takes around 60 to 90 seconds. The whole time the users think that nothing is happening and refreshes the page, so I want to display an processing image which shows that some kind of processing is happening and users wait. I haven't found a good example on google. If any one can provide me any or a link which shows I can achieve the same would be helpful.

If you are providing the jquery code then kindly provide the complete jquery code.

Thanks in advance.
0
Comment
Question by:Vipin Kumar
6 Comments
 
LVL 16

Expert Comment

by:rbudj
ID: 40486657
http://cssload.net/

This is a generator for CSS generation of a "progress bar". Untested but the idea is to display as a <div> loads.

http://hayageek.com/jquery-progress-bar-example/

This example has a demo and shows all code.

Not sure what search terms you are using but you can find plenty of examples by searching for "progress bar" or "progress bar generator"
0
 
LVL 1

Author Comment

by:Vipin Kumar
ID: 40486704
These both examples are serving my purpose.

My purpose is after the user fills in the form and clicks the submit button, a processing image should come up showing that it is processing the request and user needs to wait. Once the processing is done, the processing image should disappear and the result page be visible.
0
 
LVL 13

Expert Comment

by:Edwin Hoffer
ID: 40486780
Hello leovipin2,

I have the code for what you are looking:

Use the tag just belo <body> tag

<script type="text/javascript">

function check()

{

$("#checking").show();

}

</script>

Open in new window


Use the below tag in your submit button <input> code

onClick="check();" 

Open in new window


Use this code below <input> submit button code, after the closing tag:

<div id="checking" style="display:none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: #f4f4f4;z-index: 99;">
<div class="text" style="position: absolute;top: 45%;left: 0;height: 100%;width: 100%;font-size: 18px;text-align: center;">
<center><img src="load.gif" alt="Loading"></center>
Checking Please Wait! <Br>Meanwhile Please <b style="color: red;">BE ONLINE</b>
</div>
</div>

Open in new window


Hope this will help you. Also i have attached the load.gif image with this.

Thanks
Edwin

load.gif
0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 108

Expert Comment

by:Ray Paseur
ID: 40487958
Here is how I've done it.
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/A_14519-A-jQuery-Progress-Bar.html

Assuming you're at a current level of PHP, there are some built-in functionalities that you might want to take a look at.
http://php.net/manual/en/session.upload-progress.php
0
 
LVL 1

Accepted Solution

by:
Vipin Kumar earned 0 total points
ID: 40490401
Thanks Ray for your input, but I was able to resolve the same before I could read your comments.

@Edwin, your inputs were also not able to resolve my issue, the code that I implemented is provided below.

The below is jQuery code:
jQuery(function($) {
            
    $("#overlay").css({
        opacity : 0.3,
        top     : 0,
        left    : 0,
        width   : $(window).width(),
        height  : $(window).height()
        });

    $("#loading").css({
        top  : ($(window).height() / 3),
        left : ($(window).width() / 2 - 160)
        });
        
    $('form#install').submit(function(e) {
        $('input[type=submit]', this).attr('disabled', 'disabled');
        $('#overlay, #loading').show();
        return true;
        });
});

Open in new window


The below is the code that I need to put after the submit button:
Also add the id="install" to form tag
<div id="overlay"></div>
<div id="loading">
<h3>Processing!!!!</h3>
<br>
Please wait... while we add the MAC Address to the Database!!! It can take few minutes!!!
</div>

Open in new window


The below is the css code:
#overlay{ 
	display: none;
	position: fixed;
	background: #000;
	z-index: 2000; 
}

#loading{ 
	padding: 10px 10px 10px 60px; 
	width: 400px; 
	height: 75px; 
	background: url('../images/ajax-loader.gif?1312925608') 10px 50% no-repeat white; 
	position: fixed; 
	display: none; 
	z-index: 3000; 
}

#loading h3{
	margin: 3px 0 0 0; 
	padding: 0; 
}

Open in new window

0
 
LVL 1

Author Closing Comment

by:Vipin Kumar
ID: 40498669
I was able to find a solution before anyone else would provide a solution
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

744 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now