Search code examples
javascripthtmljqueryrefresh

Why is my jquery refresh creating a separate write out of my div?

I am trying to refresh the contents of my 'stats' div every two seconds, using jquery. In the div it begins by writing out the contents of stats.php (which contains values from a database). I want the div to reload that page every two seconds, in order to display the live values of the database table.

The original code all works. Stats.php writes out perfectly how I want it to, but if I change the stats in the database and wait a few seconds, it never updates on the website to reflect those changes, unless I manually refresh the page (which I'm trying to avoid).

I have gone through so many forums and solutions and I can't seem to get any of coding examples to work.

[EDIT: The code now mostly works!! However, instead of simply refreshing the div, it creates a totally separate write out above my table, so I see the original div and then a secondary div. Updated code and picture below]

enter image description here

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Lands Between</title>
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
        <link rel="stylesheet" href="css/css2.css">
        <script src="https://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript">
            $(function() {
              setInterval(function() {
                $('#stats').load('php/stats.php');
              }, 2000);
            });
        </script>
    </head>
    <body>
        <nav class="navtop">
            <div class="header">
                <h1 style="color: white; font-family: 'Blackadder ITC', 'Playbill', 'Poor Richard'; text-shadow: 1px 1px #403d39;">
                    Lands Between
                </h1>
            </div>
        </nav>
        
        <div class="content">
            <table align="center" class="main-table" style="padding-right: 5px">
                <tr>
                    <td rowspan="4">
                        <div id="chad">
                            <a href="php/charstats.php" target="screen">
                                <img src="graphics/Chad100pxHeadon.png"></div>
                            </a>
                    </td>
                    <td align="right" colspan="2" style="padding-right: 10px">
                        <strong>Chad - Level <?php echo $lvl; ?></strong> | 
                        <a href="logout.php">Logout</a>
                    </td>
                </tr>
                
                <div id="stats">
                    <?php include 'php/stats.php'; ?>
                </div>
                
                <tr>
                    <td colspan="2">
                        <iframe name="screen" src="locations/<?php echo $location; ?>.php" scrolling="no"></iframe>
                    </td>
                </tr>
            </table>
            
            <?php include 'php/actionbuttons.php'; ?>
        </div>
    </body>
</html>

Here is my stats.php page:

<?php
include_once 'connect.php';
include_once 'functGeneral.php';
    
    //user's specific id is stored in the cookie
    $id = $_COOKIE["user"];
    
    //pull users character stats from database using id
    $query = "SELECT * FROM stats WHERE id='$id'";
    $result = $conn->query($query);
    $charInfo = $result->fetch_array(MYSQLI_ASSOC);
    
    //store the stats to variables
    $hp = $charInfo['hp'];  $hpmax = $charInfo['hpmax'];
    $mp = $charInfo['mp'];  $mpmax = $charInfo['mpmax'];
    $xp = $charInfo['xp'];  $lvl = $charInfo['lvl'];
    $str = $charInfo['str'];  $spd = $charInfo['spd'];
    $armor = $charInfo['armor'];    $weapon = $charInfo['weapon'];
    
    //get percentages for stat bar widths
    //variables are used at bottom in javascript code
    $hpbar = ($hp / $hpmax) * 100;
    $mpbar = ($mp / $mpmax) * 100;
    $xpmax = getmaxXP($lvl);
    $xpbar = ($xp / $xpmax) * 100;
    
?>

<tr>
    <td>
        <div class="w3-light-grey w3-round-xlarge">
            <div id="hp" class="w3-container w3-round-xlarge w3-red" style="max-height: 30px; height: 30px; width: 100%; text-shadow: 1px 1px #403d39;">
                <span style="position: absolute;">HP: <?php echo $hp; ?>/<?php echo $hpmax; ?></span>
            </div>
        </div>
    </td>
</tr>
<tr>
    <td>
        <div class="w3-light-grey w3-round-xlarge">
            <div id="mp" class="w3-container w3-round-xlarge w3-blue" style="max-height: 30px; height: 30px; width: 100%; text-shadow: 1px 1px #403d39;">
                <span style="position: absolute;">MP: <?php echo $mp; ?>/<?php echo $mpmax; ?></span>
            </div>
        </div>
    </td>
</tr>
<tr>
    <td>
        <div class="w3-light-grey w3-round-xlarge">
            <div id="xp" class="w3-container w3-round-xlarge w3-yellow" style="max-height: 30px; height: 30px; width: 100%; text-shadow: 1px 1px #403d39;">
                <span style="position: absolute;"><font color="white">XP: <?php echo $xp; ?>/<?php echo $xpmax; ?></font></span>
            </div>
        </div>
    </td>
</tr>


<script type="text/javascript">

    var hpwidth = <?php echo $hpbar ?>;
    var mpwidth = <?php echo $mpbar ?>;
    var xpwidth = <?php echo $xpbar ?>;
    
    document.getElementById("hp").style.width = hpwidth + "%";
    document.getElementById("mp").style.width = mpwidth + "%";
    document.getElementById("xp").style.width = xpwidth + "%";

</script>

Solution
    1. Load jQuery over https intead of http (not the problem but still)
    2. Do not link to w3schools stylesheets (not the problem but still)
    3. Your HTML is invalid. You likely want your stats to be a tbody instead of an invalid DIV
    4. Cache buster:
    $(function() {
  setInterval(function() {
    $('#stats').load('php/stats.php?rnd=' + new Date().getTime());
  }, 2000);
});

    Table suggestion:

    <table align="center" class="main-table" style="padding-right: 5px">
  <tbody>
    <tr>
      <td rowspan="4" id="chad">
        <a href="php/charstats.php" target="screen">
          <img src="graphics/Chad100pxHeadon.png">
        </a>
      </td>
      <td align="right" colspan="2" style="padding-right: 10px">
        <strong>Chad - Level <?php echo $lvl; ?></strong> |
        <a href="logout.php">Logout</a>
      </td>
    </tr>
  </tbody>
  <tbody id="stats">
    <?php include 'php/stats.php'; ?>
  </tbody>
  <tbody>
    <tr>
      <td colspan="2">
        <iframe name="screen" src="locations/<?php echo $location; ?>.php" scrolling="no"></iframe>
      </td>
    </tr>
  </tbody>
</table>