You are viewing a plain text version of this content. The canonical link for it is here.
Posted to user@struts.apache.org by Dibesh Shakya <di...@yomari.com> on 2008/02/24 11:26:31 UTC

how to update text fields using ajax on making any change in master text field

Hello all,
I have 3 text fields say A, B and C out of which A is a master text field
whose value is distributed between remaining text fields.
My requirement is if i give value say 20 to field say A then an action is
called which will distribute the values between other text fields. How can i
implement this using Ajax?
I searched for this through entire forum but could not find any help for my
problem.

-- 
With Best Regards,
Dibesh Shakya

Re: how to update text fields using ajax on making any change in master text field

Posted by Jeromy Evans <je...@blueskyminds.com.au>.
Yes, I'd still use the same technique.

If you don't need to use ajax, then just do a normal submit and render a 
new page doing all the processing on the server side.

If you do want to use ajax though, it's not much effort for the 
javascript callback to include a for loop that updates multiple fields 
and/or inserts new fields into the page.  My action would return a JSON 
structure (using JSON Result) rather than an HTML result to make this 
easier.  eg. it could return a Map/Bean specifying field name and the 
new value.

I don't know exactly what you're doing, but here's a description of my 
approach in more detail.

Create an action that uses the JSON Result.  Set it up to include a 
property that is a Map of FieldName:value.  The execute method populates 
the map.
The JSON result serializes the Map into something like this "{ myMap : { 
"field1" : "a", "field2" : "b" } }".

In javascript:
  add a listener to the text field(s) of interest.  The listener 
performs an XmlHttpRequest with the value(s) of the form.  It posts to 
your action.
  The callback for the request is a javascript function.  If it succeeds 
it's passed the JSON result that can be evaluated into a javascript object.
    var myMap = eval(jsonBody);
  You can then use the content of the map update text fields.
    eg. getElementById(fieldId).value=myMap['fieldId'];

The details depend on which ajax library you use, but the last part, the 
for loop to update multiple fields, it plain old javascript..

Late last year I threw together a simple webapp for previewing 
freemarker that basically uses this technique. 
(http://www.freemarkertool.com - please excuse the *slow* virtual 
server).  A listener on the main text area posts to the action if there 
hasn't been a keypress for 2 seconds.  The callback renders the result 
in the Result text area.  If you look at the responses with FireBug 
you'll see the result is a simple JSON structure with some flags and 
text fields. Similarly, on the right is a table containing text fields 
that triggers the same process, as too does selecting an example from 
the drop-down box in the top left.

Hope that helps.

regards,
 Jeromy Evans

Prashant Khanal wrote:
> Do you mean to catch the response from server using javascript and update
> the textfields using javascript?
>
> The solution seems to be appropriate under circumstances when we have few
> fixed number of textfields. How about the condition when those text fields
> are the part of the row of a table and we need to distribute the value given
> in the master textfield to the textfields of rows and the figure changed is
> any of these textfields have to trigger the distributing functionality
> Do you still suggest to use the same technique for that or did i
> misunderstood your technique?
>
>
>
>
> On 2/25/08, Jeromy Evans <je...@blueskyminds.com.au> wrote:
>   
>> Dibesh Shakya wrote:
>>     
>>> Hello all,
>>> I have 3 text fields say A, B and C out of which A is a master text
>>>       
>> field
>>     
>>> whose value is distributed between remaining text fields.
>>> My requirement is if i give value say 20 to field say A then an action
>>>       
>> is
>>     
>>> called which will distribute the values between other text fields. How
>>>       
>> can i
>>     
>>> implement this using Ajax?
>>> I searched for this through entire forum but could not find any help for
>>>       
>> my
>>     
>>> problem.
>>>
>>>
>>>
>>>       
>> Attach a listener to text field A using javascript.  On the event (eg.
>> keypress) make a request using your favourite ajax library.  Update the
>> other text fields in your asynchronous callback using the content/data
>> received from your action.
>>
>> Any ajax library will easily allow you add a listener, call an action,
>> and process the asynchronous result.  The catch is you have to use the
>> library directly, not Struts.
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
>> For additional commands, e-mail: user-help@struts.apache.org
>>
>>
>>     
>
>
>   
> ------------------------------------------------------------------------
>
> No virus found in this incoming message.
> Checked by AVG Free Edition. 
> Version: 7.5.516 / Virus Database: 269.21.0/1296 - Release Date: 24/02/2008 12:19 PM
>   

---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org


Re: how to update text fields using ajax on making any change in master text field

Posted by Prashant Khanal <pr...@yomari.com>.
Do you mean to catch the response from server using javascript and update
the textfields using javascript?

The solution seems to be appropriate under circumstances when we have few
fixed number of textfields. How about the condition when those text fields
are the part of the row of a table and we need to distribute the value given
in the master textfield to the textfields of rows and the figure changed is
any of these textfields have to trigger the distributing functionality
Do you still suggest to use the same technique for that or did i
misunderstood your technique?




On 2/25/08, Jeromy Evans <je...@blueskyminds.com.au> wrote:
>
> Dibesh Shakya wrote:
> > Hello all,
> > I have 3 text fields say A, B and C out of which A is a master text
> field
> > whose value is distributed between remaining text fields.
> > My requirement is if i give value say 20 to field say A then an action
> is
> > called which will distribute the values between other text fields. How
> can i
> > implement this using Ajax?
> > I searched for this through entire forum but could not find any help for
> my
> > problem.
> >
> >
> >
>
> Attach a listener to text field A using javascript.  On the event (eg.
> keypress) make a request using your favourite ajax library.  Update the
> other text fields in your asynchronous callback using the content/data
> received from your action.
>
> Any ajax library will easily allow you add a listener, call an action,
> and process the asynchronous result.  The catch is you have to use the
> library directly, not Struts.
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
> For additional commands, e-mail: user-help@struts.apache.org
>
>


-- 
Thanks,
Prashant Khanal
prashant.khanal@yomari.com
Solutions for your information
_________________
Yomari Pvt. Ltd.
HB Complex, Ekantakuna, Lalitpur.
G.P.O. Box: 21295
Kathmandu, Nepal
Tel: 977 (1) 5000111, 2113000
Fax: 977 (1) 5000157
http://www.yomari.com
____________________
Your guide to Nepal on the Net.
http://www.nepalhomepage.com

Re: how to update text fields using ajax on making any change in master text field

Posted by Jeromy Evans <je...@blueskyminds.com.au>.
Dibesh Shakya wrote:
> Hello all,
> I have 3 text fields say A, B and C out of which A is a master text field
> whose value is distributed between remaining text fields.
> My requirement is if i give value say 20 to field say A then an action is
> called which will distribute the values between other text fields. How can i
> implement this using Ajax?
> I searched for this through entire forum but could not find any help for my
> problem.
>
>   
>
Attach a listener to text field A using javascript.  On the event (eg. 
keypress) make a request using your favourite ajax library.  Update the 
other text fields in your asynchronous callback using the content/data 
received from your action.

Any ajax library will easily allow you add a listener, call an action, 
and process the asynchronous result.  The catch is you have to use the 
library directly, not Struts.

---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org