CSS-Tricks

Forums Get help. Give help.

• schart February 22 Permalink

  So I'm using a while statement to line every wall post in a table. Now I want to refresh this every 10 seconds using ajax, possibly setInterval.
  Here is my wall script:
  

  
  <?php
  $limit = $_GET['l'];
  if (empty($limit)){
  $limit = "20";
  }
  $wallquery = mysql_query("SELECT * FROM users_wall
  WHERE id = '$pageidz' ORDER BY unique_id DESC LIMIT 0, $limit");
  while ($row = mysql_fetch_assoc($wallquery)){
  $wname = $row['name'];
  $comment = $row['comment'];
  $widz = $row['id'];
  $uniz = $row['unique_id'];
  $isreply = $row['reply'];
  $commentlimit = substr($comment, 0, 100). "...<a href='/post.php?id=" .$uniz. "'>Full Post</a>";
  $wid = $row['userid'];
  $wimg2 = $row['img'];
  $timestamp1 = $row['timestamp'];
  $timestamp2 = substr($timestamp1, 5, -3); 
  $timestamp3 = str_replace("-", ".", $timestamp2);
  $timestampf = substr($timestamp1, 0, 10);
  $timestampc = substr($timestamp3, 6, 11);
  $timestamp4 = "<b>" .$timestampc. "</b> <span style='font-size:12px;color:#d1d1d1;'>" .$timestampf. "</span>";
  $timestamp = str_replace("-", ".", $timestamp4);
  
  
  
  
  $wallimg = mysql_query("SELECT * FROM users
  WHERE id = '$wid'");
  while ($row = mysql_fetch_assoc($wallimg)){
  $wimg = $row['img'];
  }
  
  ?>
  <tr>
  <td>
  <a href="/profile.php?id=<?php echo($wid); ?>">
  <img src="<?php echo($wimg); ?>" width="50" height="50" class="usernameLink" title="<?php echo($wname); ?>'s profile" />
  </a>
  </td>
  <td>
  <a href="/profile.php?id=<?php echo($wid); ?>">
  <?php echo($wname); ?>
  </a>
  <?php
  // Ignore all of this, CSS-Tricks! Just some user validation things like delete and reply
  
   if($username == $wname || $username == $uname){ ?> <span style="color:#ddd;">|</span> <form style="display:inline;" action="/delete_comment.php" method="post"><input type="hidden" name="comment_id" value="<?php echo($uniz); ?>" /><input type="hidden" name="page_id" value="<?php echo($id); ?>" /><input type="submit" value="Delete" style="padding:0;background-color:#eee;border:none;color:#aaa;cursor:pointer;display:inline;font-size:12px;" /></form>
  <?php } ?><?php if($username && $password){ ?><span style="color:#ddd;"> | </span> <form action="reply_comment.php" style="display:inline;"><input type="hidden" name="comment" value="<?php echo($uniz); ?>" /><input type="hidden" name="replyto" value="<?php echo($wid); ?>" /><input type="submit" value="Reply" style="padding:0;background-color:#eee;border:none;color:#aaa;cursor:pointer;display:inline;font-size:12px;" /></form><?php } ?><?php if($isreply > 0){ ?><span style="color:#aaa;"> | </span><a href="/reply.php?id=<?php echo($uniz); ?>" style="color:#aaa;font-size:12px;">Replies</a> <span style="color:#aaa;font-size:12px;">(<?php echo($isreply); ?>)</span> <?php } ?><span style="color:#aaa;font-size:12px;"> | <?php echo($timestamp); ?></span>
  <br />
  <div class="updates" style="max-width:320px;z-index:100;"><?php if (strlen($comment) > 100){ echo($commentlimit); }else{ echo($comment); } ?></div>
  </td>
  </tr>
  <?php
  }
  ?>
  

  
  
  
  Any ideas? :)
  
  - Thanks :)
• schart February 22 Permalink

  No one :/?
• bungle February 22 Permalink

  you need to give the table an id so you can refer to it and then put that inside another div that will function as the container
  and then use the jquery load() function to load the page via ajax and insert just the table into the div
  
  
  

  
  function refreshPosts(){
  	 $('#container').load('posts.php #table');
  }
  
  setInterval('refreshPosts()',10000);
  

• schart February 22 Permalink

  So that would be
  

  
  <div id="wallcontainer">
  <table id="wallcont">
  <?php
  [...]
  ?>
  [...]
  <?php
  }
  ?>
  </table>
  </div>
  <script>
  function refreshPosts(){
  	 $('#wallcontainer').load('posts.php #wallcont');
  }
  
  setInterval('refreshPosts()',10000);
  </script>
  

  
  
  Also the posts.php, will it just include the php or what?
• bungle February 22 Permalink

  posts.php could just be the original page - your index.php if that is what it is called, it can reload itself effectively as it only pulls out the bits it needs
  
  I would normally however create a stripped down version for ajax purposes so that it loads faster. A thought would be to then include that posts.php from your original file so you only have one copy of the code to maintain.
• schart February 22 Permalink

  Ok.. So the page is profile.php, and I put the table in a div with the id of "wallcontainer" as well as the table id is "wallcont". The code is as following:

  
  function refreshPosts(){
  	 $('#wallcontainer').load('profile.php?id=<?php echo($id); ?>  #wallcont');
  }
  
  setInterval('refreshPosts()',10000);

  
  I have jQuery loaded and everything, and this is inside the $(document).ready(function(){ -- Now what am I doing wrong? It doesn't seem to update.
• bungle February 22 Permalink

  can you use firebug to see if the ajax is requesting the page?
  
  To fault find I would add a button to trigger the refreshPosts function manually, make sure that there isn't an issue with that first
• schart February 22 Permalink

  Doesn't seem to react at all. Or well, where do I look in Firebug?
  
• bungle February 22 Permalink

  The network pane in Firebug should show you the ajax calls being made
• schart February 23 Permalink

  [06:14:33.085] (6:14:33.84) WalkingDomProcessor.process: Performing data capturing on: http://schart.net/profile.php?id=1#
  [06:14:33.090] (6:14:33.90) WalkingDomProcessor.process: Can't find engine for: http://schart.net/profile.php?id=1#
  [06:14:33.097] (6:14:33.96) WalkingDomProcessor.process: Performing data capturing on: http://schart.net/profile.php?id=1#
  [06:14:33.103] (6:14:33.102) WalkingDomProcessor.process: Can't find engine for: http://schart.net/profile.php?id=1#