Question

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.

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.

how do I get it into the same format as the surrounding divs?
I’ll make this as brief as possible…

three column layout, inside three column layout…

<div class="wrapper threecol">
<div class="colmid">
    <div class="colleft">
        <div class="col1">
            <div class="friends">   
            <div class="colwrap st-leftmenu">
                <c:forEach var="st" items="${news}">
                <div class="st-colleft">
                <div class="st-col1">
                <div class="statusName">
                    ${st.name}
                </div>
                        <%-- date, comment, pic etc. omitted --%>

                </div> <%-- end st-col2 --%>
                </div> <%-- end div class st-colleft --%> 
                </c:forEach>
                </div> <%-- end div class colwrap st leftmenu --%>

                        <%-- add new stuff here dynamically --%>
                <div id="showExtra"></div>

                <a href="javascript:void(0)" onclick="moreStatus()">get more</a>
            </div> <%-- end div class friends --%>
            </div> <%-- end col1 --%>

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…

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<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);
        }
    }
}

}

Gah! Thanks for reading this far.

Well, that wasn’t brief at all really.
In fact, it’s probably unnecessary.

What’s the correct approach here?
How can I get nameTextNode and all his friends to sit in the same place as ${st.name}?

Answer 1

You are not showing your CSS, so it is hard to say exactly what is breaking. My guess would be that because you are nesting the new elements inside this “showExtra” div, you are breaking the CSS selectors. You should probably just add the new elements at the same level as the existing ones, that is inside this element

<div class="colwrap st-leftmenu">

Also you probably need to look at your use of id properties in your tags. Id should be unique values and based on your looping structure, it look like you would get multiple items with the same id of “statusNameDiv”.