SWF 2 AjaxEventDecoration and ElementDecoration

[cmontgomery]

Hello all--

I've been unable to get the Spring AjaxEventDecoration working in conjuction with the Spring ElementDecoration using the widgetType dijit.form.DateTextBox. It doesn't appear as if the AjaxEventDecoration is recognizing the firing of the onchange event, since any changes I make to the date do not kick off the ajax event handler.

I've tried setting up the widget in-line, as in the booking-mvc example, then adding the AjaxEventDecoration:

<form:form id="dateForm" modelAttribute="form">
        <div class="field">
			<div class="label">
				<label for="reportDate">Report Date:</label>
			</div>
			<div class="input">
				<form:input path="reportDate"/>
				<script type="text/javascript">
					Spring.addDecoration(new Spring.ElementDecoration({
						elementId : "reportDate",
						widgetType : "dijit.form.DateTextBox",
						widgetAttrs : { value : dojo.date.locale.parse(dojo.byId("reportDate").value, {selector : "date", datePattern : "yyyy-MM-dd"}), required : true }}));
					Spring.addDecoration(new Spring.AjaxEventDecoration({
						elementId: "reportDate",
						formId: "dateForm",
						event: "onchange",
						params: { _eventId: "updateEntries" }
					})); 
				</script>
			</div>
		</div>
	</form:form>

I've also tried just adding the AjaxEventDecoration in the jsp and then transforming the input field to a dijit DateTextBox using javascript, with the same (non)result.

When the page is first rendered, using the in-line method above, a dojo.js javascript error occurs (dojo.js _7a3.getMonth is not a function). However, the date field appears to work properly, so I don't think that is the issue here.

My ultimate goal is to have the Spring AjaxEventDecoration handle the onchange event and to use an Ext javascript DateField, which is much nicer than dijit's date selector. With that configuration, the onchange event is handled just fine in Firefox, but of course Internet Explorer is not recognizing it. That is why I decided to try the dijit date selector, thinking it might be more compatible with the spring ajax.

I am wondering if I need to use a different event in the AjaxEventDecoration, and if it needs to be one of those I see in the dojoattachevent list for that input field. I'd appreciate any ideas anyone can give me... Also any documentation links for the Spring js usage would be greatly appreciated.

Thanks,

Chris

[cmontgomery]

I've come to the conclusion, after more googling and experimentation, that the onchange event for the underlying text box of the date selector widget is the cause of this issue. I've ended up using a separate DatePicker and textbox (as opposed to the "all-in-one" widgets) and doing my own Javascript functions to handle the events. The Spring.AjaxEventDecoration is handling the onchange perfectly when it is fired.

[jeremyg484]

Yes, I would assert that the problem is that once the reportDate DOM element is transformed into a DateTextBox, that element is no longer the source of the onchange event to which you want to be listening. What you really want to attach the AjaxEventDecoration to is the created widget instead, but that's not specifically supported at the moment.

Ideally, we should do this automatically behind the scenes in AjaxEventDecoration by detecting that the desired element has already been decorated with a widget type. Could you open a Jira issue for this, linking back to this post?

In the meantime, you should be able to use the lower-level Spring.remoting.submitForm function in a custom onChange handler for the created widget.

One way to do this would be to add this handler in-line in the decoration as one of the widgetAttrs:

Spring.addDecoration(new Spring.ElementDecoration({
    elementId : "reportDate",
    widgetType : "dijit.form.DateTextBox",
    widgetAttrs : { value : dojo.date.locale.parse(dojo.byId("reportDate").value, {selector : "date", datePattern : "yyyy-MM-dd"}), 
                          required : true,
                          onChange : function(newValue) {
                                         Spring.remoting.submitForm('reportDate', 'dateForm', {_eventId:'updateEntries'});  
                                     }
                   
}}));

[cmontgomery]

Jira created: SWF-804.

Thanks, Jeremy!

[Stan Los]

I've just found out what was the problem.
An event name in second Decoration become case sensitive!
For example, instead of using event: "onchange", you need to use event: "onChange" and so on.