Question

I’m working on ajax comments and wondering how I can get the items from the comment_add.php page with the below bit of code so then I can insert it into obj.innerHTML.

function addcomment(streamid,content,containerid,posterid,postername,postid){
var obj = document.getElementById(containerid);
$.post("../comment_add.php", { streamid: streamid,content:content} );
obj.innerHTML = obj.innerHTML + "<div class='stream_comment'><table width='100%'><tbody><tr><td valign='top' width='30px'><img style='border:none;padding:0px;height:30px;width:30px;border-radius:0px;' src='imgs/cropped"+posterid+".jpg' onerror='this.src=&quot;img/no_profile_img.jpeg&quot;;'></td><td valign='top' align='left'><a href='profile.php?username="+posterid+"'>"+postername+" </a>"+content+"</td></tr></tbody></table></div>";

COMMENT_ADD.PHP

 <?php
    session_start();
    require"include/load.php";

    if(isset($_POST['streamid'])&isset($_POST['content'])){

    user_core::add_comment($_POST['streamid'],$_POST['content']);


    }

    $json = array();
    $check = "SELECT comment_id,comment_streamitem, comment_content FROM streamdata_comments";
    $check1 = mysqli_query($mysqli,$check);
    $resultArr = mysqli_fetch_array($check1);
    $json['comment_id'] = $resultArr['comment_id'];
    $json['comment_streamitem'] = $resultArr['comment_streamitem'];
    mysqli_free_result($check1);

    $check = "SELECT * FROM users WHERE id=".$_SESSION['id']."";
    $check1 = mysqli_query($mysqli,$check);
    $resultArr = mysqli_fetch_array($check1);
    $json['username'] = $resultArr['username'];
    $json['id'] = $resultArr['id'];
    $json['first'] = $resultArr['first'];
    $json['middle'] = $resultArr['middle'];
    $json['last'] = $resultArr['last'];
    mysqli_free_result($check1);

    echo json_encode($json);

    ?>

I did try using this code. Yet everytime I comment, it adds it into the 1st post in the stream only, as where the top function doesn’t, it adds it into the status the user comments on.

<script>
$(document).ready(function(){
$("form#mycommentform").submit(function(event) {
event.preventDefault();
var streamid = $("#streamid").val();
var content = $(this).children('#content').val();

$.ajax({
type: "POST",
url: "comment_add.php",
cache: false,
dataType: "json",
data: { 'streamid': streamid, 'content': content}, 
success: function(html){  
$("#commentaddid").html("<div class='stream_comment_holder' id='comment_holder_"+html['comment_streamitem']+"'><div id='comment_list_"+html['comment_streamitem']+"'><div class='stream_comment' id='comment_"+html['comment_id']+"'>div class='stream_comment_holder' id= style='display:;'><div class='stream_comment'><table width='100%'><tbody><tr><td valign='top' width='30px'><img class='stream_profileimage' style='border:none;padding:0px;display:inline;' border=\"0\" src=\"imgs/cropped"+html['id']+".jpg\" onerror='this.src=\"img/no_profile_img.jpeg\"' width=\"40\" height=\"40\" ></td><td valign='top' align='left'><a href='profile.php?username="+html['username']+"'>"+html['first']+" </a>"+html['comment_content']+"</td></tr></tbody></table></div></div></div></div>");
}
});
return false
});
});
</script>

Answer 1

It looks like the top function gets passed a containerId which it uses to know where to put the comment. However, the lower ajax version always puts the comment into #commentaddid.
It is not clear where in the DOM you want the comment to appear, but wherever it is you will need to replace the #commentaddid selector with it’s selector.