Question

I’ve built up a script that is to get users posts from a database, and I’m almost there. The ajax calls and I get the 10 posts in the response in Firebug, only it shows only 1 post in the page when I click load more. What do I need to add to the code below to show 9 more results?

AJAX

<script type="text/javascript">
$(document).ready(function(){
$('.load_more').live("click",function() 
{
var ID = $(this).attr("id");
if(ID)
{
$("#load"+ID).html('Loading...');

$.ajax({
type: "POST",
url: "include/load_more_home_posts.php",
cache: false, 
dataType: "json",
data: { streamitem_id: ID},
cache: false,
success: function(stream){
      $("#articles").prepend("<div id='divider-"+stream['streamitem_id']+"'><div class='userinfo'><a href='/profile.php?username="+stream['username']+"'><img class='stream_profileimage' style='border:none;padding:0px;display:inline;' border=\"0\" src=\"imgs/cropped"+stream['id']+".jpg\" onerror='this.src=\"img/no_profile_img.jpeg\"' width=\"40\" height=\"40\" ></a><div class'delete' style='cursor:pointer;position:relative;top:0px;float:right;padding-right:5px;' onclick=\"delete_('"+stream['streamitem_id']+"');\">X</div><a href='/profile.php?username="+stream['username']+"'>"+stream['first']+" "+ stream['middle']+" "+stream['last']+"</a><span class='subtleLink'> said</span><br/><a class='subtleLink' style='font-weight:normal;'>"+stream['streamitem_timestamp']+"</a><hr>"+stream['streamitem_content']+"<div style='height:20px;' class='post_contextoptions'><div id='streamcomment'><a style='cursor:pointer;' id='commenttoggle_"+stream['streamitem_id']+"' onclick=\"toggle_comments('comment_holder_"+stream['streamitem_id']+"');clearTimeout(streamloop);swapcommentlabel(this.id);\">Write a comment...</a></div><div id='streamlike'><a title='Like "+stream['first']+" "+ stream['middle']+" "+stream['last']+"s status' id='likecontext_"+stream['streamitem_id']+"' style='cursor:pointer;' onClick=\"likestatus("+stream['streamitem_id']+",this.id);\"><div style='width:50px;' id='likesprint"+stream['streamitem_id']+"'>Like</a></div><div style='width:50px;' id='likesprint"+stream['streamitem_id']+"'><a title='See who likes "+stream['first']+" "+ stream['middle']+" "+stream['last']+"s status' href='include/likes.php?streamitem_id="+stream['streamitem_id']+"' /></a></div></div></form></div><div id='streamdislike'><a id='dislikecontext_"+stream['streamitem_id']+"' style='cursor:pointer;' onClick=\"dislikestatus("+stream['streamitem_id']+",this.id);\"><div style='width:70px;' id='dislikesprint"+stream['streamitem_id']+"'>Dislike</a></div><div style='width:70px;' id='dislikesprint"+stream['streamitem_id']+"'></div></div></form><div class='stream_comment_holder' style='display:none;' id='comment_holder_"+stream['streamitem_id']+"'><div id='comment_list_"+stream['streamitem_id']+"'></div><div class='stream_comment_inputarea'><form id='mycommentform' method='POST'  class='form_statusinput'>\
<input type='hidden'  name='streamidcontent' id='streamidcontent' value='"+stream['streamitem_id']+"'>\
<input type='input' name='commentingcontents' id='commentingcontents' placeholder='Say something' autocomplete='off'>\
<input type='submit' id='button' value='Feed'><br/></div></div>");
// remove the previous load more link
 $("#load"+ID).remove();
}
});
}
return false;
});
});
</script>

include/load_more_home_posts.php

<?php
session_start();
include("rawfeeds_load.php");

if (isset($_POST['streamitem_id']) && $_POST['streamitem_id'] != "") {
$lastID = mysqli_real_escape_string($mysqli,$_POST['streamitem_id']);

$json= array();
$following_string = mysqli_real_escape_string($mysqli,$_SESSION['id']);
$call="SELECT d.*, c.*, u.*
  FROM streamdata          AS d
  JOIN streamdata_comments AS c ON d.streamitem_id = c.comment_streamitem
  JOIN users               AS u ON u.id = c.comment_poster
 WHERE c.comment_poster = '$following_string'
   AND d.streamitem_id < '$lastID'
   AND (d.streamitem_target  = '$following_string' OR
        d.streamitem_creator = '$following_string')
   ORDER BY d.streamitem_id DESC LIMIT 10";
$chant = mysqli_query($mysqli, $call) or die(mysqli_error($mysqli));

$json['streams'] = array();

while ($resultArr = mysqli_fetch_assoc($chant)) {

    $json['streamitem_id'] = $resultArr['streamitem_id'];
    $json['streamitem_content'] = $resultArr['streamitem_content'];
    $json['streamitem_timestamp'] = Agotime($resultArr['streamitem_timestamp']);
    $json['comment_id'] = $resultArr['comment_id'];
    $json['comment_content'] = $resultArr['comment_content'];
    $json['comment_poster'] = $resultArr['comment_poster'];
    $json['comment_datetime'] = Agotime($resultArr['comment_datetime']);
    $json['comment_streamitem'] = $resultArr['comment_streamitem'];
    $json['username'] = $resultArr['username'];
    $json['id'] = $resultArr['id'];
    $json['first'] = $resultArr['first'];
    $json['middle'] = $resultArr['middle'];
    $json['last'] = $resultArr['last'];

    $json['streamdata'][] = $json;

}
echo json_encode($json);
}
?>

Answer 1

You recive from PHP an JSON like [{item1, item2},{item11, item12},…] and without iterate over it you are using only first group. I think the best and the easiest way will be using $.getJSON function instead of $.ajax. Look here at the second example, I think it is all you need to handle JSON received from PHP.