Ajax/Php get more than 1 result

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);
}
?>

As a side-note: In jQeury 1.4.2 live has been replaced by delegate and since 1.7 live is depracated and on is the preferred method. — Mihai Labo, Sep 03 '12 at 12:14
You should iterate over json returned from PHP script. Check this: http://stackoverflow.com/questions/1078118/how-to-iterate-over-a-json-structure. — zelazowy, Sep 03 '12 at 12:16
I shall use the .on() method then. It seems that is what they're telling me to do. — dave, Sep 03 '12 at 12:17
@dave your while loop seems confusing. it would be easier `$jsonArr[] = $resultArr` inside loop. And encode `$jsonArray`. This will give you nice structured array to work with. — Leri, Sep 03 '12 at 12:26
I've changed it, and now only getting the 1 result Its showing in FIREBUGG and my page. What do you mean by encode $jsonArray — dave, Sep 03 '12 at 12:36
Does PHP+SQL part (without AJAX) outputs 10 comments ? (just to make sure there's no problem in sql query or php) — Ankit, Sep 03 '12 at 12:37
It doesn't now. Since PLB told me to change it. It did before. Does the above php look ok? — dave, Sep 03 '12 at 12:43

score 1 · Accepted Answer · answered Sep 03 '12 at 12:27

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.

answered Sep 03 '12 at 12:27

zelazowy

1,016
2
12
26

I'm not at all familiar with jQuery.getJSON(), I've never used it before. So it looks alien to me. I'm still a pretty young JQuery developer, self taught. – dave Sep 03 '12 at 12:38
1

$,getJSON is designed to handle JSON data, sure you can use $.ajax for it but it will be nothing more than reinveinting a wheel. I'm trying to show you way to do this with $.getJSON, just give me a few minutes for this. – zelazowy Sep 03 '12 at 12:40
Your time and efforts are appreciated very much @zelazowy. Thank you. – dave Sep 03 '12 at 12:42
1

Hmm, another thought. Maybe try to create a whole html that you creates from JSON in PHP file, echo it and receive result using load function (http://api.jquery.com/load/). As far as I know this should be far more efficient than getting JSON and creating 10 times a lot of divs and so on. – zelazowy Sep 03 '12 at 12:45
1

Ok, I've created an jsfiddle with example of use `load` function: http://jsfiddle.net/tHzve/ In HTML section I've put some example data that you can echo from PHP script and in js section a code to prepending received data to the #articles div. It will not work, but you can see what I mean ;) – zelazowy Sep 03 '12 at 12:54
So if I put the content into load_more_home_posts. Where does it output..As normal into the #article div. and what is the
for? – dave Sep 03 '12 at 13:15
1

The idea is: 1. create new empty div selector, load it with data from PHP and assign into new variable articles; 2. prepend variable articles to #articles div; If you omit creation of new div and use #articles div directly it will be erase all old data and fill with new one. Using new div as an buffer prevents you from replacing data and permits use another function (e.g. prepend, append and so on). If you don't want to prepend data inside div do it whis way: `$("#articles").prepend(articles.find("div"));` – zelazowy Sep 03 '12 at 13:23
Ok. Sounds fairly simple to me. Thanks Zelazowy. – dave Sep 03 '12 at 13:28
So all my code in the success above. Would I put all that in the load page removing the functions and replacing them with the normal PHP data? – dave Sep 03 '12 at 13:32
1

If I understood you well then answer is no. In your PHP script in loop over mysql result instead of assigning data into array just echo it with all divs, anchors, spans you creates in javascript and in javascript use `load` function – zelazowy Sep 03 '12 at 13:38
Its ok I've got it. Just need the results from php to show in the response I tried ".$resultArr['streamitem_id']." but doesn't work. I'll get there. – dave Sep 03 '12 at 13:54
Got it. I didn't put it in the loop, but its working now. With all 10 results. Thanks SOOOOO much. – dave Sep 03 '12 at 13:58

Ajax/Php get more than 1 result

1 Answers1