Databases
StackOverflow2013
Postsdbo
POCSS doesn't work when dynamically adding elements to page using javascript
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS doesn't work when dynamically adding elements to page using javascript
    primarykey
    data
    text
    <p>I want to dynamically add news updates to a page. When you log in, you get 20 news items. Scroll down to the bottom and there's a "more" button. Click it and some ajax fetches 20 more in json form from the server. Javascript parses the json into name, date, comment, pic etc.</p> <p>the good news is that it kind of works. I can make text nodes for each name date comment etc. and add them to a id="more" div, and it all comes out in a blurb.</p> <p>how do I get it into the same format as the surrounding divs? I'll make this as brief as possible...</p> <p>three column layout, inside three column layout...</p> <pre><code>&lt;div class="wrapper threecol"&gt; &lt;div class="colmid"&gt; &lt;div class="colleft"&gt; &lt;div class="col1"&gt; &lt;div class="friends"&gt; &lt;div class="colwrap st-leftmenu"&gt; &lt;c:forEach var="st" items="${news}"&gt; &lt;div class="st-colleft"&gt; &lt;div class="st-col1"&gt; &lt;div class="statusName"&gt; ${st.name} &lt;/div&gt; &lt;%-- date, comment, pic etc. omitted --%&gt; &lt;/div&gt; &lt;%-- end st-col2 --%&gt; &lt;/div&gt; &lt;%-- end div class st-colleft --%&gt; &lt;/c:forEach&gt; &lt;/div&gt; &lt;%-- end div class colwrap st leftmenu --%&gt; &lt;%-- add new stuff here dynamically --%&gt; &lt;div id="showExtra"&gt;&lt;/div&gt; &lt;a href="javascript:void(0)" onclick="moreStatus()"&gt;get more&lt;/a&gt; &lt;/div&gt; &lt;%-- end div class friends --%&gt; &lt;/div&gt; &lt;%-- end col1 --%&gt; </code></pre> <p>I'm trying to add to the id="showExtra" div, which partly works as above. I tried creating a complicated nested div structure in js. that got me part of the way there, but that can't be the way to do it... it's a bit of a mess, sorry...</p> <pre><code>function showMoreStatus(){ var moreDiv = document.getElementById('showExtra'); var moreJSON = new Array(); if(request.readyState == 4) { if (request.status == 200) { moreJSON = eval('(' + request.responseText + ')'); for(var i=0; i&lt;moreJSON.length; i++) { //get values from JSON var JSONName = moreJSON[i][2]; // and others... //create text nodes, a href and img var nameTextNode = document.createTextNode(JSONName); // and other nodes, imgs, hrefs etc... // surely this is NOT the way to do it! //column divs var outColDiv = document.createElement("div"); outColDiv.setAttribute("class", "col1"); var friendsDiv = document.createElement("div"); friendsDiv.setAttribute("class", "friends"); var colLeftDiv = document.createElement("div"); colLeftDiv.setAttribute("class", "st-colleft"); var col1Div = document.createElement("div"); col1Div.setAttribute("class", "st-col1"); var col2Div = document.createElement("div"); col2Div.setAttribute("class", "st-col2"); colLeftDiv.appendChild(col1Div); colLeftDiv.appendChild(col2Div); friendsDiv.appendChild(colLeftDiv); outColDiv.appendChild(friendsDiv); var nameDiv = document.createElement("div"); nameDiv.setAttribute("class", "statusName"); // and others... // append nodes to divs nameDiv.appendChild(nameTextNode); col1Div.appendChild(nameDiv); col1Div.appendChild(dateDiv); col1Div.appendChild(contentDiv); // append the page moreDiv.appendChild(outColDiv); } } } </code></pre> <p>}</p> <p>Gah! Thanks for reading this far.</p> <p>Well, that wasn't brief at all really. In fact, it's probably unnecessary.</p> <p>What's the correct approach here? How can I get nameTextNode and all his friends to sit in the same place as ${st.name}?</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USgrooble
    1. USgrooble
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POCSS doesn't work when dynamically adding elements to page using javascript
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI'd advise that at a minimum you might want to look at using JQuery for DOM manipulation, it makes things so much nicer. If you're planning to do a lot of this type of code you might also look at something like mustache to create html format templates (for a production release you can build them into a JS file).
      singulars
      1. POCSS doesn't work when dynamically adding elements to page using javascript
      1. USRobert
    2. COEveryone seems to like JQuery. High time I got with the program.
      singulars
      1. POCSS doesn't work when dynamically adding elements to page using javascript
      1. USgrooble
 

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