Score Menu PHP/java

[Jay88]

I am trying to create a full Scoreboard like the on the EPSN website. (The Red bar that shows the daily scores). So i created a DB called "scoreDB" I have like 30 sample scores in there.

What i want to create is a set of DIVS that will display the scores from the DB entries and refresh the scores every 10 seconds or so.

 

Righ now i can display the last score entered from the DB. But i can't make it change automaticly. So I started to think and I creted a Java scrip timer(see below) 

 

My Issue i cant figure out how to make it work

 

 

Button line i want a divs that will diplay one score at a time and refresh every 10 seconds or so and display the next available record until it shows the last 10 and start diplaying the laters entry again.  I will love to hear your sugestions or soluctions.

 

 

One DIV Sample below

 

 

<div class="score1" id="score1">
           <?php
                     
           mysql_select_db(scoredb) or die ("Couldn't not find DB");
           $query = mysql_query("SELECT * FROM results ORDER BY IDResults DESC 1 ");
    
              while($row = mysql_fetch_assoc($query))
                  {
                       $player1 = $row ["Player1"];
                       $score1 = $row ["Score1"];
                       $player2 = $row ["Player2"];
                       $score2 = $row ["Score2"];
                                        
                  
                   echo  $player1" . " " . $scr1 . " " . " " . " - " . " " . $player2" . " " . $scr2 ;
                  }
        ?>

</div>

 

<br></br>

<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
   function countDown(secs, elem){
          var element = document.getElementById(elem);
         element.innerHTML = "Please wait for "+secs+" seconds";
           if(secs <1){
           clearTimeout(timer);
           element.innerHTML = '<h2>Tournament is now Open!</h2>';
           element.innerHTML += '<a href="#"> Click here now</a>';                       }
         secs--;
         var timer = setTimeout('countDown('+secs+',"'+elem+'")',1000);
   }
</script>
<div id="status"></div>
<script type="text/javascript"> countDown(10,"status");</script>


<p></p>

 

 

 

[Psycho]

You're on the right track. You need to implement a JavaScript timer that then makes an AJAX call to get the new data and then writes that new data into the DIV. There's too much to cover in a forum post, but there are plenty of tutorials out there.

 

I will give you this advise however. You should not put the code to create the div content into the page like this

 

<div class="score1" id="score1">
           <?php
                     
           mysql_select_db(scoredb) or die ("Couldn't not find DB");
           $query = mysql_query("SELECT * FROM results ORDER BY IDResults DESC 1 ");
    
              while($row = mysql_fetch_assoc($query))
                  {
                       $player1 = $row ["Player1"];
                       $score1 = $row ["Score1"];
                       $player2 = $row ["Player2"];
                       $score2 = $row ["Score2"];
                                        
                  
                   echo  $player1" . " " . $scr1 . " " . " " . " - " . " " . $player2" . " " . $scr2 ;
                  }
        ?>
</div>

 

instead, you should create a separate PHP script to create the content. That way you can call that script when you first build the page and you can call the same script when you make the AJAX request to get the updated content.

 

E.g. getScores.php

 

           <?php
                     
           mysql_select_db(scoredb) or die ("Couldn't not find DB");
           $query = mysql_query("SELECT * FROM results ORDER BY IDResults DESC 1 ");
    
              while($row = mysql_fetch_assoc($query))
                  {
                       $player1 = $row ["Player1"];
                       $score1 = $row ["Score1"];
                       $player2 = $row ["Player2"];
                       $score2 = $row ["Score2"];
                                        
                  
                   echo  $player1" . " " . $scr1 . " " . " " . " - " . " " . $player2" . " " . $scr2 ;
                  }
        ?>

 

Then in your main page your div would look like this

 

<div class="score1" id="score1">
<?php include('getScores.php'); ?>
</div>

 

Then in the JavaScript that makes the AJAX call you would call the same file getScore.php to get the new data.

[Jay88]

Can sugest a tutorial.. I been on the look but it seems I am doing something that is not very popular       lol

 

Thanks for the sugestion BTW

[Alex_]

Assuming you're using jQuery just do something simple to get you started.

 

 

function dataFetched(response) {
//Parse response (whether its plaintext or JSON)
//Add to the view
}
 
function getData() {
$.get('getScores.php', dataFetched);
}
 
function startTimer() {
setInterval(getData, 10000); //Every 10 secs
}
 
$(document).ready(startTimer);

 

Assuming you followed Psycho's advice on moving the code out to a seperate file.

 

There's obviously a lot of things to improve in the example above, it's just to get you started.

[Jay88]

Thanks very helpful