Attempting to access a dynamically created div

A

alx__21

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
suggest.

Here are some relevant bits of code.

//AJAX code borrowed from www.dynamicajax.com 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
XmlHttpRequest?
That must have been difficult.");
}
}

//this is required to hold the id of the suggest box currently being
used
//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
toast
function idholder() {
var id = "";
var kc = 0;
var sel = 0;
}


idx = new idholder();
idx.sel=0;
//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) {

idx.id = 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; }

searchReq.open("GET", './ajax/suggest.jsp?search=' + str, true);
searchReq.onreadystatechange = handleSearchSuggest;
searchReq.send(null);
}

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(idx.id + '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 + '</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(idx.id).value = value;
document.getElementById(idx.id+'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.
 
A

alx__21

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top