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.































and

or

not











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 

SPAN { font-family: "Arial monospaced for SAP"; font-size: 8pt; color: #000000; background: #FFFFFF; } .L3S33 { color: #009300; }

operand.selectOption(‘0’); does nothing :frowning:



 



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



 

SPAN { font-family: "Arial monospaced for SAP"; font-size: 8pt; color: #000000; background: #FFFFFF; } .L3S33 { color: #009300; } .L3S50 { color: #00008B; } .L3S51 { color: #8B0000; }

      <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>




 

SPAN { font-family: "Arial monospaced for SAP"; font-size: 8pt; color: #000000; background: #FFFFFF; } .L3S32 { color: #7D9EC0; } .L3S33 { color: #009300; } .L3S50 { color: #00008B; } .L3S51 { color: #8B0000; }

         <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:

  <?xml version="1.0" encoding="iso-8859-1" ?>
- <complete>
  <option value="FILE_INFORMATION">File Information</option>
  <option value="GRAPHICS_PICTURE_SPEZIFICATION">Graphic/Picture Specification</option>
  <option value="INDUSTRY_INFORMATION">Industry Information</option>
  <option value="INDUSTRY_TREE">Industry Tree (Applications)</option>
  <option value="INTERFACES">Interfaces</option>
  <option value="LOCAL_INFORMATION">Master Data</option>
  <option value="MARKETING_COMMUNICATION">Communication (MarComm, public, internal)</option>
  <option value="MARKET_INFORMATION">Market Information</option>
  <option value="MEMO">Extended</option>
  <option value="PRODUCT_INFORMATION">Product Information</option>
  <option value="PRODUCT_TREE">Product Tree</option>
  </complete>
 
and so on.
 
Best reagrds, Stefan

 


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 :frowning:



 



Best regards, Stefan