ajax auto save

I am trying to do auto Save form through ajax in every 3 minutes . I wish to show a message to the user when auto save is happening.

save message should come at the bottom right  corner.  How to display a quick save message at the bottom  right corner  ?
Here is an example how it would look ...

https://drive.google.com/file/d/0B9xlQxJdq-uFam5fTjItcFNVdzFaMVhaMVpUa2h3ZlY3RTFn/view?pli=1

my web project  has jsp,jquery
cofactorAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
Here is a sample. The sample uses a 5 second cycle with 2 second display time for demo purposes but you can easily change that.
<!doctype html>
<html>
<head>
<title>Test</title>
<link href="css/bootstrap.css" rel="stylesheet" />
<style type="text/css">
form {
	position: relative;
}
.msg {
	position: absolute;
	padding: 10px;
	background: rgba(0,0,0,.8);
	top: 50%;
	left: 50%;
	line-height: 40px;
	margin-top: -30px;
	margin-left: -25%;
	z-index: 1000;
	width: 50%;
	color: white;
}
form {
	background: #f0f0f0;
	padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
	<div class="col-lg-3"></div>
	<div class="col-lg-6">
		<form id="theform">
			<p>Some fields and whatnot here</p>
			<p>Some fields and whatnot here</p>
			Input <input type="text"/>
			<p>Some fields and whatnot here</p>
			<p>Some fields and whatnot here</p>
			Input <input type="text"/>
			<p>Some fields and whatnot here</p>
			<input type="submit" class="btn btn-primary" />
		</form>
	</div>
	<div class="col-lg-3"></div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.js"></script>
<script type="text/javascript">
var msg = setInterval(function() {
	console.log('Running');
	createMsg();
}, 5000);

function createMsg()
{
	var msg = $('<div/>').addClass('msg').html('Saving the data...');
	$('#theform').append(msg);
	setTimeout(function() {
		$('.msg').remove();
	}, 2000);
}
</script>
</body>
</html>

Open in new window

Working sample here
cofactorAuthor Commented:
I want the auto save quick message  at the bottom right corner . of the page...Can it be done ?
Codrut TambuSr. Software Developer EngineerCommented:
Sure, you can.
Just using Julian's solution change the css class like:
.msg {
	position: absolute;
	padding: 10px;
	background: rgba(0,0,0,.8);
	bottom: 10%;
	right: 5%;
	line-height: 40px;
	margin-top: -30px;
	margin-left: -25%;
	z-index: 1000;
	width: 50%;
	color: white;
}

Open in new window

or you could change it however you want it in order to fit your needs.
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Get the Guide
Julian HansenCommented:
Sample updated to position box bottom right - just change the .msg style as required to position where you need.
cofactorAuthor Commented:
@julian,

its not working ... I want the message  at the very bottom right corner of the page.
Julian HansenCommented:
cofactorAuthor Commented:
option 2

Could you please post the code.  

( N.B: message should vanish once the auto save is completed )
Julian HansenCommented:
Could you please post the code.
 
You can do  a view source on http://www.marcorpsa.com/ee/t880a.html - but have attached

( N.B: message should vanish once the auto save is completed )
I have implemented a timer to simulate this - if you look at the above URL and wait 2sec after the message appears you will see it does disappear - just change that code with your code for doing the save.
t880a.html
cofactorAuthor Commented:
Here is some part of the code ...

This is not working.  I dont see the message on the screen ..... What is the issue here ?  

style:
--------------
<style>
<!--
.ajax-auto-save-msg {
	position: absolute;
	padding: 10px;
	background: rgba(0,0,0,.8);
	bottom: 5%;
	right: 5%;
	line-height: 40px;
	z-index: 1000;
	width: 200px;
	color: white;
}
-->
</style>

Open in new window


JS
-----------
       
var msg = $('<div/>').addClass('ajax-auto-save-msg').html('Saving the data...');
      	alert("msg="+msg);  // this prints object
      	$('body').append(msg);  // I dont find the message on the screen !!!!!

Open in new window

Julian HansenCommented:
Difficult to say without seeing it in the context of your page.

Using your posted code works perfectly in this sample
<!doctype html>
<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
.ajax-auto-save-msg {
	position: absolute;
	padding: 10px;
	background: rgba(0,0,0,.8);
	bottom: 5%;
	right: 5%;
	line-height: 40px;
	z-index: 1000;
	width: 200px;
	color: white;
}
-->
</style>
</head>
<body>
Somethign to make the page work
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
	var msg = $('<div/>').addClass('ajax-auto-save-msg').html('Saving the data...');
    $('body').append(msg);  // I dont find the message on the screen !!!!!
});
</script>
</body>
</html>

Open in new window

Online version here http://www.marcorpsa.com/ee/t886.html

So something in your page is preventing that message from showing - we would need to see the full page to say why.
cofactorAuthor Commented:
>>>>Online version here http://www.marcorpsa.com/ee/t886.html

If  I have the scrollbar in page    and if I scroll down ..... then message will disappear....Can it be fixed ?
cofactorAuthor Commented:
https://jsfiddle.net/codrut/yb5azx1t/3/

if there is scrollbar  in the page ...and I scroll down message disappear.
Julian HansenCommented:
Change position: absolute to position: fixed

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
cofactorAuthor Commented:
Excellent
Julian HansenCommented:
You are welcome.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JSP

From novice to tech pro — start learning today.