Solved

Display a processing image while the submit button is clicked

Posted on 2014-12-08
6
1,283 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 14

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
How our DevOps Teams Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

 
LVL 109

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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering 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
Undefined Variable: loop_limit, Undefined Variable: number 3 17
PHP Curl to output a url 7 45
Test if unique ID is in log file 5 21
REST endpoint query with a parameter 1 16
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

792 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