Jump to content

Score Menu PHP/java


Jay88

Recommended Posts

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>

 

 

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.