Home/ Questions/Q 8265691
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T04:53:39+00:00

Possible Duplicate: Javascript DOM errors I have my following html code: <html> <head> </head>

  • 0

Possible Duplicate:
Javascript DOM errors

I have my following html code:

<html>
<head>
</head>
<body>
<div id="1" "display:block">
</div>
<div id="2" "display:none">  // no onLoad() anymore!!
</div>
</body>
</html>

My JavaScript code is as follows:

$.ajax({
        type: 'GET',
        url: ........,
        dataType: "json",
        complete: function (xhr, statusText) {
            alert(xhr.status);
        },
        success: function (data, textStatus, jqXHR) {
            alert(JSON.stringify(data));
            if(document.getElementById(1).style.display == "block"){ 
                document.getElementById(1).style.display = "none"; 
                document.getElementById(2).style.display = "block"; }
            addBooks(data); // Passing JSON to be replaced on page
        },

        function (data, textStatus, jqXHR) {
            alert(data);
            alert('error');
        },
    });

function addBooks(data) { // USing DOM to populate the tables 


    //var  newdata=document.getElementById('addBooks');
    //newdata.setattribute()

    //get the unordered list

    var newdata = document.getElementById('addBooks');
    var parent = document.getElementById('gBookList');
    //removeChildrenFromNode(parent);

    //create list divider
    var listdiv = document.createElement('li');
    listdiv.setAttribute('id', 'gBookListDiv');
    listdiv.innerHTML = ("Books Found:");
    parent.appendChild(listdiv);
    // (this is where the first error happens)

    //create dynamic list

    for (i = 0; i < data.length; i++) {
        // (this is where the second error happens)



        //create each list item 
        var listItem = document.createElement('li');
        listItem.setAttribute('id', 'gBookListItem');
        parent.appendChild(listItem);
        //var link = document.createElement('a');
        //link.setAttribute('onclick','displayBook(data[i])');
        //link.setAttribute('href','#FindBook)');
        //listItem.appendChild(link);
        var pic = document.createElement('img');
        pic.setAttribute('src', data[i].pictureURL);
        pic.setAttribute('width', '80px');
        pic.setAttribute('height', '100px');
        pic.setAttribute('style', 'padding-left: 10px');
        link.appendChild(pic);
        var brk = document.createElement('br')
        link.appendChild(brk);
        var title = document.createElement('p');
        title.innerHTML = data[i].title;
        title.setAttribute = ('style', 'float:right');
        link.appendChild(title);
        var author = document.createElement('p');
        author.innerHTML = data[i].author;
        link.appendChild(author);
    }
    var list = document.getElementById('gBookList');
    // $(list).listview("refresh");
}

/*function removeChildrenFromNode(node){
            while (node.hasChildNodes()){
                node.removeChild(node.firstChild);
            }
        //}*/

I keep getting the following error which prevents me from populating the list , I am using Chrome

  1. Uncaught TypeError: Cannot call method ‘appendChild’ of null
  2. Uncaught TypeError: Cannot read property ‘length’ of undefined

I have posted this question yesterday, but I just wanted a fresh perspective on what the error could be.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There could be a few issues here :-

    • Are you doing this cross domain? If you are consider using JSONP instead which will solve some of the issues you may be seeing with data being “withheld” due to security policies.

    • You are also accessing a varible and making a assumption it has a value

      var parent = document.getElementById('gBookList');

      Before you use the parent tag, you should ensure that its not null (or a empty reference) and that the element (gBookList) does infact exist in your document.

    • 0