Nice Please wait Loading message

Softacid
Softacid used Ask the Experts™
on
How to add a nice message after the submit button is clicked till the post page is loaded a message like please wait loading we searching for the best options for you ?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
jQuery has a nice plugin:
http://malsup.com/jquery/block/

Check the examples:
http://malsup.com/jquery/block/#element

Author

Commented:
Is nice but how i set to disappear when the other page load and appear when the submit button clicked?
To make it appear, there are several solutions depending on your needs
(e.g. you want to block the whole page ? just the form ? etc.)
That's explained in details in the example codes.

I would call the code on the callback function on the submit event.
E.g.
$('#myForm').submit(function() {
     $('div.formWrapper').block({
                message: '<h1>Submitting the form</h1>',
                css: { border: '3px solid #a00' }
     });
     // your code
});

It's usually used when you submit a form through ajax. Once your ajax has been completed, you call e.g.
$('div.formWrapper').unblock();

If you aren't using ajax, you don't need to unblock as a new page will load. However, in some browsers you may have a blank screen as the loading page ? To test ...
Angular Fundamentals

Learn the fundamentals of Angular 2, a JavaScript framework for developing dynamic single page applications.

Author

Commented:
Thank you .. i tried something like attachment but no luck :(



index.html
Here you are
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery Block UI</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js"></script>
<script type="text/javascript" src="http://malsup.com/jquery/block/jquery.blockUI.js?v2.31"></script>
<script type="text/javascript">
$(document).ready(function() {

$('#myForm').submit(function() {
     $('div#formWrapper').block({
        message: '<h1>Please wait ...</h1>',
        css: { border: '3px solid #a00', width: '300px', height: '100px' }
     });
     // your code
	 return false;
});

});
</script>
</head>
<body>

<div style="width:300px;height:100px;border:1px solid #000;" id="formWrapper">
	<form id="myForm" method="post" name="myForm">
		<input name="submit" type="submit" value="Submit"/>
	</form>
</div>

</body>
</html>

Open in new window

Author

Commented:
Great thank you is working now.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial