Forums

schart

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

No one :/?

bungle

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

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

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

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

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

Doesn't seem to react at all. Or well, where do I look in Firebug?

bungle

The network pane in Firebug should show you the ajax calls being made

schart

[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#

treehouse : what would you like to learn today?

Forums

Autoupdate wall using Ajax?