Spring ElementDecoration and AjaxEventDecoration incompatible with Dijit? - spring

Question

I am using Spring 3.0.5, Webflow 2.3.0 and Spring JS for decorating.
One of my forms has the following code:
<form:select path="selection">
<form:option value="" label="Please select"></form:option>
<form:options></form:options>
</form:select>
<noscript>
<button id="btnSelect" type="submit" name="_eventId_dropDownSelectionChange">Select</button>
</noscript>
<script type="text/javascript">
Spring.addDecoration(new Spring.ElementDecoration({
widgetType : "dijit.form.Select",
widgetAttrs : {
forceWidth : true,
missingMessage : "<s:message code="NotEmpty" />",
}
}));
Spring.addDecoration(new Spring.AjaxEventDecoration({
elementId : "selection",
formId : "templateModel",
event : "onChange",
params : { _eventId: "dropDownSelectionChange" }
}));
</script>
The intention is to render a second part of the form depending on what is selected in the dropdown. This is to be achieved either via an AJAX call on the onChange of the dropdown, or in the case of noscript - the pressing of the 'Select' button.
The noscript side of things works. I select something in the dropdown, press 'Select' and the rest of the form is rendered on a refresh.
However, the AJAX call does not have the just-selected value in its request. It's as if the AJAX call happens before the Dijit component has updated its representation. Are these components compatible in the fashion I am using them?
I can get it to work if:
I don't decorate the component as a Dijit component and instead just normal dropdown with an onclick AJAX decoration.
I put the AJAX call on a button instead of on the Dijit onChange

Answer 1

Faced the same issue and the workaround for it is setting the selected value in a hidden field and Spring.AjaxEventDecoration takes care of the rest.
<input id="vehicleType" name="vehicleType" type="hidden" />
<select id="selectVehicle">
<c:forEach var="vehicle" items="${vehicleTypes}">
<option value="${vehicle.type}"><fmt:message key="${vehicle.description}" /></option>
</c:forEach>
</select>
</p>
<script type="text/javascript">
Spring.addDecoration(new Spring.ElementDecoration({
elementId : 'selectVehicle',
widgetType : "dijit.form.Select",
widgetAttrs : {
value : "${vehicleType}",
onChange : function(newValue){
document.getElementById('vehicleType').value=dijit.byId('selectVehicle').get('value');}
}
}));
Spring.addDecoration(new Spring.AjaxEventDecoration({
elementId : "selectVehicle",
formId : "quote",
event : "onChange",
params : {
_eventId : "dropDownVehicleSelectionChange",
fragments : "body"
}
}));
</script>