Solved

Display a processing image while the submit button is clicked

Posted on 2014-12-08
6
1,568 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
[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
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 15

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
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 
LVL 110

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

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

626 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