Populating a dojo dijit/form/FilteringSelect with an Ajax response text

Question

I have two drop downs in my application: to the first drop down (select type of institution), i've attached an onchange event that calls a javascript function (this one makes an ajax call) that is to populate the second drop down (select name of institution). The HTML code looks like this:

<label for="typeHighInst">Type of institution: </label>
          <select data-dojo-type="dijit/form/FilteringSelect" data-dojo-id="typeHighInst" id="typeHighInst" name="typeHighInst" onChange="getInstitution(this.value)">
            <option value="" selected='selected'>-- select institution type -- </option>
            <?php foreach($InstitutionType as $institutiontype): ?>
            <option value="<?php echo $institutiontype['TypeID']; ?>"><?php echo $institutiontype['Description'];  ?>
            </option>
            <?php endforeach; ?>
          </select>
<label for="nameHighInst">Name of institution: </label>
          <select data-dojo-type="dijit/form/Select" data-dojo-id="nameHighInst" id="nameHighInst" name="nameHighInst">
            <option value="" selected='selected'>-- select institution --</option>
          </select>

The javascript code looks like this:

function getInstitution(str)
{
  var xmlhttp;

if (str=="")
{
    document.getElementById("nameHighInst").innerHTML="<option value='' selected='selected'>-- select institution --</option>";
    return;
}
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)
    {
    //alert(xmlhttp.responseText);
    document.getElementById("nameHighInst").innerHTML=xmlhttp.responseText;
    }
}

  xmlhttp.open("GET","includes/getInstitution.php?typeHighInst="+str,true);
  xmlhttp.send();
}

The problem is that when you choose one option from the first drop down (eg University), the second drop down list is still empty (instead of showing list of all universities returned by ajax).

However, when I use the native select tag with the second drop down, all works fine (the select object is effectively populated with the list of all universities).

This is the code using the native select element:

<label for="nameHighInst">Name of institution: </label>
          <select id="nameHighInst" name="nameHighInst">
            <option value="" selected='selected'>-- select institution --</option>
          </select>

Can someone please tell me why it works with the native select element and not with the dijit/form/FilteringSelect widget? I'm a dojo newbie. I would also like to know how to fix it. Though the native select works, i prefer using dojo widgets since i discovered them.

Thanks in advance.

Answer 1

Try using the dojo object to manipulate the list:

  var dojo_obj = dijit.byId("nameHighInst");
  dojo_obj.attr("innerHTML",xmlhttp.responseText);

instead of

  document.getElementById("nameHighInst").innerHTML=xmlhttp.responseText;

What I think you want is this:

  var dojo_obj = dijit.byId("nameHighInst");
  dojo_obj.attr("options",xmlhttp.responseText);

xmlhttp.responseText for options should be in a JSON format:

options: [
  { label: 'TN', value: 'Tennessee' },
  { label: 'VA', value: 'Virginia', selected: true },
  { label: 'WA', value: 'Washington' },
  { label: 'FL', value: 'Florida' },
  { label: 'CA', value: 'California' }
]

Example: http://dojotoolkit.org/reference-guide/1.7/dijit/form/Select.html

Do the same when getting values from a dojo object:

  var dojo_obj = dijit.byId("nameHighInst");
  var val = dojo_obj.attr("value");
  var html = dojo_obj.attr("innerHTML");
  var options = dojo_obj.attr("options");

Answer 2

There are multiple ways of achieving it

First of all dojo will parse your html content onload and then any changes to the inner html of any of the dijit elements will not reflect unless you manually parse it.

if you stick to the html way of changing the options you will have to call

dojo.parser.parse("id of enclosing div");

OR

Using dojo.attr

get the options in JSON format from your ajax response.

    var option = [{
        label: 'TN',
        value: 'Tennessee'
    },
    {
        label: 'VA',
        value: 'Virginia',
    }]

selectObj = dijit.byId("id of element");
selectObj.attr("options",option);

OR

set value of options directly using javascript instead of using .attr function and then restart the component.

selectObj.options = option;//JSON object
selectObj.restart();