Re: struts2 select onchange to trigger ajax call

[Markus Doring]

A little addition to my last post...

It all seemed to work fine, but some of my html content that got back had |
pipe symbols in image urls and Dojo did not seem to like that. My AJAX call
was brining back statistics images based on Google Charts. And those URLs
use | as dataset separators for labels. E.g. one of my response uses
"Nigde|Antalya|Adana|Mugla|Ïsparta / Konya|Karaman|Ïzmir" and looks like
that (look at underlying html if you are interested in the call):

http://chart.apis.google.com/chart?cht=p&chs=320x160&chl=Nigde|Antalya|Adana|Mugla|Ïsparta
/
Konya|Karaman|Ïzmir&chts=000000,16&chco=76A4FB,D7E9F5,18427D,80C65A,CA3D05,B4C24B,FF7C0A&chd=e:UeSkIUHrFIB7AA
 


As soon as there were pipe symbols in the image source url the image did not
get displayed. I couldnt figure out what exactly happened, but I am quite
certain it must be the struts bundled Dojo.

Therefore I finally went for plain self coded prototype javascript. Which
surprisingly for me is not much more complex. All I had to do was this bit
of scripting:

function updateByRegion(){
        var url = '<s:property value="imgByRegionUrl"/>';
        var params = { region: $F("regionClass") }; 
        var target = 'imgByRegion';     
        var myAjax = new Ajax.Updater(target, url, {method: 'get', parameters:
params});
};


In context with the jsp page it looks like this (no need for struts ajax
divs anymore):

<s:form id="regionClassForm">
        <s:select id="regionClass" name="region" list="regionClasses" value="3"
theme="simple"/>
</s:form>
<s:url id="imgByRegionUrl" action="occResourceStatsByRegion"
namespace="/ajax"/>
<div id="imgByRegion">
        <s:action name="occResourceStatsByRegion" namespace="/ajax"
executeResult="true"/>
</div>

<script>
function updateByRegion(){
        var url = '<s:property value="imgByRegionUrl"/>';
        var params = { region: $F("regionClass") }; 
        var target = 'imgByRegion';     
        var myAjax = new Ajax.Updater(target, url, {method: 'get', parameters:
params});
};
$('regionClass').observe('change', updateByRegion);
</script>       



works very fine and I have to say I am impressed how easy prototype is.
Markus






Markus Doring wrote:
> 
> Thanks Dave, that works!
> 
> I finally also found a working example here:
> http://javachamp.blogspot.com/2008/06/struts-2-ajax-drop-down-example.html
> 
> You can actually get rid of any javascript functions and just publish the
> topic in the onchange and use die struts div tag to do the rest:
> 
> 
> <s:form id="regionClassForm" theme="ajax"
> action="occResourceStatsByRegion" namespace="/ajax">
>       <s:hidden name="resource_id" value="%{resource_id}" />
>       <s:select name="region" list="regionClasses" value="region"
> onchange="dojo.event.topic.publish('imgByRegion_topic');return false;"
> theme="ajax"/>
> </s:form>
> <s:url id="imgByRegionUrl" action="occResourceStatsByRegion"
> namespace="/ajax" includeParams="none"/>
> <s:div id="imgByRegion" href="%{imgByRegionUrl}" formId="regionClassForm"
> listenTopics="imgByRegion_topic" theme="ajax"></s:div>
> 
> 

-- 
View this message in context: 
http://www.nabble.com/struts2-select-onchange-to-trigger-ajax-call-tp18878122p18892130.html
Sent from the Struts - User mailing list archive at Nabble.com.


---------------------------------------------------------------------
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]