title: Updating HTML Element Every Second With Content From MySQL Database
body: <p>I'd like to have a div on my web page that is based off of the data in my MySQL database. When the data in the database changes, the content in the div should change as well.</p>
  
  <p>Example: Let's say I have a field in the first row of a table called "server_statistics" in my MySQL database which keeps track of a server being online or offline. When the server goes offline, the MySQL field changes from 1 to 0. When it goes online, it goes from 0 to 1.</p>
  
  <p>So I want to use Javascript to display the server status on my webpage and update it without refreshing the page.</p>
  
  <p>I thought I'd be able to do it like this:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      var int = self.setInterval("update()", 1000);
      function update() {
          var statusElement = document.getElementById("status");
          var status = "&lt;?php 
              $con = mysql_connect("localhost", "root", "");
              mysql_select_db("database_name", $con);
              $row = mysql_fetch_array(mysql_query("SELECT * FROM server_statistics LIMIT 1"));
              mysql_close($con);
              echo $row[0]; ?&gt;";
          if (status == 0) {
              statusElement.style.color = "red";
              statusElement.innerHTML = "offline";
          }
          else {
              statusElement.style.color = "green";
              statusElement.innerHTML = "online";
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>But this doesn't work. The page needs to be refreshed for it to update and I don't know why...</p>
  
  <p>I've read I can use JQuery but I have no knowledge of this language at all.</p>
  
  <p>I tried this:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      var int = self.setInterval("update()", 1000);
      function update() {
          $('#status').load('load.php');
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>and then in load.php I had this:</p>
  
  <pre><code>&lt;?php
      echo "test";
  ?&gt;
  </code></pre>
  
  <p>But nothing happened after 1 second passed. I'm probably doing it wrong because as I said, I don't know anything about this JQuery/AJAX stuff.</p>
  
  <p>So how can I accomplish retrieving a field from a MySQL database at every specified interval and then automatically update an HTML element accordingly? It would be ideal to only update the HTML when a change occurred in the database but for now, I just want it to change every few seconds or minutes...</p>
  
  <p>Thanks in advance.</p>