Start Building Professional
Web Apps Today

ComboBox - Stack Overflow

Hi,

if i set a select option in on change event, i will get an stack overflow error message in ie6.

My approach is, that an user does selection over an cascade of 3 comboboxes. if the user chooses an antry of the 4th box, the selected entry of this box should be cleared.
<table>
<tr>
<td><div id="group" style="width:200px; height:16px;"></div></td>
</tr>
<tr>
<td><div id="characteristic" style="width:200px; height:16px;"></div></td>
</tr>
<tr>
<td><div id="value" style="width:200px; height:16px;"></div></td>

<td rowspan="3"><div id="operandBox" style="width:100px; height:16px; display:none" >
<select style='width:100px;' id="operand" name="operand">
<option value="" selected></option>
<option value="a">and</option>
<option value="o">or</option>
<option value="n">not</option>
</select>
</div></td>
</tr>
<table>

<script>


var operand = dhtmlXComboFromSelect("operand");
operand.attachEvent("onChange",onChangeOperand);

var value = new dhtmlXCombo("value","value",200);
value.loadXML("value.xml");
value.attachEvent("onChange",onChangeValue);


var characteristic = new dhtmlXCombo("characteristic","characteristic",200);
characteristic.enableFilteringMode(true);
characteristic.attachChildCombo(value,"value.xml");
characteristic.loadXML("characteristic.xml");

var group = new dhtmlXCombo("group","group",200);
group.enableFilteringMode(true);
group.attachChildCombo(characteristic,"characteristic.xml");
group.loadXML("group.xml");

function onChangeValue()
{
if(value.getActualValue()){ }
else{ }
}

function onChangeOperand()
{
if(operand.getActualValue()){add(characteristic.getActualValue(),value.getActualValue(),operand.getActualValue());}
else{ }
operand.selectOption('0');
}

function add(characteristic,value,operand)
{



}

</script>

Best regards, Stefan

>>if i set a select option in on change event, i will get an stack overflow error message in ie6.
selection of new option will generate new onChange event which will change selection and so for, which will cause stack onverflow
You can add some kind of flag to prevent unwanted recursion 

var prevent_call=false;
function onChangeOperand() 
{ 
if (prevent_call) {
   prevent_call=false; 
   return true;
}
if(operand.getActualValue()){add(characteristic.getActualValue(),value.getActualValue(),operand.getActualValue());} 
else{ } 
prevent_call=true;
operand.selectOption('0'); 
} 

... ok, but now nothing happens. The statement  operand.selectOption('0'); does nothing :-(

 

Here's the complete coding: i am using the script files from the enterprise suite

        <link rel="STYLESHEET" type="text/css" href="../../libraries/dhtmlx/combobox/dhtmlxcombo.css">
      <script  src="../../libraries/dhtmlx/combobox/dhtmlxcommon.js"></script>
      <script  src="../../libraries/dhtmlx/combobox/dhtmlxcombo.js"></script>
      <script  src="../../libraries/dhtmlx/combobox/dhtmlxcombo_group.js"></script>

           <table>
           <tr>
             <td><div id="group" style="width:200px; height:16px;"></div></td>
           </tr>
           <tr>
            <td><div id="characteristic" style="width:200px; height:16px;"></div></td>
           </tr>
           <tr>
             <td><div id="value" style="width:200px; height:16px;"></div></td>
             
             <td rowspan="3"><div id="operandBox" style="width:100px; height:16px; display:none" >
              <select style='width:100px;'  id="operand" name="operand">
                <option value="" selected></option>              
                <option value="a">and</option>
                <option value="o">or</option>
                <option value="n">not</option>
              </select>
             </div></td>
           </tr>
         <table>
        

         <script>
          
         
          var operand = dhtmlXComboFromSelect("operand");
          operand.attachEvent("onChange",onChangeOperand);
          
          var value = new dhtmlXCombo("value","value",200);
          value.loadXML("value.xml");
          value.attachEvent("onChange",onChangeValue);


          var characteristic = new dhtmlXCombo("characteristic","characteristic",200);
          characteristic.enableFilteringMode(true);
          characteristic.attachChildCombo(value,"value.xml");
          characteristic.loadXML("characteristic.xml");

          var group = new dhtmlXCombo("group","group",200);
          group.enableFilteringMode(true);
          group.attachChildCombo(characteristic,"characteristic.xml");
          group.loadXML("group.xml");
          
          var prevent_call=false;
          function onChangeValue()
           {
            if(value.getActualValue()){$("#operandBox").show();}
            else{                      $("#operandBox").hide();}  
           }
           
         /* function onChangeOperand()
           {
            if(operand.getActualValue()){add(characteristic.getActualValue(),value.getActualValue(),operand.getActualValue());}
            else{                       } 
            //operand.selectOption('1'); 
            operand.unSelectOption();
           }
           */
           
           
          function onChangeOperand() 
           { 
            if (prevent_call) return; 
            prevent_call=false;
            if(operand.getActualValue()){add(characteristic.getActualValue(),value.getActualValue(),operand.getActualValue());} 
            else{ } 
            prevent_call=true;
            alert();
            operand.selectOption('0'); 
           } 
           
          function add(characteristic,value,operand)
           {
           
           }
           
        </script>

 

The xml files are generated by your example:

 

You can try to use another approach to select option without onChange call:

function onChangeOperand() 

if(operand.getActualValue()){add(characteristic.getActualValue(),value.getActualValue(),operand.getActualValue());}

operand.selectOption(0,0,0); 

} 

... there is now no error, but simply no effect :-(

 

Best regards, Stefan