cofactor

asked on 6/22/2015

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

JSPJavaScriptAJAX

Last Comment

Julian Hansen

8/22/2022 - Mon

Julian Hansen

6/22/2015

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

cofactor

6/22/2015

ASKER

I want the auto save quick message at the bottom right corner . of the page...Can it be done ?

Codrut Tambu

6/22/2015

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.

This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.

rwheeler23

Julian Hansen

6/22/2015

Sample updated to position box bottom right - just change the .msg style as required to position where you need.

cofactor

6/22/2015

ASKER

@julian,

its not working ... I want the message at the very bottom right corner of the page.

Julian Hansen

6/22/2015

you mean like this

http://www.marcorpsa.com/ee/t880.html
Or like this?

http://www.marcorpsa.com/ee/t880a.html

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.

cofactor

6/22/2015

ASKER

option 2

Could you please post the code.

( N.B: message should vanish once the auto save is completed )

Julian Hansen

6/23/2015

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

cofactor

6/24/2015

ASKER

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

All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat

William Peck

Julian Hansen

6/24/2015

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.

cofactor

6/30/2015

ASKER

>>>>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 ?

cofactor

6/30/2015

ASKER

https://jsfiddle.net/codrut/yb5azx1t/3/

if there is scrollbar in the page ...and I scroll down message disappear.

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.

ASKER CERTIFIED SOLUTION

Julian Hansen

7/1/2015

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.