Okay so I am having a problem trying to initiate an AJAX request and, specifically, using the createElement and appendChild functions. More specifically I think the issue is that I don’t know how to properly define and set objects.
I want to initialize an object ‘comment’ that becomes a created element (of type div). Then I want to add innerHTML (as text from my AJAX responseText) and add an ID (again based on the responseText I get back). Then I am getting the div from the actual page (which will be ‘review_x’ where x is a number). At this point I want to append the text from the comment div to that original review_x div using appendChild.
However, it is giving me the following error:
Code:
Uncaught TypeError: Cannot call method 'appendChild' of undefined
This is for the line that is in bold below:
Code:
function showComments(reviewId){
'use strict';
var ajax = getXMLHttpRequestObject();
if (ajax) {
var currentReviewId = reviewId;
// Create the Ajax object:
ajax.onreadystatechange = function() {
if (ajax.readyState === 4){
//Check the status code:
if ( (ajax.status >= 200 && ajax.status < 300) || (ajax.status === 304) ) {
var commentResponse = JSON.parse(ajax.responseText);
var i = 1;
while (commentResponse[i]) {
var comment = {}; //initialize comment object
comment = document.createElement('div'); // set comment object equal to newly created div element
comment.innerHTML = "Posted by: " + commentResponse[i].submitted_by_id + " | " +
"Submitted" + commentResponse[i].date_of_submission + "\n"; //set innerHTML property equal to some of the responseText
comment.innerHTML += commentResponse[i].text; //concatenate some more of the responseText to comment's innerHTML
comment.id = "comment_" + commentResponse[i].commentId; //set the id property of the comment object equal to concatenation of 'comment_' plus responseText's commentId property.
var relatedReview = {name: document.getElementById["review_" + commentResponse[i].review_id]}; //create new object relatedReview and set the name equal to 'review_' plus responseText's commentId property
relatedReview.name.appendChild(comment); // this is the line giving me an error, it is saying "cannot call method 'appendChild' of undefined
i++;
} //end of response text check
} //end of Ajax connectivity check
else { //if Ajax status text is a failure
}
} //end of Ajax ready state
}; //end of function for execution on ready state change
var data = 'currentReviewId=' + encodeURIComponent(currentReviewId);
ajax.open('GET', '../resources/find_comments.php?' + data, true);
ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
ajax.send(data);
} //end if ajax object exists
else {
} //end if it doesn't exist
} //end of showComments
I am not that familiar with initializing, defining / setting, and using objects. What am I doing wrong? Any help would be greatly appreciated!
For reference, here is the responseText (from the dev console in Chrome):
Code:
1: {commentId:1, text:This is a comment, date_of_submission:2012-10-07 20:53:06, submitted_by_id:1,…}
commentId: "1"
comment_level: "1"
date_of_submission: "2012-10-07 20:53:06"
parent_comment_id: "0"
review_id: "9"
submitted_by_id: "1"
text: "This is a comment"
Before you post, read our: 
