Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder d'Anconia's Avatar
    Join Date
    Jan 2010
    Location
    Tempe, AZ
    Posts
    149
    Thanks
    16
    Thanked 6 Times in 6 Posts

    Issue With Defining Object and appendChild

    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"
    Datagonia Web (My Portfolio)

    Powerful ideas for all lovers of personal and political freedom:
    Freedomain Radio
    Free Talk Live

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    You should know that name is not advisable as an identifier for anything.

    You should have tested that document.getElementById["review_" + commentResponse[i].review_id]} resolves to a DOM element, which it won't because you're calling a function using [] brackets.

  • #3
    Regular Coder d'Anconia's Avatar
    Join Date
    Jan 2010
    Location
    Tempe, AZ
    Posts
    149
    Thanks
    16
    Thanked 6 Times in 6 Posts
    Nooooooooo way. Hahahahha it worked! Thanks a ton... that was such a rookie mistake I don't know how I didn't catch it before.

    Good to know it was a syntax problem and not a logic or procedural issue. Again, thanks a ton!
    Datagonia Web (My Portfolio)

    Powerful ideas for all lovers of personal and political freedom:
    Freedomain Radio
    Free Talk Live


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •