title: automatically load dynamic content with ajax and php
body: <p>I have a PHP chat application that automatically get messages from database and displays it, currently everything works fine but page must be manually reloaded to display new messages .. How do I implement JQuery ajax to get the messages or silently refresh the specific messages list div  without refreshing the whole page? Here is my code (not the full code on the page but the main PHP part I want to use ajax on)</p>
  
  <p>Some answers I read online specified that the PHP code must be on a separate file but Some of the functions and variables in the code below depends on the main file holding this code therefore making it useless if put in a separate file. </p>
  
  <pre><code> &lt;?php
  // Attempt select query execution
  global $db;
  $id  = $_GET["id"];
  $sql = "SELECT * FROM msg WHERE id='$id' ";
  if ($result = $db-&gt;query($sql)) {
      if ($result-&gt;rowCount() &gt; 0) {
          while ($row = $result-&gt;fetch()) {
              echo '&lt;div class="chat-messages-item ' . chattype($row['sender']) . '"&gt;';
              echo '&lt;div class="chat-avatar chat-avatar-lg circle"&gt;&lt;img src="' . senderpic($row['sender'], 'thumbnail', '100', '100') . '" alt=""&gt;&lt;/div&gt;';
              echo '&lt;div class="chat-messages-content"&gt;';
              echo '&lt;div class="chat-messages-bubble ' . $msg_visibility . '"&gt;';
              echo '&lt;p&gt;' . $row['message'] . '&lt;/p&gt;';
              echo '&lt;/div&gt;';
              echo '&lt;ul class="chat-messages-info"&gt;';
              echo '&lt;li&gt;';
              echo '&lt;div class="chat-time chat-seen"&gt;&lt;span&gt;' . $row["time"] . '&lt;/span&gt;';
              echo '&lt;/li&gt;';
              echo '&lt;/ul&gt;';
              echo '&lt;/div&gt;';
              echo '&lt;/div&gt;';
          }
          unset($result);
      } else {
          echo "&lt;p class='lead'&gt;&lt;em&gt;No Chat&lt;/em&gt;&lt;/p&gt;";
      }
  } else {
      echo "ERROR: Could not able to execute $sql. " . $mysqli-&gt;error;
  }
  </code></pre>
  
  <p>Thanks </p>
  
  <p>[EDIT]</p>
  
  <p>What i've tried :
  1. Moving the code above into a separate PHP file and using jquery to to get the page with the following js code but nothing appears and no errors displayed. if i open the page in browser it displays the list of all messages </p>
  
  <pre class="lang-js prettyprint-override"><code>          function update() {
              $.get("aj/messages.php", function(data) {
                $("#allmessages").html(data);
                window.setTimeout(update, 10000);
              });
            }
  </code></pre>
  
  <p>here is the page structure 
  - Message.php (the main message page that displays other chat information like contacts, messages list, messages, send message input etc)</p>
  
  <ul>
  <li>aj/msg.php (a php page that gets all the messages from database and wraps it in style/css/html which is also the  php code above and expected to be inside a div with the id="allmessages" located inside Message.php)</li>
  </ul>