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