Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

Javascript+AJAX to update players' position on a map.

timer innerHTML ajax

  • Please log in to reply
2 replies to this topic

#1 by0logic

by0logic

    CC Newcomer

  • Member
  • PipPip
  • 19 posts
  • Programming Language:C++, Objective-C, C#, PHP, JavaScript, Transact-SQL, ActionScript, Others
  • Learning:C++, Objective-C, Others

Posted 08 December 2010 - 02:39 PM

Sup guys? So I'm writing my first application using AJAX to update players' position on a map using this process:

1-Timer launch an AJAX request to read a .txt file (500ms).
2-AJAX response is copied to array*.
3-Old position is read from textbox and cleared from the grid, according to ID ($u,$i).
4-Array is copied into textbox.
5-New position is updated with player image.
*removes any free spaces from the string, in case coordonates are below 10.


When a player moves, it copies the new position into an iFrame form, submitted to a PHP file writing into the same .txt file.

Everything works great as long as we stay in the (>10,>10) area. Once any coordonates goes below 10. Coordonates DOES update into the textbox but the character image will not update anymore.

I've tried alerting(IDs) to notice any disparity but I... can't figure... :cursing: Any help is appreciated, here's the related code:

<script type="text/javascript">

function mainRefresh(){
	var $worldInfos = Array();
	$worldInfos = xmlhttp.responseText;

	document.getElementById("p1").value = $worldInfos[3];
	document.getElementById(document.getElementById("pos1").value).innerHTML = " ";
	var pos1 = $worldInfos[6]+$worldInfos[7]+$worldInfos[8]+$worldInfos[9]+$worldInfos[10]; pos1 = pos1.replace(" ",""); pos1 = pos1.replace(" ","");
	document.getElementById("pos1").value = pos1;
	document.getElementById(pos1).innerHTML = "<img src='red.gif' style='width:30px; height:30px;'/>";
}

<?php
for($i=0;$i<=19;$i++){
echo("<tr>");
for($u=0;$u<=19;$u++){
echo("<td id='".$u.",".$i."' onClick='move(this.id);' style='font-size:12px;width:30px;height:30px;'> </td>");
}
echo("</tr>");
}
?>


I've tried to take most of the unrelated code out. Just ask if you need any more info orthe full code.You can also take a look at what I have yet:
http://tim.cstj.net/...6/0615322/last/
If you click Play X, you should be able to move your dot in adjacent squares, though only the bottom right corner works correctly. Also, bugs might ruin further display, lol.

I'll stop talking and let you work, now. Thanks in advance!
  • 0

#2 by0logic

by0logic

    CC Newcomer

  • Member
  • PipPip
  • 19 posts
  • Programming Language:C++, Objective-C, C#, PHP, JavaScript, Transact-SQL, ActionScript, Others
  • Learning:C++, Objective-C, Others

Posted 08 December 2010 - 08:18 PM

Worked around the problem by defining grid ID's starting at 10,10 instead of 0,0.

While it gets the stuff done, I'd still like an explanation, if anyone has any :c-smile:
  • 0

#3 gokuajmes

gokuajmes

    CC Devotee

  • Senior Member
  • PipPipPipPipPipPip
  • 483 posts

Posted 12 December 2010 - 08:04 PM

1 thing i noticed. Your design is **. Primary reason to Ajax enable a application is to free the server of resources and provide less burden. But your application seems to make a request and fire another one when the last isn't responded by the server.
My advice attach event handlers that would fire the update via ajax rather than running the requests in loops.
  • 0





Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download