Dojo Button Element + Ajax Decoration Issue

[jennybearcan]

I am unable to apply both element and ajax decorations as follows...(There is a JIRA for this...SWF-804)

Looking for a work-around to use spring Ajax with dojo button widget.

This does not work:

<button type="submit" id="refreshButton" name="_eventId_refresh">
    <img src="<core:url value="/resources/images/icons/refresh.gif"/>"/> 
</button>

<script type="text/javascript">
	Spring.addDecoration(new Spring.ElementDecoration({
		elementId  : "refreshButton",
		widgetType : "dijit.form.Button"
	}));
	Spring.addDecoration(new Spring.AjaxEventDecoration({
		elementId : "refresh",
		event     : "onclick",
		eventId   : "refresh",
		formId    : "refreshForm"
	}));
</script>

If I remove the element decoration the AJAX decoration call works and correct fragment is rendered (as defined in the flow).

Now how to get both dojo button widget and AJAX to work?

Any ideas? The following works when first rendered but after the tile is rendered the button loses the dojo widget decoration.

<script type="text/javascript">
	dojo.require("dijit.form.Button");
</script>
<button dojotype="dijit.form.Button" type="submit" id="refreshDasStatusButton" name="_eventId_refreshDasStatus" style="float:right"	onclick="alert('ajax'); Spring.remoting.submitForm('refreshDasStatusButton', 'refreshStatusForm', {_eventId:'refreshDasStatus'}, {fragment:'dasStatus'}); return false;">
   <img src="<core:url value="/resources/images/icons/refresh.gif"/>" alt="Refresh" /> 
</button>

[dvestal]

We ran into this problem quite a while back. The problem we had is that when we did not use the Spring.remoting.handleResponse(...) javascript to handle the response then the javascript on the newly rendered tile was not being executed which just as in your case breaks the display.

The way that we overcame this was by calling Spring.remoting.handleResponse(...) where we could to handle the response, otherwise you need to do just what it does to execute the javascript dynamically.

dojo.xhrPost({
    form: pageForm + "Form",
    url: href,
    handleAs: "text",
    headers: {"Accept" : "text/html;type=ajax"},
    load: function(data,ioargs){
        var tabcontainer = dijit.byId('tabcontainer');
        if (data == "formvalidated") {
            tabcontainer._defaultSelectChild(page);
        } else {
            Spring.remoting.handleResponse(data,ioargs);
        }

        tabcontainer.selectChild = selectChildMethod;
    },
    error: Spring.remoting.handleError
});

Or to "manually" execute the javascript on the incoming tile:

var extractedScriptNodes = tabcontainer.domNode.getElementsByTagName('script');
dojo.forEach(extractedScriptNodes, function(script){
    dojo.eval(script.innerHTML);
});

[triqui]

I would try this:

<script type="text/javascript">
	Spring.addDecoration(new Spring.ElementDecoration({
		elementId  : "refreshButton",
		widgetType : "dijit.form.Button"
	}));
	Spring.addDecoration(new Spring.AjaxEventDecoration({
		elementId : "refreshButton",
		event     : "_onClick",
		//eventId   : "refresh",   <- You don't need this. It's taken from button name
		formId    : "refreshForm"
	}));
</script>

I don't know about the button losing its decoration it happens to me sometime also, but haven't found a reason. I think the problem is from dojo, but I'm not completely sure.

[jennybearcan]

After a bit of trial and error I got this to work by inlining the ajax call as described in the original post linked from the jira SWF-804.

Spring.addDecoration(new Spring.ElementDecoration({
    elementId 	: "refreshButton",
    widgetType 	: "dijit.form.Button",
    widgetAttrs : {
    //This is work aroung for jira SWF-804 
        onClick : function() {
            Spring.remoting.submitForm(
                'refreshButton', 
                'refreshForm', 
                {_eventId: 'refresh', fragment:'status'}
             ); 
             return false;
        }
    }
}));

[triqui]

Next time, you should have a look at the html source of the widget you are working with.

Then you can have a look at the dojo source for that widget, and then it's not difficult to guess which methods you need to override, since you like overriding.

http://bugs.dojotoolkit.org/browser/...form/Button.js

Other solution is to 'connect' you ajax decoration to the dojo event which is actually 'connected' to the html event.

It works this way: Dojo creates a widget and adds several events for a given widget type. Then Spring ajax decoration uses dojo's 'connect' function to tell dojo it must call submitForm after whatever function you specify in the event parameter.

So you can use:
event: "onClick",
or
event: "_clicked",
or
event: "_onClick",
or you can override any of this like you are doing now, but that seems a bit excessive to me.

[jennybearcan]

triqui - your "solution" does not help me. My problem is not a typo in the event name, the problem is that the widget decoration and the ajax decoration are not both applied correctly when used together. It does work some of the time in some of the browsers that I am required to support, but not all. So far the one I posted last does work, even in IE6.

The particular problem I was encountering with IE 6 occurred when there was multiple buttons on the same page. I found a work around for that but it did not work in Firefox 3.0.3.

Sorry but your comments about liking over-riding are odd. I prefer not to, Thanks.

[triqui]

Sorry, I didn't want to sound rude. It's just that I spent some time studying how dojo handles events and I found that it's not a problem with a typo, it's just that dojo chains several function calls when a given event is triggered.

The widget decoration and the ajax decoration work together perfectly fine if you know what is the function name you have to use in your ajax decoration.

This is working for me, I have a table full of checkboxes added with <form:checkbox> and with a custom widget type applied using elementdecoration (which emulates some of the radio buttons behavior) and an ajaxdecoration applied on top of them (Well, in fact, an ajax decoration chained after another function call that blocks the page and collapses my table). This works perfectly. Everything was working from the beginning except the ajax decoration till I figured out that the event name to use was '_onClick' instead of 'onclick'.

	dojo.addOnLoad(function() {
		dojo.query("td.aggregation input[type='checkbox']").forEach(function(element) {
			Spring.addDecoration(new Spring.ElementDecoration({
				elementId: element.id,
				widgetType: "bts.RadioButton",
				widgetAttrs: { checked: element.checked, groupName: "toggle" }
			}));
		});
		dojo.query("td.aggregation input[type='checkbox']").forEach(function(element) {
			if (dijit.byId(element.id).title == "Load") {
				dojo.connect(element, 'onclick', function(evt) {                <- This will be applied to the checkbox
					loadingBlock.style.display = '';
					collapseAggregatedRows("mainData");
				});
				Spring.addDecoration(new Spring.AjaxEventDecoration({
					elementId: element.id,           <- This will be applied to the new widget
					event: "_onClick",
					formId: "formModel",
					params: { fragments: "content", _eventId: "loadPage" }
				}));
			} else {
				dojo.connect(element, 'onclick', function(evt) {
					loadingBlock.style.display = '';
					toggleAggregatedRows(element);
					loadingBlock.style.display = 'none';
				});
				toggleAggregatedRows(element);
			}
		});
		loadingBlock.style.display = 'none';
	});

There are several problems you can face.

First, you have to be sure you are selecting the right elementId. The 'elementId' in the ajax decoration will take the new widget created (if any) instead of the original node.

Second you have to be sure what's the 'event' in the ajax decoration that will trigger the ajax request. As I said dojo chains several 'events' (function calls) with the standard html events when the elementdecoration is applied. There is a mess as well, with all the widget events and node events.
(in the code above, dojo.connect uses the checkbox node, while ajax decoration will use the widget, and for some reason, 'onclick' is detected on the checkbox, but not on the widget; probably beacuse the checkbox is placed 'above' the widget. So using _onClick fixes the problem since when 'onclick' is detected on the checkbox, dojo will call _onClick among other functions on the widget, and then it will trigger my ajax decoration).


And third you have to make sure you are passing the right eventId, either with a parameter or via the 'sourceId' parameter.


As I said I didn't want to sound rude, I just wanted to explain what is going on with dojo, so you could stick to the standard without problems, instead of adding a hack if there is no need for it.
I mean is not big deal, and if it doesn't work for you and you have another solution, that's ok. I only tested it in firefox 2.0 and newer versions of ie, so maybe my code doesn't work on IE 6, since I have dozens of element and ajax decorations on one page.

Sorry if I bothered you!

[spsaran]

Hi Jennybearcan,

Did you fix the issue? I am also facing the same problem and I couldn;t find the solution.

My case is, I am refreshing fragments after Ajax call. Got the Ajax response and converted all html form fields to Dijit fields, but it is not rendered in browser( the css is not applied). For example the text field rendered as the three div box one after another instead single control. It is happening only in IE.

Thanks in advance.

[digz6666]

Similar issues:

http://forum.springsource.org/showthread.php?t=94831
http://forum.springsource.org/showthread.php?t=70484

[chaitu]

Similar issues:

http://forum.springsource.org/showthread.php?t=94831
http://forum.springsource.org/showthread.php?t=70484

Try this:

dojo.xhrGet({
  url: "widgets.html",
  load: function(data){
      dojo.byId("container").innerHTML = data;
      dojo.parser.parse("container");
  }
});

It has worked for me.