AJAX automatic page refresh (with php pages)

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • kelleyvanevert
    New Member
    • Oct 2008
    • 3

    AJAX automatic page refresh (with php pages)

    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
  • acoder
    Recognized Expert MVP
    • Nov 2006
    • 16032

    #2
    For the timer, use window.setInter val(). If you get stuck, post your code.

    Comment

    • kelleyvanevert
      New Member
      • Oct 2008
      • 3

      #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?

      Comment

      • kelleyvanevert
        New Member
        • Oct 2008
        • 3

        #4
        This is a part of the <head>, and <body>:

        Code:
            	<?php
        			// displayPageType_game -> 475
        			// this is where the javascript is loaded that writes to the <canvas> tag...
        			$canvasId = "gameBoard";
        			$canvasSize = 475;
        			$dotSize = 3;
        			$lineSize = 1;
        			$lineColor = "#bbbbbb";
        			$radiusPixAdjust = -1;
        			$extraBorder = 1;
        			displayBoard($gameid, $canvasSize, $canvasId, $dotSize, $lineSize, $lineColor, $radiusPixAdjust, $extraBorder);
        		?>
        </head>
        <body onLoad="canvasDraw();">
        ... and here is the canvas:
        Code:
                    <canvas id="<?php echo $canvasId;?>" width="<?php echo $canvasSize;?>" height="<?php echo $canvasSize;?>">
                    You are using a browser that doesn't support the &lt;canvas&gt; tag.
                    </canvas>

        Comment

        • acoder
          Recognized Expert MVP
          • Nov 2006
          • 16032

          #5
          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.

          Comment

          Working...