By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,795 Members | 1,235 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,795 IT Pros & Developers. It's quick & easy.

AJAX automatic page refresh (with php pages)

kelleyvanevert
P: 3
Hello everyone,

This question is often asked, and I know there are lots and lots of answers that I could be using, but I just want a clear good answer.

I am making a website (for playing a game called Go).
It has a page for each game of course.
I'm making the website in PHP and MySQL, I know that for 'real-time' games another solution would probably be better, but I'm learning to master php and MySQL.
The game is shown via the <canvas> tag (using php and mysql to write the javascript, with in its turn writes the <canvas>).

Now it can happen that the game develops in one browser, but the old game board is still shown in the other.
I want to solve this issue using AJAX page refreshing.
I think it's possible to refresh the game every like 10/20/30 seconds, without the page reloading, so the page also doesn't go back to the top every refresh, but stays at it's scroll position.

The clearest answer to my problem i found here:
http://aleembawany.com/2005/09/01/ajax-instant-tutorial/
...now all I really have to do is add an automatic timer, so the div containing the game board automatically refreshes.

...Could someone help me, pretty much step by step? ( I may know a bit about html/php/mysql/css/design and stuff, but I REALLY REALLY suck with javascript. My javascript is usually just copy/paste work... )

Cheers!
Kelley van Evert
Oct 5 '08 #1
Share this Question
Share on Google+
4 Replies


acoder
Expert Mod 15k+
P: 16,027
For the timer, use window.setInterval(). If you get stuck, post your code.
Oct 6 '08 #2

kelleyvanevert
P: 3
Well, you see:

I'm using a javascript function in the <head>, to write to the <canvas> tag.
The tutorial I link to, see above, uses getElementById, but <script> doens't support an id (I think?).
...so how do I reload the data into the head?
Oct 6 '08 #3

kelleyvanevert
P: 3
This is a part of the <head>, and <body>:

Expand|Select|Wrap|Line Numbers
  1.         <?php
  2.             // displayPageType_game -> 475
  3.             // this is where the javascript is loaded that writes to the <canvas> tag...
  4.             $canvasId = "gameBoard";
  5.             $canvasSize = 475;
  6.             $dotSize = 3;
  7.             $lineSize = 1;
  8.             $lineColor = "#bbbbbb";
  9.             $radiusPixAdjust = -1;
  10.             $extraBorder = 1;
  11.             displayBoard($gameid, $canvasSize, $canvasId, $dotSize, $lineSize, $lineColor, $radiusPixAdjust, $extraBorder);
  12.         ?>
  13. </head>
  14. <body onLoad="canvasDraw();">
  15.  
... and here is the canvas:
Expand|Select|Wrap|Line Numbers
  1.             <canvas id="<?php echo $canvasId;?>" width="<?php echo $canvasSize;?>" height="<?php echo $canvasSize;?>">
  2.             You are using a browser that doesn't support the &lt;canvas&gt; tag.
  3.             </canvas>
  4.  
Oct 6 '08 #4

acoder
Expert Mod 15k+
P: 16,027
A script tag can have an ID. There's no JavaScript in the code that you posted above. Post that too.

Note: If you set the src of a script tag, it will execute the code within the source file.
Oct 6 '08 #5

Post your reply

Sign in to post your reply or Sign up for a free account.