I’m currently developing a webtool for a game called ‘Eve Online’.
This game has an ingame browser and support fully all HTML, CSS, PHP and Javascript languages without any problem.
For this project I’m using PHP and Ajax because of the fact that I don’t want to refresh my page each time. I would like to refresh it automatically every 5 seconds.
So to do a small test I wanted to show the server time and refresh that every second.
This is my code:
<!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>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<title>Eve Online - Tactical Fleet Tool</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function loadXmlHttp(url, id) {
var f = this;
f.xmlHttp = null;
if (window.XMLHttpRequest) // && !f.ie||/^http/.test(window.location.href)
f.xmlHttp = new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari, others, IE 7+ when live - this is the standard method
else if (/(object)|(function)/.test(typeof createRequest))
f.xmlHttp = createRequest(); // ICEBrowser, perhaps others
else {
f.xmlHttp = null;
}
if(f.xmlHttp != null){
f.el = document.getElementById(id);
f.xmlHttp.open("POST",url,true);
f.xmlHttp.onreadystatechange = function(){
f.stateChanged();
};
f.xmlHttp.send(null);
}
}
loadXmlHttp.prototype.stateChanged=function () {
if (this.xmlHttp.readyState == 4 && (this.xmlHttp.status == 200 || !/^http/.test(window.location.href)))
this.el.innerHTML = this.xmlHttp.responseText;
}
var requestTime = function(){
new loadXmlHttp('member.php', 'timeDiv');
setInterval(function(){
new loadXmlHttp('member.php?t=' + new Date().getTime(), 'timeDiv');
}, 1000);
}
if (window.addEventListener)
window.addEventListener('load', requestTime, false);
else if (window.attachEvent)
window.attachEvent('onload', requestTime);
</script>
</head>
<body>
<div id="header">
<div id="headercontainer">
<a href="http://www.eveonline.com">
<img style="border:0px;" alt="EVE Online" src="images/header.jpg"/>
</a>
</div>
</div>
<?php
session_start();
if($_SESSION['username'])
{
if($_SERVER['HTTP_EVE_TRUSTED'] == 'No')
header('eve.trustMe:http://localhost/EveOnline_FleetManager/::Please trust me!');
else
{
$charname = $_SERVER['HTTP_EVE_CHARNAME'];
?>
<div id="menu">
<ul>
<li>You are currently logged in with: <?php echo $charname ?></li>
<li>Add Character to account</li>
<li>Make a fleet</li>
<li>Edit Account Details</li>
<li>Logout</li>
</ul>
</div>
<div id='timeDiv'>
<?php include "test.php"; ?>
</div>
<div id='overview'>
<h2 style="text-align:center;">Fleet Overview</h2>
<table id='fleet_table' border="1" align="center">
<tr id='fleet_table_header'>
<th>Fleetname</th>
<th>Started by Pilot</th>
<th>Join</th>
</tr>
<tr id='fleet_table_data'>
<td>iLLogicaL Pwn Fleet</td>
<td>21:00 09/01/2012 by iLLogicaL</td>
<td>Join</td>
</tr>
</table>
</div>
<?php
}
}
else
die("You must be logged in!");
?>
</body>
</html>
In my test.php page I only have an echo which returns my server time.
This bit of code gives me following result.
http://i42.photobucket.com/albums/e326/kartingfreak/20120116201252.jpg
So the server time is updating correctly but as you can see apperently other div’s are being refresh’ed too and are being placed inside that ‘timeDiv’.
What am I doing wrong?
Thx in advance.
As I’m reading it, it looks like you’re loading member.php from member.php?
If you create for example time.php which only outputs the time (and nothing else), and then load that using AJAX, does that work?
Edit: Looks like you already have a file that returns time (test.php) – would loading that file in the ajax call work?