AJAX getting truncated on paragraph
I'm having a strange problem when trying to updated a div with a couple of paragrahs of text from AJAX.
Here are functions I'm using:
var receivePapers = getXmlHttpRequestObject();
function get_papers(myCat){
if (receivePapers.readyState == 4 || receivePapers.readyState == 0) {
receivePapers.open("GET", 'http://server/path/tocode/file.php?get_papers=1&student_id=1&category=' + myCat, true);
receivePapers.onreadystatechange = handlereceivePapers;
receivePapers.send(null);
}
}
function handlereceivePapers() {
if (receivePapers.readyState == 4) {
var container_div = document.getElementById('paper_container');
var xmldoc = receivePapers.responseXML;
var paper_nodes = xmldoc.getElementsByTagName("paper");
var n_papers = paper_nodes.length;
// Clear the whole container div.
container_div.innerHTML = "";
container_div.innerHTML = "<table class='categoryHeader' width='100%'><tr><th class ='categoryHeader' width='80%' ><br/> " + paper_nodes[1].getElementsByTagName("category")[0].firstChild.nodeValue + "</br> <br/><br/></th></tr>";
container_div.innerHTML += "<tr><td>";
for (i = 0; i < n_papers; i++) {
var paper_id = paper_nodes[i].getElementsByTagName("paper_id");
var paper_title = paper_nodes[i].getElementsByTagName("paper_title");
var paper_desc = paper_nodes[i].getElementsByTagName("paper_desc");
var paper_time = paper_nodes[i].getElementsByTagName("paper_time");
var user_real_name = paper_nodes[i].getElementsByTagName("user_real_name");
var summary_div = document.createElement('div');
summary_div.innerHTML += "<table class='paper'><tr><td class='paperLike开发者_开发技巧' width=80px rowspan=2 valign='top'><div id='" + paper_id[0].firstChild.nodeValue + "'><a href='#' onclick=\"vote('" + paper_id[0].firstChild.nodeValue + "'); event.returnValue=false; return false;\"> <img src='images/Like.png' style='padding-top:5px' border='0' /></a></div></td><td><table width='100%'><tr><td class='paperTitle' style='background-color:white; text-align=left; '><a class='paperTitle' style='padding-left:0;' href='#" + paper_id[0].firstChild.nodeValue + "'>" + paper_title[0].firstChild.nodeValue + "</a></td><td class='paperName' style='margin-right:0; width:200px; background-color:white; text-align:right; vertical-align:text-top;'><span align='right' style='background-color:white; text-align:right; vertical-align:text-top; ' > " + user_real_name[0].firstChild.nodeValue + "</span></td></tr></table></td><td rowspan='2' class='paperLength' style='width:80px; text-align:right; padding-top:8px;' >" + paper_time[0].firstChild.nodeValue + " minutes</td></tr><tr><td class='paperDescription' align='left' colspan='1'>" + paper_desc[0].firstChild.nodeValue + "</td></tr></table>";
container_div.appendChild(summary_div);
}
container_div.innerHTML += "</tr></td></table";
}
}
Here is the XML that's getting returned:
<root>
<paper id="23">
<paper_id>23</paper_id>
<paper_title>title</paper_title>
<paper_desc>
First paragraph of desc
<br/>
<br/>
Second paragraph of desc
<br/>
<br/>
Third paragraph of desc
<br/>
</paper_desc>
<paper_time>45</paper_time>
<user_real_name>Bob Student</user_real_name>
<user_id>2322</user_id>
<category>Languages</category>
</paper>
...
When I push the content to container_div only the first paragraph is showing up. If I stick a Javascript alert() in to return paper_desc it only contains the first paragraph. I've tried looking for other nodes but this says there's only 1 node:
alert(paper_nodes[i].getElementsByTagName("paper_desc").length);
You use paper_desc[0].firstChild.nodeValue
paper_desc[0] is a set of nodes: text nodes and br nodes. You get only the first child of this set, so you get only the first text.
Your alert() call only shows you have only one paper_desc node, not how many nodes you have inside.
I also found strange that you used paper_nodes[1] but I don't know if there is a second node in your XML and if you really want to target it.
精彩评论