CODEWITHSUNDEEP
javascriptphpjquerymysql
Christian H
Christian H

Reputation: 108

Refreshing a DIV dynamic

I am trying to load content into a div and auto updated in every 5 seconds. I have searched the net and tried to use everything, But nothing works at all. I tried to load the output from pauseupdate2.php to the div pauseup

pause.php is in a folder <../user/pause.php>

    <?php
include('../session/session.php');
include('../funktion/sitelocteam.php');
include('../funktion/pausecheck.php');
include('../funktion/pausetime.php');
//include('../funktion/pauseupdate.php');
include('../funktion/pauseupdate1.php');
include('../funktion/counter.php');
//include('../funktion/pauserules.php');



?>
<!DOCTYPE html>
<html>
<head>
<title>Pause Program</title>
<link href="../style/style.css" rel="stylesheet" type="text/css">
<link href="../style/menu.css" rel="stylesheet" type="text/css">
<link rel="import" href="../funktion/pauseupdate.php">


</head>
<body>
<div id="Holder">
<div id="Header"></div>
<div id="NavBar"><nav>
        <ul>
            <li><a href="../user/pause.php">Pause</a></li>
            <li><a href="../all/profile.php">Profil</a>
            <ul>
                    <li><a href="../user/minepauser.php">Min Pauseoversigt</a>    </li>
                </ul>
                </li>
            <li><a href="../all/faq.php">FAQ</a></li>
            <li><a href="../funktion/logout.php">Logout</a></li>
        </ul>
    </nav>
</div>
<div id="PageHeading">
<!--    <h3> Bruger ID: <?php echo $userid; ?></h3>-->
    <h3> Intialer: <?php echo $_SESSION['login_user']; ?> </h3>
     <h3> Team: <?php echo $teamname ?></h3>
    <h3> Lokation: <?php echo $sitename ?></h3>

</div>

        <div id="pausev">
               <?php
    if ($pausetime->num_rows > 0) {
    // output data of each row
    while($row = $pausetime->fetch_assoc()) {
       echo "Du har holdt pause siden: " . $row["time"]. "<br>";
    }
    }

        ?>
            <div id="pauseup"></div>
            <script src="../js/jquery-1.11.3.min.js"></script>
            <script src="../js/pause.js"></script>

        </div>

    <div id="Pause">
<!--               <?php
              echo $errors;
          ?> <br> <br>-->
        <form action="../funktion/pauserules.php">
    <input type="submit" value="PAUSE!"<?php if ($pausetjek->num_rows > 0 ){?> disabled <?php }?> >
</form>

    <form action="../funktion/pausestop.php">
    <input type="submit" value="STOP!" <?php if ($pausetjek->num_rows === 0){?> disabled <?php }?> >
</form>


</div>

<div id="Footer"></div>
</div>
</body>
</html>

The pause.js looks like this: 

    $(document).ready(function() 
{
  // Load the content of "path/to/script.php" into an element with ID   "#container".
  $('#pauseup').load('../funktion/pauseupdate2.php');


// Execute every 5 seconds
window.setInterval(refreshData, 5000);
        }
);

And last but least pauseupdate2.php looks like: 

<?php

$servername = "localhost";
$username = "xxx";
$password = "xxx";
$dbname = "pause";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

$sql = "select user.username from pause LEFT OUTER JOIN user on              pause.userid=user.id where pause.type=0";
    $pauseupdate = $conn->query($sql);

    if ($pauseupdate->num_rows > 0) {
        // output data of each row
        while($row = $pauseupdate->fetch_assoc()) {
        echo "Hvem er til pause: " . $row["username"]. "<br>";

//        print '<table>
//        <tr>
//               <td>'.$row['username'].'</td>
//        </tr>
//        </table>';
    }
} else {
        echo "Ingen er til pause!";
    }
    $conn->close();

echo 'booo';

?>

What may be wrong with my code? I know the most of it may be bad coded, and I am new to PHP and Jquery.

Thanks in advance

Upvotes: 1

Views: 80

Answers (2)

MazzCris
MazzCris

Reputation: 1840

You are calling a function "refreshData" but it is not defined. Define the function, call it the first time from the $(document.ready() method, and add setInterval at the same time:

function refreshData(){
    $('#pauseup').load('../funktion/pauseupdate2.php');
}


$(document).ready(function() 
{    
    // Execute every 5 seconds
    window.setInterval(refreshData, 5000);
    refreshData();
});

Upvotes: 2

Joel Poulin
Joel Poulin

Reputation: 23

I think the problem could come from this refreshData function that does not seem to exist...

Try with this code (very close to yours)

<body>
<h1>Load refresh...</h1>
<div class="content">
  content that will be overwritten...
</div>
<script type="text/javascript">
  setInterval(function(){ 
    $('.content').load('my_url_to_reload_every_3_seconds.php');
  }, 5000);
</script>

Upvotes: 0

Related Questions