Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Attempting to access a dynamically created div

Thread Tools

Attempting to access a dynamically created div
Posts: n/a
I have an autosuggest box which places a list of likely answers into a
static div using ajax. Each answer is itself in a div.

The autosuggest part isn't important, it is working nicely. What
doesn't work is my attempt to select one of the generated divs
containing the suggestions using document.getElementById.

What should happen is a keystroke (down arrow) from inside the text
box should cause the first entry in the list to be highlighted.
Currently the javascript produces the correct id for each div, and
they exist on the page (I can see them using firebug). It also is
producing the correct id when it is attempting to access them . . . it
just isn't working.

This is all made more complicated by the fact that the text boxes
which produce such suggestion lists are dynamically added and numerous
-- but, once again, that part is working fine and they can all

Here are some relevant bits of code.

//AJAX code borrowed from ajax suggest tutorial
//modified enough to make it work the the dynamically placed boxes
that required autosuggesting
//Gets the browser specific XmlHttpRequest Object
function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert("Where did you even find a browser that didn't support
That must have been difficult.");

//this is required to hold the id of the suggest box currently being
//we can only do one at a time with this method
//if they figure out how to type into more than one box at once we're
function idholder() {
var id = "";
var kc = 0;
var sel = 0;

idx = new idholder();
//now we have a global variable idx that the following functions can
use to toss around ids.

var searchReq = getXmlHttpRequestObject();

//Called from keyup on the search textbox.
//Starts the AJAX request.
function typeSuggest(id,ev) { = id;
idx.kc = ev.keyCode;
var str = escape(document.getElementById(id).value);

//This makes sure the search request is ready and that no
inappropriate keys are pressed
if ((searchReq.readyState == 4 || searchReq.readyState == 0)
&& idx.kc != 13 && idx.kc != 38 && idx.kc != 40) {

if (str.length < 1) { return; }"GET", './ajax/suggest.jsp?search=' + str, true);
searchReq.onreadystatechange = handleSearchSuggest;

if(document.getElementById(id).value.length > 0) { keyPoll(); }

//Called when the AJAX response is returned.
function handleSearchSuggest() {
if (searchReq.readyState == 4) {
var ss = document.getElementById( + 'sug');
ss.innerHTML = '';
var str = searchReq.responseText.split("\n");
for(i=0; i < str.length - 1; i++) {
//Build our element string. This is cleaner using the DOM, but
//IE doesn't support dynamically added attributes.
var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
suggest += 'id="sug' + (i+1) + '" ';
suggest += 'onmouseout="javascript:suggestOut(this);" ';
suggest += 'onclick="javascript:setSearch(this.innerHTML);" ';
suggest += 'class="suggest_link">' + str[i] + '</div>';
ss.innerHTML += suggest;

//Mouse over function
function suggestOver(div_value) {
div_value.className = 'suggest_link_over';
//Mouse out function
function suggestOut(div_value) {
div_value.className = 'suggest_link';

//Click function
function setSearch(value) {
document.getElementById( = value;
document.getElementById('sug').innerHTML = '';

//Custom function to shut down the result box when the element in
question loses focus
function shutDown(id) {
document.getElementById(id + 'sug').innerHTML = '';

And here is a sample of the boxes and divs this is being used on:

<input type=text name=to id=to0
onBlur="setTimeout('shutDown(\'to0\');', 250);"
onkeyup="typeSuggest('to0',event);" autocomplete="off">

<div id="to0sug" class="sugdiv"></div>

And the piece of code I'm attempting to use to get to the produced
divs is just document.getElementById('sug1');

So the crux is: that document.getElementById statement is not
retrieving the element that has been placed inside the outer
suggestion div with ajax. There is nothing (functionally, at least)
wrong with the autosuggest functionality other than that -- I simply
can't implement new tricks (like scrolling up and down through the
listed results by keyboard) without being able to use that or a
similar statement.

I know this is complex, so I appreciate any help immensely.
Reply With Quote
Posts: n/a
OK for reasons vastly beyond my merely mortal comprehension it just
started working.
I regret to inform interested parties that I have no idea what I
changed, and I suspect that it was nothing at all.
Reply With Quote

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
Affecting a dynamically created drop down from another dynamically created drop down. msimmons ASP .Net 0 07-16-2009 03:17 PM
<div ... /> and <div ...></div> K Viltersten ASP .Net 4 03-31-2009 07:33 PM
Managing ViewState of a dynamically created Custom Composite Server Control -(where the original is also dynamically created) dickster ASP .Net Building Controls 0 12-08-2005 09:32 AM
NS/FF don't change div offsetWidth when div innerHTML is added toand div becomes wider mscir Javascript 3 06-26-2005 04:04 PM
Q: Div A inside Div B is larger than Div B Dwayne Madsen Javascript 1 06-01-2005 03:02 PM