I'm creating a view more comments script and I show a set amount of comments.. 2 at the moment but like facebook if there is more than that it says view all.. on my test post I have four comments in total, 2 showing and 2 hidden (In the database). I click this link and make a call for all comments, then will replace the existing 2 and also add show the other two.
So I have pretty much put everything together. But I've been told that I need to set a key of some description so the strings don't overwrite each other and I can't use the success 'response' So how would I go about doing this?
Returned data string via JSON array
{"comment_id":"1687","comment_poster":"33","comment_streamitem":"223","comment_datetime":"2014-08-23 17:24:10","comment_content":"ggg","username":"luce","id":"33","first":"lucy","middle":"","last":"ward"}{"comment_id":"1688","comment_poster":"33","comment_streamitem":"223","comment_datetime":"2014-08-23 17:24:13","comment_content":"hh","username":"luce","id":"33","first":"lucy","middle":"","last":"ward"}{"comment_id":"1689","comment_poster":"33","comment_streamitem":"223","comment_datetime":"2014-08-23 17:24:15","comment_content":"kkk","username":"luce","id":"33","first":"lucy","middle":"","last":"ward"}{"comment_id":"1690","comment_poster":"33","comment_streamitem":"223","comment_datetime":"2014-08-23 17:24:17","comment_content":"kk","username":"luce","id":"33","first":"lucy","middle":"","last":"ward"}
And the ajax call itself
<script type="text/javascript">
$(function() {
$(".view_comments").click(function() {
var ID = $(this).attr("id");
$.ajax({
type: "GET",
url: 'viewmorecommentslink.php?comment_streamitem='+ ID,
success: function(response){
$("#comment_list_"+ID).append('<div class="stream_comment" id="comment_'+response['comment_id']+'" style="margin-top:0px;">\
<table width=100%><tr><td valign=top width=30px><img class="stream_profileimage" style="border:none;padding:0px;display:inline;" border=\"0\" src=\"userimages/cropped'+response['comment_poster']+'.jpg\" onerror=this.src=\"userimages/no_profile_img.jpeg\" width=\"40\" height=\"40\" ></a><td valign=top align=left>\
<a href="/profile.php?username='+response['username']+'">'+response['first']+' '+ response['middle']+' '+response['last']+'</a> - <abbr class="timeago" title='+response['comment_datetime']+'>'+response['comment_datetime']+'</abbr>\<div class="commentholder">'+response['comment_content']+'</div><br/>\<div id="commentactivitycontainer">\
<a style="cursor:pointer;" onClick=\"deletecomment('+response['comment_id']+',comment_'+response['comment_id']+');\">Delete</a><a id="likecontext_'+response['comment_id']+'" style="cursor:pointer;" onClick=\"likestatuscomment('+response['comment_id']+',this.id);\">\
<div style="width:80px; position:relative; float:left; left:40px" id="likescommentprint'+response['comment_id']+'">Like</div></a><div style="width:80px; position:relative; float:left; left:40px" id="likescommentprint'+response['comment_id']+'"></div>\
</form><a id="dislikecontext_'+response['comment_id']+'" style="cursor:pointer;" onClick=\"dislikestatuscomment('+response['comment_id']+',this.id);\"><div style="width:90px; position:relative;top:-0px; float:left; left:200px" id="dislikescommentprint'+response['comment_id']+'">Dislike</div>\
</a><div style="width:90px; position:relative; top:-0px; float:left; left:200px" id="dislikescommentprint'+response['comment_id']+'"></div></form></div></table></div></div>');
$("#view"+ID).remove();
$("#comment_list_"+ID).remove();
}
});
return false
});
});
</script>
