Spring.addDecoration in dijit.Dialog problem

[Valiki]

Hello, I am using Spring js in my dijit.Dialog popups to decorate and validate input fields.
To open dialog I use script:

function showDialog(id, src,title) {
	var dialog = dijit.byId(id);
	dialog.reset();
	if(title){
		dialog.titleNode.innerHTML = title;
	}
	dialog.setHref(src);
	dojo.connect(dialog,'onLoad',function(){
		var dialog = document.getElementById(id);
		if(dialog){
			evalScript(dialog);
		}
	});
	dialog.show();
}

As you can see I evaluate all script tags that come with response to decorate input fields in dialog.
here is code that produces response for each input field(I use custom tags)

<%@ tag body-content="empty"  pageEncoding="UTF-8"%>
<%@ attribute name="name" required="true"%>

<form:input path="${name}" id="${id}"/>
<script type="text/javascript">
	Spring.addDecoration(new Spring.ElementDecoration({
	elementId : "${id}",
	widgetType : "dijit.form.ValidationTextBox",
	widgetAttrs : {
	promptMessage: "input value",
	required :true }}));
</script>

The problem is that when I open dialog more than one time all decoration fails and even input fields that I supposed should be decorated are removed from DOM.
I mean that if I open dialog one time - everithing is ok? but when I open dialog the second time decoration fails with error that element with that id was not found in DOM.
Please help!!

[batzee]

Have you been able to find a solution for this problem?

I'm facing the same problem - however for me it doesn't even work the first time.

My Code:

<script>
	Spring.addDecoration(
		new Spring.ElementDecoration({
			elementId : "trendPopup", 
			widgetType : "dijit.Dialog",
			widgetAttrs: {
				onLoad: function(data) {
					var dialog = dijit.byId('trendPopup');
					var scripts = dialog.getElementsByTagName("script");
					for(var script in scripts)
					{
						console.info("tag");
						eval(script.innerHTML);
					}
				}
			}
		}));
</script>

My error message in Firebug:
"Error undefined running custom onLoad code" in dialog.getElementsByTagName("script");

What am I doing wrong?

[Valiki]

As far as I remember I didn't find the solution for this problem. I suppose this was dojo bug. But I suppose if you will use

var dialog = document.getElementById('trendPopup');

instead of

var dialog = dijit.byId('trendPopup');

this code can work for the first dialog load.

P.S. I am not sure but maybe I overcomed 2-nd load trouble by adding some code to the onClose dialog event. Sorry but I don't remember exatly what code. It was some king of a hack...
Good Luck.
Write something here if you find the solution or if dojo second relaod trouble exist no more in older version of the library.))

[kristin_110]

I am in the same boat guys

[jlocum]

I have not programmed the specific scenario that is described here, however, debugging (via firebug or script debugger) issues with my current applications exhibited the same behavior (removing dijit controls with multiple calls).

What I found was that when the dijit Decoration is applied for the first time, the original DOM HTML node (textbox, select, etc) is removed and replaced by the dijit's DOM representation. Any subsequent calls that apply dijit Decoration's (when Spring.decorations.applied is true) will execute the decoration.apply() method.

The apply() method first executes this:

		if (dijit.byId(this.elementId)) {
			dijit.byId(this.elementId).destroyRecursive(false);
		}

This obviously removes the existing dijit element (with it's corresponding DOM nodes). At the end of the apply() method

			dojo.require(this.widgetModule);
			var widgetConstructor = dojo.eval(this.widgetType);
			this.widget = new widgetConstructor(this.widgetAttrs, this.element);
			this.widget.startup();

the widget.startup() tries to decorate a DOM node whose id does not exist anymore due to destroying it earlier.

"Fixing" this behavior will most likely be different for each application so it would be hard to list the solution. I chose to fully apply the dijit (with custom code) if dijit.byId(foo) did not exist, but just change the Spring.decoration.widgetAttrs values if the dijit already existed.

Hope this helps some... (All code references from Spring-Dojo.js.uncompressed.js supplied from within the org.springframework.js-2.0.9.RELEASE.jar)

[beatmeier]

I don't know if you still experienced this bug but I came across it just recently.

I added the Spring.addDecoration in the create-Attribute of the jQuery modal dialog and I had the same bug as you that the input-fields got removed. So my workaround at the moment is just that I check if the dijit-element already exists. If so I don't apply the Spring.addDecoration a second time. this works for me.

$( "#actionDetailDialog" ).dialog({
	modal: true,
	resizable: false,
	width: 'auto',
	hide: {effect: "fade", duration: 500},
	create: function(event, ui) {
		if (!dijit.byId("actionName")) {
			Spring.addDecoration(new Spring.ElementDecoration({elementId : 'actionId', widgetType : 'dijit.form.ValidationTextBox'}));
			Spring.addDecoration(new Spring.ElementDecoration({elementId : 'actionName', widgetType : 'dijit.form.ValidationTextBox', widgetAttrs : {getErrorMessage : function(inFocus) { return "${status_message_obligatory}"; }, required : true}}));
			Spring.addDecoration(new Spring.ElementDecoration({elementId : 'actionMfrKey', widgetType : 'dijit.form.ValidationTextBox', widgetAttrs : {getErrorMessage : function(inFocus) { return "${status_message_obligatory}"; }, required : true}}));
		}
		var theForm = document.forms["actionDetailDialogForm"];
		Spring.addDecoration(new Spring.ValidateFormDecoration({event : 'onclick', elementId : 'saveButton', form : theForm }));
	},
	close: function(event, ui) {
		$(this).dialog("destroy");
	}
});

Thanks jlocum for the start with dijit.byId(this.elementId).