As expected, defining the onchange event in javascript fixes it.I ended up refactoring a bit my code and spliting it into 2 files:/org/alfresco/components/form/controls/cascading-dropdowns.ftl :<#include "/org/alfresco/components/form/controls/common/utils.inc.ftl" /><#include "/org/alfresco/components/form/controls/common/cascadingDropdownUtils.inc.ftl" /><!– current value –><#assign fieldValue=field.value><!– handle default value for empty current value –><#if fieldValue?string == "" && field.control.params.defaultValueContextProperty??> <#if context.properties[field.control.params.defaultValueContextProperty]??> <#assign fieldValue = context.properties[field.control.params.defaultValueContextProperty]> <#elseif args[field.control.params.defaultValueContextProperty]??> <#assign fieldValue = args[field.control.params.defaultValueContextProperty]> </#if></#if><div class="form-field"> <!– readonly mode. No action required, display the composed value as is –> <#if form.mode == "view"> <div class="viewmode-field"> <#if field.mandatory && !(fieldValue?is_number) && fieldValue?string == ""> <span class="incomplete-warning"><img src="${url.context}/res/components/form/images/warning-16.png" title="${msg("form.field.incomplete" )}" /><span> </#if> <span class="viewmode-label">${field.label?html}:</span> <#if fieldValue?string == ""> <#assign valueToShow=msg("form.control.novalue" )> <#else> <#assign valueToShow=fieldValue> <#if field.control.params.options?? && field.control.params.options != ""> <#list field.control.params.options?split(optionSeparator) as nameValue> <#if nameValue?index_of(labelSeparator) == -1> <#if nameValue == fieldValue?string || (fieldValue?is_number && fieldValue?c == nameValue)> <#assign valueToShow=nameValue> <#break> </#if> <#else> <#assign choice=nameValue?split(labelSeparator)> <#if choice[0] == fieldValue?string || (fieldValue?is_number && fieldValue?c == choice[0])> <#assign valueToShow=msgValue(choice[1])> <#break> </#if> </#if> </#list> </#if> </#if> <span class="viewmode-value">${valueToShow?html}</span> </div> <#else> <!– Editable mode. –> <!– let's keep a single label for both fields –> <label for="${fieldHtmlId}">${field.label?html}:<#if field.mandatory><span class="mandatory-indicator">${msg("form.required.fields.marker" )}</span></#if></label> <#if field.control.params.options?? && field.control.params.options != ""> <!– first select for the parent value –> <select id="parent-${fieldHtmlId}" tabindex="0" <#if field.description??>title="${field.description}"</#if> <#if field.control.params.size??>size="${field.control.params.size}"</#if> <#if field.control.params.styleClass??>class="${field.control.params.styleClass}"</#if> <#if field.control.params.style??>style="${field.control.params.style}"</#if> <#if field.disabled && !(field.control.params.forceEditable?? && field.control.params.forceEditable == "true" )>disabled="true"</#if>> </select> <!– second select for the child value –> <select id="child-${fieldHtmlId}" name="${field.name}" tabindex="0" <#if field.description??>title="${field.description}"</#if> <#if field.control.params.size??>size="${field.control.params.size}"</#if> <#if field.control.params.styleClass??>class="${field.control.params.styleClass}"</#if> <#if field.control.params.style??>style="${field.control.params.style}"</#if> <#if field.disabled && !(field.control.params.forceEditable?? && field.control.params.forceEditable == "true" )>disabled="true"</#if>> </select> <!– hidden field containing the final value (e.g. the one sent to the server and stored in database) –> <input type="hidden" id="${fieldHtmlId}" name="${field.name}" /> <@formLib.renderFieldHelp field=field /> <#else> <div id="${fieldHtmlId}" class="missing-options">${msg("form.control.selectone.missing-options" )}</div> </#if> </#if></div><!– IMPORTANT: this script must execute after the fields are created –><script type="text/javascript">//<![CDATA[ setTimeout(function(){populateSelects("${field.control.params.options}", "${fieldValue}", "parent-${fieldHtmlId}", "child-${fieldHtmlId}", "${fieldHtmlId}");}, 1000);//]]></script>
and /org/alfresco/components/form/controls/common/cascadingDropdownUtils.inc.ftl :<!– defines how the option list elements are separated when passed to the client –><#if field.control.params.optionSeparator??> <#assign optionSeparator=field.control.params.optionSeparator><#else> <#assign optionSeparator=","></#if><!– defines how the label list elements are separated when passed to the client –><#if field.control.params.labelSeparator??> <#assign labelSeparator=field.control.params.labelSeparator><#else> <#assign labelSeparator="|"></#if><script type="text/javascript">//<![CDATA[<!– defines how the option list elements are separated when passed to the client –><#if field.control.params.optionSeparator??> <#assign optionSeparator=field.control.params.optionSeparator><#else> <#assign optionSeparator=","></#if><!– defines how the label list elements are separated when passed to the client –><#if field.control.params.labelSeparator??> <#assign labelSeparator=field.control.params.labelSeparator><#else> <#assign labelSeparator="|"></#if><script type="text/javascript">//<![CDATA[ /* string used to separate the parent from the child */ var OPTION_SEPARATOR = "/"; /** * Functions used to split and synchronize the data between the 2 lists. **/ /** * @param stringValues: string containing the available values for the given field * @returns a javascript object containing those values **/ function getValsArrayFromString(stringValues) { //array with the options var valsArray = stringValues.split("${optionSeparator}"); //remove the labels for (var i = 0; i < valsArray.length; i++) { if(valsArray.indexOf("${labelSeparator}") != -1) { valsArray = valsArray.substr(0,valsArray.indexOf("${labelSeparator}")); } } return valsArray; } /** * Extracts the parent value from the full value of the option **/ function getParentValue(fullValue) { return fullValue.substr(0,fullValue.indexOf(OPTION_SEPARATOR)); } /** * Extracts the child value from the full value of the option **/ function getChildValue(fullValue) { return fullValue.substr(fullValue.indexOf(OPTION_SEPARATOR) + 1); } /** * Parent value have been changed. * Reset the current total value, child value and updates the available child values **/ function onChangeParentValue(valsArray, parentId, childId, totalId) { var parentValue = document.getElementById(parentId).value; var childSelect = document.getElementById(childId); /* empty the child select */ while(childSelect.firstChild) { childSelect.removeChild(childSelect.firstChild); } /* fill the child select with the new values */ for (var i = 0; i < valsArray.length; i++) { if ( getParentValue(valsArray) == parentValue) { var childValue = getChildValue(valsArray); var childOption = document.createElement("option"); childOption.value = childValue; childOption.innerHTML = childValue; childSelect.appendChild(childOption); } } } /** * Child value have been changed. * Update the total value **/ function onChangeChildValue(parentId, childId, totalId) { var parentValue = document.getElementById(parentId).value; var childValue = document.getElementById(childId).value; document.getElementById(totalId).value = parentValue + OPTION_SEPARATOR + childValue; } /** * Initial filling of the parent values available * TODO: handle default value **/ function populateSelects(stringValues, initialValue, parentId, childId, totalId) { /* get an array from the string values */ var valsArray = getValsArrayFromString(stringValues); var parentSelect = document.getElementById(parentId); /* we only want to display each parent value once. This object keeps track of the already added ones */ var uniqueParentValues = {}; /* populate parent select */ for (var i = 0; i < valsArray.length; i++) { var realV = getParentValue(valsArray); if(!uniqueParentValues.hasOwnProperty(realV)) { uniqueParentValues[realV] = true; /* create new option for the parent select */ var parOption = document.createElement("option"); parOption.value = realV; parOption.innerHTML = realV; if(realV == getParentValue(initialValue)) { parOption.selected = "selected"; } parentSelect.appendChild(parOption); } } parentSelect.onchange = function(){onChangeParentValue(valsArray, parentId, childId, totalId);}; /* populate child select */ onChangeParentValue(valsArray, parentId, childId, totalId); /* sets the correct child value */ var childSelect = document.getElementById(childId); childSelect.value = getChildValue(initialValue); childSelect.onchange = function(){onChangeChildValue(parentId, childId, totalId);}; onChangeChildValue(parentId, childId, totalId); }//]]></script>
IE advanced search now works as expected.
roducta" label="My Product">
