Dynamically populate dynamically created select list

Question

I'm having a bit of difficulty here; I am using js to dynamically create select boxes, but I need Ajax to fill them with options. So far, my code is returning undefined, and I frankly don't know what to do here. My php returns the info fine, but the js isn't parsing it. Another set of eyes, or another brain full of knowledge would be appreciated here;

function getSkilllist(group) {
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            return xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","skl_lst_gen2.php?group=" + group + "&t=" + Math.random(),true);
    xmlhttp.send();
}

function addInput(divName,group) {
var skillst = getSkilllist(group);
var newdiv = document.createElement('div');
newdiv.innerHTML = '<select name="ski[]">' + skillst + '</select> .....

The rest of the function is fine, but the var skillst is returning undefined as stated, and I can't figure out why. I assume it has something to do with strings, but I can't figure out what needs to be done.

Remember that (normally) Ajax requests are asynchronous, so after the xmlhttp.send() your other code continues executing without waiting for a response and then the response from the Ajax request is processed later. So your getSkilllist function doesn't return anything at all, skillst will be undefined, but your other code continues and the div is created, etc. When the Ajax response comes in the anonymous function you defined for xmlhttp.onreadystatechange will execute, so that's where you need to create the div as per the answer below. — nnnnnn
– nnnnnn, Commented Jun 17, 2011 at 1:08

Femi · Accepted Answer · 2011-06-17 01:02:36Z

1

Your function does not return anything, which is why it isn't working. Try this:

function getSkilllist(group) {
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}
else {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
       var newdiv = document.createElement('div');
       newdiv.innerHTML = '<select name="ski[]">' + xmlhttp.responseText + '</select> .....

       //place in DOM here
    }
}
xmlhttp.open("GET","skl_lst_gen2.php?group=" + group + "&t=" + Math.random(),true);
xmlhttp.send();
}

function addInput(divName,group) {
getSkilllist(group);

answered Jun 17, 2011 at 1:02

Femi

64.8k8 gold badges120 silver badges150 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamically populate dynamically created select list

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related