CODEWITHSUNDEEP
javascriptajax
senK
senK

Reputation: 2802

Doesnot returning an select object with options populated through ajax in javascript

Doesnot returning an select object with options populated through ajax in javascript

Below i am adding the html DOM row with the existing html table,where the html table has three columns one with name and another with select box and final one having button to save the options with the name dynamically through ajax

thus the function to create row is

function createTable(row){
  var table = document.getElementById("table");
  var row = table.insertRow(row);
  var cell1 = row.insertCell(0);
  cell1.innerHTML = "something";
  var cell2 = row.insertCell(1);
  cell6.appendChild(createSelctbox());
  ...
 ..
}

and the ajax call to create select object with its option is 

function createSelctbox(){
var selec = document.createElement("select");
var xmlhttp = getXMLObject();
if(xmlhttp)
{
    xmlhttp.open("POST","some.php",true);
    xmlhttp.onreadystatechange  = function()
    {
    if (xmlhttp.readyState == 4)
    {
        if(xmlhttp.status == 200)
        {

        var data = JSON.parse(xmlhttp.responseText);

        var option;
        for(var i=0;i<data.length;i++){
            option = document.createElement('option');
            option.value=data[i].id;
            option.appendChild(document.createTextNode(""+data[i].something+""));
            selec.appendChild(option);
        }   
        return selec;
        }
    }
    }
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlhttp.send("display="+type);              

}

So is this possible to return like this

Upvotes: 0

Views: 216

Answers (2)

code-jaff
code-jaff

Reputation: 9330

I highly suspect that, the problem is with the async option

you could try by changing this line

xmlhttp.open("POST","some.php",true);

to

xmlhttp.open("POST","some.php",false);

Upvotes: 1

suresh gopal
suresh gopal

Reputation: 3156

We unable to add <option>xx</option> parts in select box dynamically.
Instead you can try to create full select box.

i.e,

<select>
   <option>1</option>
   <option>2</option>
</select>

if you want to add <option>3</option>, then you should make new select box with newly added item.

cheers.

Upvotes: 1

Related Questions