SQL PHP HTML ASP JavaScript articles and free scripts to download
PHP Ajax

Message Box in Ajax

While working in Ajax scripts we have to send data to server and then receive the response from the server. During this process the visitor has to wait for the next course of action. We must communicate to our visitor about the process going on and ask them to wait. Now there are three stages.

We must hide the message are once the page load.
Display the message asking to wait once the data is submitted.
Display the result message as returned by Server.


We will be extensible using layers by using Div tags to control the display and managing the content . Before going to these steps let us understand some common display properties frequently used.

One common way to display a Div tag

<div id=msg style="position:absolute; width:300px; height:25px;
z-index:1; left: 400px; top: 0px;
background-color: #c1c1c1; border: 1px none #000000">This is message area
</div>

To change the content of the Div tag

document.getElementById("msg").innerHTML="Job Completed ...";

To change the background color of the image Tag

document.getElementById("msg").style.background='#f1f1f1';

Border color

For more border style options read CSS
document.getElementById("msg").style.borderColor='red';
// red = #f00000; green = #00f040; yellow = #f0f000; brick= #f0c000; light yellow = #f0f0c0

To display ( visible ) the Div tag layer

document.getElementById("msg").style.display='inline';

To Hide ( make it Invisible ) the Div Tag

document.getElementById("msg").style.display='none';

To Hide after some time interval

We may require to hide the message displayed after some time. For this we will use JavaScript setTimeout function.

setTimeout("document.getElementById('f1').style.display='none'",2000)

The above commands are tested in major three browsers ( internet explorer, FireFox, and Chrome)

Visit the demo link below. We have kept a delay of 5 seconds at the server side to display the messages properly.

Demo Message Box



We have used two files msg.htm ( with all ajax code etc ) and msg.php with all server side php codes.

<html>
<body>

<script type="text/javascript">
function ajaxFunction()
{
var httpxml;
try
{
// Firefox, Opera 8.0+, Safari
httpxml=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
httpxml=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
httpxml=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
function stateChanged()
{
if(httpxml.readyState==4)
{
var myObject = eval('(' + httpxml.responseText + ')');

//document.getElementById("txtHint").innerHTML=httpxml.responseText;
myForm.reset();
document.getElementById("msg").style.background='#f1f1f1';
document.getElementById("msg").innerHTML=myObject.data[0].msg;
document.getElementById("msg").style.display='inline';
document.getElementById("msg1").style.background='yellow';
document.getElementById("msg1").innerHTML=myObject.data[0].msg1;
document.getElementById("msg1").style.display='inline';
document.getElementById("f1").style.background='#90f040';

document.getElementById("f1").innerHTML="Job Completed ...";
// To hide the display after 2 secs this ( below) line is to be added ///
setTimeout("document.getElementById('f1').style.display='none'",2000)
}
}

function getFormData(myForm) {
var myParameters = new Array();
for (var i=0 ; i < myForm.elements.length; i++) {
var sParam = encodeURIComponent(myForm.elements[i].name);
sParam += "=";
sParam += encodeURIComponent(myForm.elements[i].value);
myParameters.push(sParam);
}
return myParameters.join("&");
}



var url="msgck.php";
var myForm = document.forms[0];

var parameters=getFormData(myForm);

httpxml.onreadystatechange=stateChanged;
httpxml.open("POST", url, true)
httpxml.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
httpxml.send(parameters)
document.getElementById("f1").innerHTML="Data posted to Server ...............";

}


</script>
</head>
<body>
<div id=msg style="position:absolute; width:300px; height:25px;
z-index:1; left: 400px; top: 0px;
background-color: #c1c1c1; border: 1px none #000000">This is message area
</div>


<div id=msg1 style="position:absolute; width:300px; height:25px;
z-index:1; left: 0px; top: 0px;
background-color: #c1c1c1; border: 1px none #000000">This is message area
</div>


<div id=f1 style="position:absolute; width:400px; height:50px;
z-index:1; left: 200px; top: 84px;
background-color: #FFFF00; border: 1px none #000000">
<form name="myForm" onsubmit="ajaxFunction(this.form); return false">
userid: <input type=text name=userid onClick=hidemsg();><br>
Password<input type=text name=pw><input type=submit value=Submit>
</form>
</div>

</body>
</html>

Here is the code for msgck.php page

<?
$userid=$_POST['userid'];
$pw=$_POST['pw'];
/// Data formating from here /////
$str= "{ "data" : [";

$msg="Data Received"; /// First message to return //
$msg1="Data Processing done"; // Second message to return ///

$str=$str."{"msg" : "$msg","msg1" : "$msg1"}";
$str=$str. "]}";
sleep(5);
echo $str;
?>

Number of User Comments : 1


Google+
Mohit Aray29-10-2014
sir i need ur help m developing fee management system and i want to display a notification for those students whose fee is due or whose allow time is complited can u help me
Post Comment This is for short comments only. Use the forum for more discussions.
Name
Email( not to be displayed)Privacy Policy
1+2=This is to prevent automatic submission by spammers. Please enter the result of the sum as asked



HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us

©2000-2014 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer