I'm not 100% sure if I titled this right. But my problem as far as I know is in my AJAX that I will be posting below. First let me explain what I am trying to do. Firstly a user will go to exploretest2.php Once they are at this location a little game map will show with your avatar at your current location. "Which it does" Next they will be able to choose which direction they want to go. UP, DOWN, LEFT, RIGHT. What I want to have this do is when a user clicks on one of the directions is submits an AJAX request which goes to moveup.php, movedown.php. moveleft.php, moveright.php depending on which one they clicked on. This in return will update the screen in front of them with their new location. Now I have this working somewhat now. My problem is, its sends the request and everything updates, but it doesn't update on exploretest2.php unless I refresh the page. So here is the code.
EXPLORETEST2.php JavaScript: Moving an Image
// --CHANGE THESE IF REQUIRED--
// Initial x-position of image
var x = <?=$varx?>;
// Initial y-position of image
var y = <?=$vary?>;
// Pixels to move in each step
var inc = 10;
function Init()
{
document.getElementById('img1').style.left = x + 'px';
document.getElementById('img1').style.top = y + 'px';
}
function moveLeft()
{
x -= inc;
document.getElementById('img1').style.left = x + 'px';
}
function moveUp()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("img1").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","moveup.php",true);
xmlhttp.send();
}
function moveDown()
{
y += inc;
document.getElementById('img1').style.top = y + 'px';
}
</script>
<style>
#box
{
width: 575px;
height: 575px;
position: relative;
margin: 20px auto 0px auto;
border: 5px outset #000;
background-image: url(/maps/startgrid.png);
}
.image
{
position: absolute;
z-index: 2;
}
</style>
</head>
<body onload="javascript:Init()">
<div id="box"><img class="image" id="img1" src="av1a.png"/></div>
<a href="javascript:moveLeft()">Left</a>
<a href="javascript:moveUp()">Up</a>
<a href="javascript:moveDown()">Down</a>
<a href="javascript:moveRight()">Right</a>
</body>
</html>
<?=$user['uCord1']?> and <?=$user['uCord2']?>
<?
require 'includes/thefooter.php';
?>
MOVEUP.php
<?php
$ingame = "*";
require 'includes/qhead.php';
$cordup = 10;
$db->query( "UPDATE users SET uCord2=uCord2-$cordup WHERE uID='" . $user['uID'] . "'" );
$varx = $user['uCord1'];
$vary = $user['uCord2'];
?>
Now since everytime I post something everyone says whats in the header. The header features the first part of the layout and has an require in it for connecting to the DB. The same with includes/qhead.php Any help with this would be appreciated 150%