AJAX Refresh Script

RealDrift · December 11, 2007

Hi,

currently i have the following php code:

 <?php 
			  if ($inbox > 0){ echo "<a href=inbox.php target=middle><img border=0 src=images/unread1.gif align=left  width=16 height=11></a> "; 
			  }else{ echo "<img src=images/read.gif align=left width=16 height=11>"; } 
		      
			   if ($inbox > 0){ echo "<span  style=FONT-WEIGHT:bold><a href=inbox.php 
target=middle><font color=#990066>$inbox New </a></font></span>"; } ?>

all it does it display whether user has new message in inbox or not. however currently i am using <META http-equiv="refresh" content="10"> to refresh the whole frame. how can i use AJAx to refresh the data from the mysql database without reloading the whole frame?

thanks

phpQuestioner · December 11, 2007

try this:

<script language="javascript">
function createRequestObject() {

   var req;

   if(window.XMLHttpRequest){
      // Firefox, Safari, Opera...
      req = new XMLHttpRequest();
   } else if(window.ActiveXObject) {
      // Internet Explorer 5+
      req = new ActiveXObject("Microsoft.XMLHTTP");
   } else {
      // There is an error creating the object,
      // just as an old browser is being used.
     alert("Your Browser Does Not Support This Script - Please Upgrade Your Browser ASAP");
   }

   return req;

}

// Make the XMLHttpRequest object
var http = createRequestObject();

function sendRequest(page) {

   // Open PHP script for requests
   http.open('get', page);
   http.onreadystatechange = handleResponse;
   http.send(null);
   setTimeout("sendRequest()", 10000);

}

function handleResponse() {

   if(http.readyState == 4 && http.status == 200){

      // Text returned FROM the PHP script
      var response = http.responseText;

      if(response) {
         // UPDATE ajaxTest content
         document.getElementById("msgstatus").innerHTML = response;
      }

   }

}

window.onload=function() {
sendRequest('inbox-status.php'); // replace "inbox-status.php" with your php page's url
}
</script>

</head><body>

<span id="msgstatus"></span>

RealDrift · December 11, 2007

what do i do with this? lol

phpQuestioner · December 11, 2007

how can i use AJAx to refresh the data from the mysql database without reloading the whole frame?

it does what you want it to do - this is AJAX - welcome to it's world - lol.

RealDrift · December 11, 2007

i know, but where do i place it?

i am tottaly confused

phpQuestioner · December 12, 2007

put the javascipt (AJAX) code in the head of your html.
then add the "msgstatus" span to the area of you html body where you want the "new mail" image/status to appear.
change "inbox-status.php" to the url of your php page

RealDrift · December 12, 2007

how often does the script reload?

how do i change this timer?

phpQuestioner · December 12, 2007

it's currently set to 10 seconds - because that is what you had your META Refresh set to; so that is what I set it to.

look for this section of the code - this is your "timer";

setTimeout("sendRequest()", 10000);

10000 = 10 Seconds

1000 = 1 Second

RealDrift · December 12, 2007

it doesnt seem to work, perhaps you can look at the code and tell me why:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel=stylesheet href=includes/in.css type=text/css>
<style type="text/css">
<!--
.style2 {font-size: 12}
.style3 {font-size: 11px}
-->
</style>

<html>

<script language="javascript">
function createRequestObject() {

   var req;

   if(window.XMLHttpRequest){
      // Firefox, Safari, Opera...
      req = new XMLHttpRequest();
   } else if(window.ActiveXObject) {
      // Internet Explorer 5+
      req = new ActiveXObject("Microsoft.XMLHTTP");
   } else {
      // There is an error creating the object,
      // just as an old browser is being used.
     alert("Your Browser Does Not Support This Script - Please Upgrade Your Browser ASAP");
   }

   return req;

}

// Make the XMLHttpRequest object
var http = createRequestObject();

function sendRequest(page) {

   // Open PHP script for requests
   http.open('get', page);
   http.onreadystatechange = handleResponse;
   http.send(null);
   setTimeout("sendRequest()", 1000);

}

function handleResponse() {

   if(http.readyState == 4 && http.status == 200){

      // Text returned FROM the PHP script
      var response = http.responseText;

      if(response) {
         // UPDATE ajaxTest content
         document.getElementById("msgstatus").innerHTML = response;
      }

   }

}

window.onload=function() {
sendRequest('message.php'); // replace "inbox-status.php" with your php page's url
}
</script>

</head>

<body>

<TABLE

			width="110%" height="10" border="0" cellPadding="0" cellSpacing="0" bordercolor="#737373" class="thinline" id="Table1" style="LEFT: 0px; POSITION: absolute; TOP: 0px; height: 100%;" name="Table1">

			<TR valign="middle">

			  <TD width="4%" align="left" valign="middle"><span id="msgstatus" class="style2">
		      <?php 
			  if ($inbox > 0){ echo "<a href=inbox.php target=middle><img border=0 src=images/unread1.gif align=left  width=16 height=11></a> "; 
			  }else{ echo "<img src=images/read.gif align=left width=16 height=11>"; } 
		      
			   if ($inbox > 0){ echo "<span  style=FONT-WEIGHT:bold><a href=inbox.php 



ONMOUSEOUT=\"javascript:document.location.reload();\"



target=middle><font color=#990066>$inbox New </a></font></span>"; } ?>
			  </span></TD>

			  <td width="96%" bgcolor="#737373"></td>
		    </TR>
</TABLE>

</body>

</html>

phpQuestioner · December 12, 2007

try this - I did not test the first code I gave you - the code below will automatically update.

<script language="javascript">
function createRequestObject() {

   var req;

   if(window.XMLHttpRequest){
      // Firefox, Safari, Opera...
      req = new XMLHttpRequest();
   } else if(window.ActiveXObject) {
      // Internet Explorer 5+
      req = new ActiveXObject("Microsoft.XMLHTTP");
   } else {
      // There is an error creating the object,
      // just as an old browser is being used.
     alert("Your Browser Does Not Support This Script - Please Upgrade Your Browser ASAP");
   }

   return req;

}

// Make the XMLHttpRequest object
var http = createRequestObject();

function sendRequest(page) {

   // Open PHP script for requests
   http.open('get', page);
   http.onreadystatechange = handleResponse;
   http.send(null);

}

function handleResponse() {

   if(http.readyState == 4 && http.status == 200){

      // Text returned FROM the PHP script
      var response = http.responseText;

      if(response) {
         // UPDATE ajaxTest content
         document.getElementById("msgstatus").innerHTML = response;
      }

   }

}

function repeatloop()
{
sendRequest('inbox-status.php.php'); // replace "inbox-status.php" with your php page's url
setTimeout("repeatloop()", 10000);
}

window.onload=function() {
repeatloop();
}
</script>

</head><body>

<span id="msgstatus"></span>

RealDrift · December 12, 2007

nope doesnt work

it doesn't alert when a new message comes, when i manually refresh the frame the new message sign shows. When i read it the sign dissapears.

does this mean the script is partially working?

phpQuestioner · December 12, 2007

no - the AJAX script works perfectly - I tested it; must be your php code.

you can test it by creating a php script called "inbox-status.php" and in that php page; add this script and save it:

<?php

echo "Hello World!";

?>

then look at the page your AJAX script is in and you will see "Hello World!"

wait a few second; then update and save your php file to this:

<?php

echo "Goodbye World!";

?>

then look at the page your AJAX script is in and you will see "Goodbye World!" (do not reload the page - it will automatically appear in 10 seconds or less)

the PHP page your using to query your database will automatically update the PHP files content; but the above is a simulation, so you can actually see that it works.

test it out - it works perfectly for me. ???

RealDrift · December 12, 2007

yes it is my php which is wrong, hmmm

<TD width="4%" align="left" valign="middle"><span id="msgstatus"><span class="style2">
		      <?php 
			  if ($inbox > 0){ 
			  echo "<a href=inbox.php target=middle><img border=0 src=images/unread1.gif 		                         align=left  width=16 height=11></a> "; 
			  }else{ 
			  echo "<img src=images/read.gif align=left width=16 height=11>"; } 
		      
			   ?>
			  </span></span></TD>

whats wrong with the above code then? i can't figure it out

RealDrift · December 12, 2007

are you sure this script works with php and mysql databases?

phpQuestioner · December 12, 2007

you need to set you "$inbox" variable to check the database field where your store them for mysql_num_rows.

something like:

<?php

$query = mysql_query("SELECT inboxField FROM tblName");
$inbox = mysql_num_rows($query);

if ($inbox != 0)
{
echo "<a href=\"inbox.php\" target=\"middle\"><img border=0 src=\"images/unread1.gif\">"; 	
}
else {
echo "<img src=\"images/read.gif\" align=left width=16 height=11>"; 
}

?>

phpQuestioner · December 12, 2007

are you sure this script works with php and mysql databases?

positive guy - I just tested it (I run PHP on my website) - you need to work on your php script

the php forum on this site can help you further with your php script:

http://www.phpfreaks.com/forums/index.php/board,1.0.html

the ajax script I provided you work awesomely

RealDrift · December 12, 2007

the inbox variable is set, i didnt include it before:

$username=$_SESSION['username'];
$viewuser=$_GET['viewuser'];

$check = mysql_query("SELECT * FROM `inbox` WHERE `read`='0' AND `to`='$username'");

$inbox=mysql_num_rows($check);

anything wrong with that?

phpQuestioner · December 12, 2007

does it work? if it does; use it.

RealDrift · December 12, 2007

nope i have posted in php forum tho

helraizer · December 13, 2007

Didn't think it worthy of a new thread so I'll ask here. Would it be possible to do this refresh with a dynamic image? Because if it inserts it straight into the page, it comes up as gobbledy gook characters and symbols because of the raw image.. How would this be doable?

Sam

phpQuestioner · December 13, 2007

Didn't think it worthy of a new thread so I'll ask here. Would it be possible to do this refresh with a dynamic image? Because if it inserts it straight into the page, it comes up as gobbledy gook characters and symbols because of the raw image.. How would this be doable?

Sam

I am not that great with dynamic images; you might want to ask that question on the PHP forum. I suggest "MadTechie"; he is really good with dynamic image creation and manipulation.

Sign In

AJAX Refresh Script

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information