You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by steve222 <st...@gmail.com> on 2008/10/22 20:44:55 UTC
Wicket AJAX update form TextField value from another field
Hi. Hopefully I can explain this scenario OK - I'll try to keep it simple.
On a form, I have a couple of TextFields - SalePrice and DiscountAmount.
After the user enters SalePrice, I need a way to allow the user to enter the
DiscountAmount as either a flat rate or as a percentage of the SalePrice.
For example, if entered SalePrice is 1000, the user could enter a flat
DiscountAmount of 200.00. Or they could enter 20%. I'd like the option to
do either since SalePrice might be 8,745 and the discount 2.75% or something
(so hard to just calculat the true cash amount). Or it might just really be
a flat £200 in which case hard to calculate the %.
In a traditional app where I'm writing the JavaScript, I can think of
various ways to do this involving extra fields for flatrate and/or % - then
updating the real DiscountAmount field when the "dummy" fields change.
But I'm trying to work out an elegant way with Wicket/AJAX - without too
much success so far.
Any suggestions - or links to similar examples? Ideally, the fewer extra
dummy fields the better.
Thanks.
--
View this message in context: http://www.nabble.com/Wicket-AJAX-update-form-TextField-value-from-another-field-tp20117258p20117258.html
Sent from the Wicket - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Wicket AJAX update form TextField value from another field
Posted by steve222 <st...@gmail.com>.
But not for the field where the model does not have a setter (hibernate POJO
- and no field in the database, just a formula).
Fairly obvious why that's not going to work for an update - but I can't
think of a solution on how to change the calculated value just to show it on
the form.
Steve
steve222 wrote:
>
> Ooops - my error.
>
> I need to do something like:
>
> pcntDiscount.setModel(new Model(amount.getModelObject().toString()));
>
> Then the AjaxFormComponentUpdatingBehavior works as expected.
>
>
> Steve
>
>
>
>
>
> steve222 wrote:
>>
>> Many thanks for the detailed answer.
>>
>> I don't think the single field AbsoluteOrPercentage idea will work for me
>> without a lot of other changes. I use the same form for editing a record
>> as creating a new one. So I actually need to show both the
>> AbsoluteDiscount and PercentageDiscount on the form at the same time -
>> user enters % during initial entry, he needs to see % on later edit, etc.
>> Both fields need to be editable, with the one that doesn't get edited
>> being calculated. But thanks for the idea and the detail on how to
>> implement this.
>>
>> I've been attempting to do it with separate fields for AbsoluteDiscount
>> and PercentageDiscount - but it does not work for me. My model object
>> used in the form does not have setters for the calculated field
>> PercentageDiscount - just a getter to display the calculated % value. So
>> I can't update this with AjaxFormComponentUpdatingBehavior.
>>
>> And it seems I can't update the fields using AjaxEventBehavior, eg:
>>
>> final RequireTextfield amount = new RequiredTextfield("amount",
>> Double.class);
>> amount.add(DoubleMinimumValidator.minimum(1));
>> amount.setOutputMarkupId(true);
>> container.add(amount);
>>
>> amount.add(new AjaxEventBehavior("onblur") {
>> protected void onEvent(AjaxRequestTarget target) {
>>
>> // this will always be null on new data entry, and old value
>> on edit
>> pcntDiscount.setModelObject(amount.getModelObject().toString());
>> target.addComponent(pcntDiscount);
>> }
>> });
>>
>>
>>
>> jWeekend wrote:
>>>
>>> Steve,
>>>
>>> If you prefer not to take the easy option and add a couple of radio
>>> buttons to let the user select currency or percentage input, that could
>>> also control a couple of labels (or a border) that shows, in a locale
>>> specific way, the currency symbol or the percentage sign you could ...
>>> create an AbsoluteOrPercentage class an instance of which will back the
>>> model of your DiscountAmount field. Make a validator that checks that
>>> the last character entered looks like an int or a '%' and that the other
>>> characters represent a number, and, if required, put your validation
>>> messages in the appropriate place. Add this validator to your
>>> DiscountAmount text field. Make an appropriate converter (implement
>>> IConverter - very simple logic required for both methods) and override
>>> getConverter on your text field to return it for your
>>> AbsoluteOrPercentage class. If this text field will be useful elsewhere,
>>> make a (top level) subclass of TextField - AbsoluteOrPercentageTextField
>>> for instance that does all of the above.
>>>
>>> It is not clear from your post what you want updated, but let's assume
>>> you have three fields, one for each of SalePrice, DiscountAmount and
>>> ActualAmount (price with discount applied) and you want the latter
>>> updated. Add an AjaxFormComponentUpdatingBehavior (probably "onblur") to
>>> both the input fields. In the onUpdate methods of each update the
>>> (dynamic) model object backing the ActualAmount field (probably rendered
>>> by a label since it is not meant to be edited by the user). Don't forget
>>> to add your "actualAmountTextField" component to the AjaxRequestTarget
>>> in both your onUpdate methods and also to request a markup id for
>>> actualAmountTextField - actualAmountField.setMarkupId(true) - where you
>>> build up the container. If this lot is likely to be useful elsewhere,
>>> wrap all three fields (and probably all the rest of the stuff described
>>> above) in a Panel so you can just drop it in a div anywhere you like
>>> later on.
>>>
>>> Does that do it?
>>>
>>> Regards - Cemal
>>> http://www.jWeekend.co.uk http://jWeekend.co.uk
>>>
>>>
>>>
>>>
>>> steve222 wrote:
>>>>
>>>> Hi. Hopefully I can explain this scenario OK - I'll try to keep it
>>>> simple.
>>>>
>>>> On a form, I have a couple of TextFields - SalePrice and
>>>> DiscountAmount.
>>>>
>>>> After the user enters SalePrice, I need a way to allow the user to
>>>> enter the DiscountAmount as either a flat rate or as a percentage of
>>>> the SalePrice.
>>>>
>>>> For example, if entered SalePrice is 1000, the user could enter a flat
>>>> DiscountAmount of 200.00. Or they could enter 20%. I'd like the
>>>> option to do either since SalePrice might be 8,745 and the discount
>>>> 2.75% or something (so hard to just calculat the true cash amount). Or
>>>> it might just really be a flat £200 in which case hard to calculate the
>>>> %.
>>>>
>>>> In a traditional app where I'm writing the JavaScript, I can think of
>>>> various ways to do this involving extra fields for flatrate and/or % -
>>>> then updating the real DiscountAmount field when the "dummy" fields
>>>> change.
>>>>
>>>> But I'm trying to work out an elegant way with Wicket/AJAX - without
>>>> too much success so far.
>>>>
>>>> Any suggestions - or links to similar examples? Ideally, the fewer
>>>> extra dummy fields the better.
>>>>
>>>> Thanks.
>>>>
>>>>
>>>>
>>>
>>>
>>
>>
>
>
--
View this message in context: http://www.nabble.com/Wicket-AJAX-update-form-TextField-value-from-another-field-tp20117258p20121206.html
Sent from the Wicket - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Wicket AJAX update form TextField value from another field
Posted by steve222 <st...@gmail.com>.
Ooops - my error.
I need to do something like:
pcntDiscount.setModel(new Model(amount.getModelObject().toString()));
Then the AjaxFormComponentUpdatingBehavior works as expected.
Steve
steve222 wrote:
>
> Many thanks for the detailed answer.
>
> I don't think the single field AbsoluteOrPercentage idea will work for me
> without a lot of other changes. I use the same form for editing a record
> as creating a new one. So I actually need to show both the
> AbsoluteDiscount and PercentageDiscount on the form at the same time -
> user enters % during initial entry, he needs to see % on later edit, etc.
> Both fields need to be editable, with the one that doesn't get edited
> being calculated. But thanks for the idea and the detail on how to
> implement this.
>
> I've been attempting to do it with separate fields for AbsoluteDiscount
> and PercentageDiscount - but it does not work for me. My model object
> used in the form does not have setters for the calculated field
> PercentageDiscount - just a getter to display the calculated % value. So
> I can't update this with AjaxFormComponentUpdatingBehavior.
>
> And it seems I can't update the fields using AjaxEventBehavior, eg:
>
> final RequireTextfield amount = new RequiredTextfield("amount",
> Double.class);
> amount.add(DoubleMinimumValidator.minimum(1));
> amount.setOutputMarkupId(true);
> container.add(amount);
>
> amount.add(new AjaxEventBehavior("onblur") {
> protected void onEvent(AjaxRequestTarget target) {
>
> // this will always be null on new data entry, and old value
> on edit
> pcntDiscount.setModelObject(amount.getModelObject().toString());
> target.addComponent(pcntDiscount);
> }
> });
>
>
>
> jWeekend wrote:
>>
>> Steve,
>>
>> If you prefer not to take the easy option and add a couple of radio
>> buttons to let the user select currency or percentage input, that could
>> also control a couple of labels (or a border) that shows, in a locale
>> specific way, the currency symbol or the percentage sign you could ...
>> create an AbsoluteOrPercentage class an instance of which will back the
>> model of your DiscountAmount field. Make a validator that checks that the
>> last character entered looks like an int or a '%' and that the other
>> characters represent a number, and, if required, put your validation
>> messages in the appropriate place. Add this validator to your
>> DiscountAmount text field. Make an appropriate converter (implement
>> IConverter - very simple logic required for both methods) and override
>> getConverter on your text field to return it for your
>> AbsoluteOrPercentage class. If this text field will be useful elsewhere,
>> make a (top level) subclass of TextField - AbsoluteOrPercentageTextField
>> for instance that does all of the above.
>>
>> It is not clear from your post what you want updated, but let's assume
>> you have three fields, one for each of SalePrice, DiscountAmount and
>> ActualAmount (price with discount applied) and you want the latter
>> updated. Add an AjaxFormComponentUpdatingBehavior (probably "onblur") to
>> both the input fields. In the onUpdate methods of each update the
>> (dynamic) model object backing the ActualAmount field (probably rendered
>> by a label since it is not meant to be edited by the user). Don't forget
>> to add your "actualAmountTextField" component to the AjaxRequestTarget in
>> both your onUpdate methods and also to request a markup id for
>> actualAmountTextField - actualAmountField.setMarkupId(true) - where you
>> build up the container. If this lot is likely to be useful elsewhere,
>> wrap all three fields (and probably all the rest of the stuff described
>> above) in a Panel so you can just drop it in a div anywhere you like
>> later on.
>>
>> Does that do it?
>>
>> Regards - Cemal
>> http://www.jWeekend.co.uk http://jWeekend.co.uk
>>
>>
>>
>>
>> steve222 wrote:
>>>
>>> Hi. Hopefully I can explain this scenario OK - I'll try to keep it
>>> simple.
>>>
>>> On a form, I have a couple of TextFields - SalePrice and DiscountAmount.
>>>
>>> After the user enters SalePrice, I need a way to allow the user to enter
>>> the DiscountAmount as either a flat rate or as a percentage of the
>>> SalePrice.
>>>
>>> For example, if entered SalePrice is 1000, the user could enter a flat
>>> DiscountAmount of 200.00. Or they could enter 20%. I'd like the option
>>> to do either since SalePrice might be 8,745 and the discount 2.75% or
>>> something (so hard to just calculat the true cash amount). Or it might
>>> just really be a flat £200 in which case hard to calculate the %.
>>>
>>> In a traditional app where I'm writing the JavaScript, I can think of
>>> various ways to do this involving extra fields for flatrate and/or % -
>>> then updating the real DiscountAmount field when the "dummy" fields
>>> change.
>>>
>>> But I'm trying to work out an elegant way with Wicket/AJAX - without too
>>> much success so far.
>>>
>>> Any suggestions - or links to similar examples? Ideally, the fewer
>>> extra dummy fields the better.
>>>
>>> Thanks.
>>>
>>>
>>>
>>
>>
>
>
--
View this message in context: http://www.nabble.com/Wicket-AJAX-update-form-TextField-value-from-another-field-tp20117258p20120995.html
Sent from the Wicket - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Wicket AJAX update form TextField value from another field
Posted by steve222 <st...@gmail.com>.
Many thanks for the detailed answer.
I don't think the single field AbsoluteOrPercentage idea will work for me
without a lot of other changes. I use the same form for editing a record as
creating a new one. So I actually need to show both the AbsoluteDiscount
and PercentageDiscount on the form at the same time - user enters % during
initial entry, he needs to see % on later edit, etc. Both fields need to be
editable, with the one that doesn't get edited being calculated. But thanks
for the idea and the detail on how to implement this.
I've been attempting to do it with separate fields for AbsoluteDiscount and
PercentageDiscount - but it does not work for me. My model object used in
the form does not have setters for the calculated field PercentageDiscount -
just a getter to display the calculated % value. So I can't update this.
And it seems I can't update the fields anyway since the need to be final
jWeekend wrote:
>
> Steve,
>
> If you prefer not to take the easy option and add a couple of radio
> buttons to let the user select currency or percentage input, that could
> also control a couple of labels (or a border) that shows, in a locale
> specific way, the currency symbol or the percentage sign you could ...
> create an AbsoluteOrPercentage class an instance of which will back the
> model of your DiscountAmount field. Make a validator that checks that the
> last character entered looks like an int or a '%' and that the other
> characters represent a number, and, if required, put your validation
> messages in the appropriate place. Add this validator to your
> DiscountAmount text field. Make an appropriate converter (implement
> IConverter - very simple logic required for both methods) and override
> getConverter on your text field to return it for your AbsoluteOrPercentage
> class. If this text field will be useful elsewhere, make a (top level)
> subclass of TextField - AbsoluteOrPercentageTextField for instance that
> does all of the above.
>
> It is not clear from your post what you want updated, but let's assume you
> have three fields, one for each of SalePrice, DiscountAmount and
> ActualAmount (price with discount applied) and you want the latter
> updated. Add an AjaxFormComponentUpdatingBehavior (probably "onblur") to
> both the input fields. In the onUpdate methods of each update the
> (dynamic) model object backing the ActualAmount field (probably rendered
> by a label since it is not meant to be edited by the user). Don't forget
> to add your "actualAmountTextField" component to the AjaxRequestTarget in
> both your onUpdate methods and also to request a markup id for
> actualAmountTextField - actualAmountField.setMarkupId(true) - where you
> build up the container. If this lot is likely to be useful elsewhere, wrap
> all three fields (and probably all the rest of the stuff described above)
> in a Panel so you can just drop it in a div anywhere you like later on.
>
> Does that do it?
>
> Regards - Cemal
> http://www.jWeekend.co.uk http://jWeekend.co.uk
>
>
>
>
> steve222 wrote:
>>
>> Hi. Hopefully I can explain this scenario OK - I'll try to keep it
>> simple.
>>
>> On a form, I have a couple of TextFields - SalePrice and DiscountAmount.
>>
>> After the user enters SalePrice, I need a way to allow the user to enter
>> the DiscountAmount as either a flat rate or as a percentage of the
>> SalePrice.
>>
>> For example, if entered SalePrice is 1000, the user could enter a flat
>> DiscountAmount of 200.00. Or they could enter 20%. I'd like the option
>> to do either since SalePrice might be 8,745 and the discount 2.75% or
>> something (so hard to just calculat the true cash amount). Or it might
>> just really be a flat £200 in which case hard to calculate the %.
>>
>> In a traditional app where I'm writing the JavaScript, I can think of
>> various ways to do this involving extra fields for flatrate and/or % -
>> then updating the real DiscountAmount field when the "dummy" fields
>> change.
>>
>> But I'm trying to work out an elegant way with Wicket/AJAX - without too
>> much success so far.
>>
>> Any suggestions - or links to similar examples? Ideally, the fewer extra
>> dummy fields the better.
>>
>> Thanks.
>>
>>
>>
>
>
--
View this message in context: http://www.nabble.com/Wicket-AJAX-update-form-TextField-value-from-another-field-tp20117258p20120528.html
Sent from the Wicket - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Wicket AJAX update form TextField value from another field
Posted by jWeekend <jw...@cabouge.com>.
Steve,
If you prefer not to take the easy option and add a couple of radio buttons
to let the user select currency or percentage input, that could also control
a couple of labels (or a border) that shows, in a locale specific way, the
currency symbol or the percentage sign you could ... create an
AbsoluteOrPercentage class an instance of which will back the model of your
DiscountAmount field. Make a validator that checks that the last character
entered looks like an int or a '%' and that the other characters represent a
number, and, if required, put your validation messages in the appropriate
place. Add this validator to your DiscountAmount text field. Make an
appropriate converter (implement IConverter - very simple logic required for
both methods) and override getConverter on your text field to return it for
your AbsoluteOrPercentage class. If this text field will be useful
elsewhere, make a (top level) subclass of TextField -
AbsoluteOrPercentageTextField for instance that does all of the above.
It is not clear from your post what you want updated, but let's assume you
have three fields, one for each of SalePrice, DiscountAmount and
ActualAmount (price with discount applied) and you want the latter updated.
Add an AjaxFormComponentUpdatingBehavior (probably "onblur") to both the
input fields. In the onUpdate methods of each update the (dynamic) model
object backing the ActualAmount field (probably rendered by a label since it
is not meant to be edited by the user). Don't forget to add your
"actualAmountTextField" component to the AjaxRequestTarget in both your
onUpdate methods and also to request a markup id for actualAmountTextField -
actualAmountField.setMarkupId(true) - where you build up the container. If
this lot is likely to be useful elsewhere, wrap all three fields (and
probably all the rest of the stuff described above) in a Panel so you can
just drop it in a div anywhere you like later on.
Does that do it?
Regards - Cemal
http://www.jWeekend.co.uk http://jWeekend.co.uk
steve222 wrote:
>
> Hi. Hopefully I can explain this scenario OK - I'll try to keep it
> simple.
>
> On a form, I have a couple of TextFields - SalePrice and DiscountAmount.
>
> After the user enters SalePrice, I need a way to allow the user to enter
> the DiscountAmount as either a flat rate or as a percentage of the
> SalePrice.
>
> For example, if entered SalePrice is 1000, the user could enter a flat
> DiscountAmount of 200.00. Or they could enter 20%. I'd like the option
> to do either since SalePrice might be 8,745 and the discount 2.75% or
> something (so hard to just calculat the true cash amount). Or it might
> just really be a flat £200 in which case hard to calculate the %.
>
> In a traditional app where I'm writing the JavaScript, I can think of
> various ways to do this involving extra fields for flatrate and/or % -
> then updating the real DiscountAmount field when the "dummy" fields
> change.
>
> But I'm trying to work out an elegant way with Wicket/AJAX - without too
> much success so far.
>
> Any suggestions - or links to similar examples? Ideally, the fewer extra
> dummy fields the better.
>
> Thanks.
>
>
>
--
View this message in context: http://www.nabble.com/Wicket-AJAX-update-form-TextField-value-from-another-field-tp20117258p20120021.html
Sent from the Wicket - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Wicket AJAX update form TextField value from another field
Posted by steve222 <st...@gmail.com>.
Thanks. I now have this fully working now with a customised model class
containing a setter to store the calculated field if upated from the Wicket
form.
Will look at FormComponentPanel - thanks for the suggestion.
Steve
Timo Rantalaiho wrote:
>
> On Wed, 22 Oct 2008, steve222 wrote:
>> But DiscountPercentage does not have a setter in my model - just a getter
>> (it's calculated for viewing only and does not get persisted anywhere).
>> So
>> I get errors when Wicket attempts to update the model.
>
> I would have done this by using customised models, but a
> while back in a similar discussion on this list Igor
> suggested using FormComponentPanel. You can probably solve
> your situation with it.
>
> Best wishes,
> Timo
>
> --
> Timo Rantalaiho
> Reaktor Innovations Oy <URL: http://www.ri.fi/ >
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
>
--
View this message in context: http://www.nabble.com/Wicket-AJAX-update-form-TextField-value-from-another-field-tp20117258p20124799.html
Sent from the Wicket - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Wicket AJAX update form TextField value from another field
Posted by Timo Rantalaiho <Ti...@ri.fi>.
On Wed, 22 Oct 2008, steve222 wrote:
> But DiscountPercentage does not have a setter in my model - just a getter
> (it's calculated for viewing only and does not get persisted anywhere). So
> I get errors when Wicket attempts to update the model.
I would have done this by using customised models, but a
while back in a similar discussion on this list Igor
suggested using FormComponentPanel. You can probably solve
your situation with it.
Best wishes,
Timo
--
Timo Rantalaiho
Reaktor Innovations Oy <URL: http://www.ri.fi/ >
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Wicket AJAX update form TextField value from another field
Posted by steve222 <st...@gmail.com>.
Maybe I should have stated I have tried something like this. I have data
entry TextFields for:
SalePrice
DiscountAmount
then add another for:
DiscountPercentage
When I enter an amount into DiscountAmount I need DiscountPercentage to get
calculated and update on the form. And it should also work the other way
around - enter DiscountPercentage and DiscountAmount gets updated.
But DiscountPercentage does not have a setter in my model - just a getter
(it's calculated for viewing only and does not get persisted anywhere). So
I get errors when Wicket attempts to update the model.
And if I enter an an amount in DiscountPercentage and attempt to update the
value for DiscountAmount then I can't update this either since I don't want
to persist the form until all the other fields are entered.
I am using the same form for creating a new record and editing an existing
one, so when doing a new record I don't have mandatory fields filled when
I'm entering the Discount stuff.
Steve
steve222 wrote:
>
> Hi. Hopefully I can explain this scenario OK - I'll try to keep it
> simple.
>
> On a form, I have a couple of TextFields - SalePrice and DiscountAmount.
>
> After the user enters SalePrice, I need a way to allow the user to enter
> the DiscountAmount as either a flat rate or as a percentage of the
> SalePrice.
>
> For example, if entered SalePrice is 1000, the user could enter a flat
> DiscountAmount of 200.00. Or they could enter 20%. I'd like the option
> to do either since SalePrice might be 8,745 and the discount 2.75% or
> something (so hard to just calculat the true cash amount). Or it might
> just really be a flat £200 in which case hard to calculate the %.
>
> In a traditional app where I'm writing the JavaScript, I can think of
> various ways to do this involving extra fields for flatrate and/or % -
> then updating the real DiscountAmount field when the "dummy" fields
> change.
>
> But I'm trying to work out an elegant way with Wicket/AJAX - without too
> much success so far.
>
> Any suggestions - or links to similar examples? Ideally, the fewer extra
> dummy fields the better.
>
> Thanks.
>
>
>
--
View this message in context: http://www.nabble.com/Wicket-AJAX-update-form-TextField-value-from-another-field-tp20117258p20119555.html
Sent from the Wicket - User mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org