Attempting to access a dynamically created div

Discussion in 'Javascript' started by, Jan 31, 2008.

  1. Guest

    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 + '</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.
    , Jan 31, 2008
    1. Advertisements

  2. Guest

    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.
    , Jan 31, 2008
    1. Advertisements

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
  2. msimmons
    Jul 16, 2009
  3. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    David Dorward
    Jun 1, 2005
  4. mscir
    Martin Honnen
    Jun 26, 2005
  5. Replies: