can't get the text from a div, neither when I try to use innerHTML or when I try to walk the DOM

[Jake Barnes]

In the function below I use a call to Prototype to get some text from
another webpage and I fill a div with it. You can see the red, narrow
div halfway down this page:

http://www.accumulist.com/index.php?whatPage=addAnEntry.php

You can see the div is full of text. But when I try to get this text, I
get nothing. When I test for childNodes I get zero, and when I try
innerHTML I get nothing. Prototype is suppose to update the innerHTML
of the target div, so that should work, but it is not.

I can see the text on screen, so why am I not able to capture it with
my script?



unction getPopularTagsFromAccumulist() {
// 04-06-06 - when people enter a new item into Accumulist.com or
Mp3Classifieds.com we want
// the form to auto-suggest to them what some likely categories
might be. So, for instance,
// on this page:
//
// http://www.accumulist.com/index.php?whatPage=addAnEntry.php
//
// where the visitor might type in "General Category" we want to
suggest something in the same
// way that flickr and del.icio.us do.
//
// The first step in the process is to get the most popular tags in
the Accumulist database. We
// will use Prototype to fetch this info for us from this page:
//
//
http://www.accumulist.com/output.php?whatPage=showTagCloudWithCommas&howManyTagsToGet=200
//
// but even before that, we must create a place where the result can
be stored. We don't need
// to make this container visible on screen.

var containerForPopularTagsTextArea = document.createElement("div");

containerForPopularTagsTextArea.id = 'output-div';
containerForPopularTagsTextArea.style.backgroundColor = "#944";
containerForPopularTagsTextArea.style.height = "800px;";
containerForPopularTagsTextArea.style.width = "200px;";

var refToBody = document.getElementById("main");
refToBody.appendChild(containerForPopularTagsTextArea);

var url = "http://www.accumulist.com/output.php";
var pars = 'whatPage=showTagCloudWithCommas&howManyTagsToGet=200';
var target = 'output-div';
var myAjax = new Ajax.Updater(target, url, {method: 'get',
parameters: pars});

var refToTagDiv = document.getElementById("output-div");
var nodeNumber = refToTagDiv.childNodes;
var contentsOfContainer = refToTagDiv.innerHTML;
var containerValue = refToTagDiv.value;
alert ("the number of nodes: " + nodeNumber.length + " and the
wrods: " + contentsOfContainer + containerValue);
}

 

[Jake Barnes]

I mean, its a little surreal. If you go to this page you can see the
red box with text:

http://www.accumulist.com/index.php?whatPage=addAnEntry.php

and yet nothing I do can get the contents of that box:

var refToTagDiv = document.getElementById("output-div");
var nodeNumber = refToTagDiv.childNodes;
var contentsOfContainer = refToTagDiv.innerHTML;
var containerValue = refToTagDiv.value;
alert ("the number of nodes: " + nodeNumber.length + " and the wrods:
" + contentsOfContainer + containerValue);

The box reports having zero childNodes, blank innerHTML and when I try
"value" (a long shot at best) I get 'undefined'. I can see the text
with my eyes, but nothing I do seems able to capture it.

 

[Jake Barnes]

Okay, I figured this one out myself - I was looking for the answer
before the answer had returned from the server. With this asynchronous
stuff, it is important to make sure the call to the server has
returned, before you go looking for some value.