Databases
StackOverflow2013
Postsdbo
POJavascript DOM errors
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJavascript DOM errors
    primarykey
    data
    text
    <p>this is my javascript code , I am trying to create a dynamic list in HTML with data I recieve from the server , The data is of type "json"</p> <p>My Javascript snippet </p> <pre><code>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 &lt; 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); } //}*/ </code></pre> <p>My html code is</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;head&gt; &lt;script ...&gt; &lt;head&gt; &lt;body onLoad="addBooks()"&gt; &lt;div id="addBooks" class="row-fluid"&gt; &lt;div id="gBookList"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>I keep getting the following error which prevents me from populating the list , I am using chrome </p> <p>1) Uncaught TypeError: Cannot call method 'appendChild' of null<br> 2) Uncaught TypeError: Cannot read property 'length' of undefined </p> <p>I do not understand why this should happen as the .length commands returns the correct integer ( amount of json objects) when I debug using a alert box . </p> <p>the function that calls it</p> <pre><code>$.ajax({ type: 'GET', url: ........, dataType: "json", complete: function (xhr, statusText) { alert(xhr.status); }, success: function (data, textStatus, jqXHR) { alert(JSON.stringify(data)); window.location.replace("Page2_updated.html"); addBooks(data); // Passing JSON to be replaced on page }, function (data, textStatus, jqXHR) { alert(data); alert('error'); }, </code></pre> <h2> });</h2> <p>Edit</p> <p>I changed my HTML file to the following structure after advice on this forum</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="1" "display:block"&gt; &lt;/div&gt; &lt;div id="2" "display:none"&gt; // no onLoad() anymore!! &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>I have edited this part int he calling function</p> <pre><code> $.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'); }, }); </code></pre> <p>But I still get the following errors Uncaught TypeError: Cannot call method 'appendChild' of null Uncaught TypeError: Cannot read property 'length' of undefined </p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USRahul Kumar
    1. USRahul Kumar
    plurals
    1. PL
      singulars
      1. LTLinked
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTDuplicate
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POJavascript DOM errors
      1. This table or related slice is empty.
      1. VTUpMod
    1. COSO copes well with HTML tags. Also, you appear to be closing the head tag after the body tag is closed. This is not correct.
      singulars
      1. POJavascript DOM errors
      1. USLee Taylor
    2. COLooks like SO can output HTML code perfectly...
      singulars
      1. POJavascript DOM errors
      1. USFelix Kling
    3. COPrint your "data" variable, seems to be null cause of the errors you said.
      singulars
      1. POJavascript DOM errors
      1. USOscar Jara
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload