You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by bassglider <ba...@gmail.com> on 2009/12/06 01:51:09 UTC
Ajax Panels Direction
Hi Everyone,
I was wondering if someone could point to the right direction
(examples, classes) for the following scenario:
I have a few text fields inside a panel, when one of the text fields
is changed, I'd like to call a method with updates a panel within the
current panel.
Currently I have the two text fields in the panel with the other panel
that displays the image, I just need to figure out how to call that
method when these forms are changed and I'm sure I can figure out the
rest from there.
Any direction is helpful
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Ajax Panels Direction
Posted by bassglider <ba...@gmail.com>.
Hi Steve,
First off I'd like to thank you, you helped me get really close to the
issue, however the panel doesn't seem to be replaced. A new panel is
created above the old one :\ Here is what I came up with
final Panel image = new AjaxLazyLoadPanel("image") {
/**
* Makes object serializable.
*/
private static final long serialVersionUID = 1L;
@Override
public Component getLazyLoadComponent(String id) {
return (new ChartPanel(id));
}
};
add(image);
AjaxFormValidatingBehavior.addToAllFormComponents(form,
"onchange", Duration.ONE_SECOND);
form.add(new AjaxButton("ajax-button", form) {
private static final long serialVersionUID = 1L;
@Override
protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
// repaint the feedback panel so that it is hidden
target.addComponent(feedback);
System.out.println("Ajax Submitted!");
Component newImagePanel = new AjaxLazyLoadPanel("image") {
private static final long serialVersionUID = 1L;
@Override
public Component getLazyLoadComponent(String id) {
return (new ChartPanel(id));
}
};
newImagePanel.setOutputMarkupId(true);
image.replaceWith(newImagePanel);
target.addComponent(newImagePanel);
}
On Sun, Dec 6, 2009 at 12:54 PM, Steve Swinsburg
<st...@gmail.com> wrote:
> Hi,
>
> Yes you can do the processing for the form in the onSubmit of the ajax submit button, then just replace the current panel with the new one.
>
> - outside your onSubmit hold a reference to your current panel:
> final Component thisPanel = this;
>
> - inside your onSubmit after processing the data:
>
> Component newPanel = new SomeOtherPanel(id, someParam);
> newPanel.setOutputMarkupId(true);
> thisPanel.replaceWith(newPanel);
> target.addComponent(newPanel);
>
> Thats what I do.
>
> cheers,
> Steve
>
> On 06/12/2009, at 2:27 PM, bassglider wrote:
>
>> Ok, I think I'm getting somewhere after a few hours, I have two
>> textfields, when the user hits the ajax submit button, the panel
>> should be replaced with a new panel. I'm thinking that
>> onSubmit(AjaxRequestTarget target, Form<?> form)
>> should be able to take the input of the textfields and call the method
>> to update the image panel with a new image panel based on the new
>> values in the textfields.
>>
>> Any ideas?
>>
>>
>>
>> Form<String> form = new Form<String>("Chart");
>>
>> TextField<Date> dateBegin =
>> new TextField<Date>("beginningDate", new
>> PropertyModel<Date>(session, "beginningDate"));
>> dateBegin.add(new DatePicker());
>> dateBegin.setRequired(true);
>> form.add(dateBegin);
>>
>> TextField<Date> endingDate =
>> new TextField<Date>("endingDate", new
>> PropertyModel<Date>(session, "endingDate"));
>> endingDate.add(new DatePicker());
>> endingDate.setRequired(true);
>> form.add(endingDate);
>>
>> CreateChart(this);
>> AjaxFormValidatingBehavior.addToAllFormComponents(form,
>> "onchange", Duration.ONE_SECOND);
>>
>> form.add(new AjaxButton("ajax-button", form) {
>>
>> private static final long serialVersionUID = 1L;
>>
>> @Override
>> protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
>> // repaint the feedback panel so that it is hidden
>> target.addComponent(feedback);
>> System.out.println("Ajax Submitted!" + feedback.toString());
>>
>> }
>>
>> ....
>>
>>
>> private Panel CreateChart(Panel pan) {
>> pan.add(new AjaxLazyLoadPanel("image") {
>> /**
>> * Makes object serializable.
>> */
>> private static final long serialVersionUID = 1L;
>>
>> @Override
>> public Component getLazyLoadComponent(String id) {
>> return (new ChartPanel(id));
>> }
>> });
>> return pan;
>> }
>>
>>
>>
>> On Sat, Dec 5, 2009 at 2:51 PM, bassglider <ba...@gmail.com> wrote:
>>> Hi Everyone,
>>>
>>> I was wondering if someone could point to the right direction
>>> (examples, classes) for the following scenario:
>>>
>>> I have a few text fields inside a panel, when one of the text fields
>>> is changed, I'd like to call a method with updates a panel within the
>>> current panel.
>>>
>>> Currently I have the two text fields in the panel with the other panel
>>> that displays the image, I just need to figure out how to call that
>>> method when these forms are changed and I'm sure I can figure out the
>>> rest from there.
>>>
>>> Any direction is helpful
>>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
>> For additional commands, e-mail: users-help@wicket.apache.org
>>
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: Ajax Panels Direction
Posted by Steve Swinsburg <st...@gmail.com>.
Hi,
Yes you can do the processing for the form in the onSubmit of the ajax submit button, then just replace the current panel with the new one.
- outside your onSubmit hold a reference to your current panel:
final Component thisPanel = this;
- inside your onSubmit after processing the data:
Component newPanel = new SomeOtherPanel(id, someParam);
newPanel.setOutputMarkupId(true);
thisPanel.replaceWith(newPanel);
target.addComponent(newPanel);
Thats what I do.
cheers,
Steve
On 06/12/2009, at 2:27 PM, bassglider wrote:
> Ok, I think I'm getting somewhere after a few hours, I have two
> textfields, when the user hits the ajax submit button, the panel
> should be replaced with a new panel. I'm thinking that
> onSubmit(AjaxRequestTarget target, Form<?> form)
> should be able to take the input of the textfields and call the method
> to update the image panel with a new image panel based on the new
> values in the textfields.
>
> Any ideas?
>
>
>
> Form<String> form = new Form<String>("Chart");
>
> TextField<Date> dateBegin =
> new TextField<Date>("beginningDate", new
> PropertyModel<Date>(session, "beginningDate"));
> dateBegin.add(new DatePicker());
> dateBegin.setRequired(true);
> form.add(dateBegin);
>
> TextField<Date> endingDate =
> new TextField<Date>("endingDate", new
> PropertyModel<Date>(session, "endingDate"));
> endingDate.add(new DatePicker());
> endingDate.setRequired(true);
> form.add(endingDate);
>
> CreateChart(this);
> AjaxFormValidatingBehavior.addToAllFormComponents(form,
> "onchange", Duration.ONE_SECOND);
>
> form.add(new AjaxButton("ajax-button", form) {
>
> private static final long serialVersionUID = 1L;
>
> @Override
> protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
> // repaint the feedback panel so that it is hidden
> target.addComponent(feedback);
> System.out.println("Ajax Submitted!" + feedback.toString());
>
> }
>
> ....
>
>
> private Panel CreateChart(Panel pan) {
> pan.add(new AjaxLazyLoadPanel("image") {
> /**
> * Makes object serializable.
> */
> private static final long serialVersionUID = 1L;
>
> @Override
> public Component getLazyLoadComponent(String id) {
> return (new ChartPanel(id));
> }
> });
> return pan;
> }
>
>
>
> On Sat, Dec 5, 2009 at 2:51 PM, bassglider <ba...@gmail.com> wrote:
>> Hi Everyone,
>>
>> I was wondering if someone could point to the right direction
>> (examples, classes) for the following scenario:
>>
>> I have a few text fields inside a panel, when one of the text fields
>> is changed, I'd like to call a method with updates a panel within the
>> current panel.
>>
>> Currently I have the two text fields in the panel with the other panel
>> that displays the image, I just need to figure out how to call that
>> method when these forms are changed and I'm sure I can figure out the
>> rest from there.
>>
>> Any direction is helpful
>>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
Re: Ajax Panels Direction
Posted by bassglider <ba...@gmail.com>.
Ok, I think I'm getting somewhere after a few hours, I have two
textfields, when the user hits the ajax submit button, the panel
should be replaced with a new panel. I'm thinking that
onSubmit(AjaxRequestTarget target, Form<?> form)
should be able to take the input of the textfields and call the method
to update the image panel with a new image panel based on the new
values in the textfields.
Any ideas?
Form<String> form = new Form<String>("Chart");
TextField<Date> dateBegin =
new TextField<Date>("beginningDate", new
PropertyModel<Date>(session, "beginningDate"));
dateBegin.add(new DatePicker());
dateBegin.setRequired(true);
form.add(dateBegin);
TextField<Date> endingDate =
new TextField<Date>("endingDate", new
PropertyModel<Date>(session, "endingDate"));
endingDate.add(new DatePicker());
endingDate.setRequired(true);
form.add(endingDate);
CreateChart(this);
AjaxFormValidatingBehavior.addToAllFormComponents(form,
"onchange", Duration.ONE_SECOND);
form.add(new AjaxButton("ajax-button", form) {
private static final long serialVersionUID = 1L;
@Override
protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
// repaint the feedback panel so that it is hidden
target.addComponent(feedback);
System.out.println("Ajax Submitted!" + feedback.toString());
}
....
private Panel CreateChart(Panel pan) {
pan.add(new AjaxLazyLoadPanel("image") {
/**
* Makes object serializable.
*/
private static final long serialVersionUID = 1L;
@Override
public Component getLazyLoadComponent(String id) {
return (new ChartPanel(id));
}
});
return pan;
}
On Sat, Dec 5, 2009 at 2:51 PM, bassglider <ba...@gmail.com> wrote:
> Hi Everyone,
>
> I was wondering if someone could point to the right direction
> (examples, classes) for the following scenario:
>
> I have a few text fields inside a panel, when one of the text fields
> is changed, I'd like to call a method with updates a panel within the
> current panel.
>
> Currently I have the two text fields in the panel with the other panel
> that displays the image, I just need to figure out how to call that
> method when these forms are changed and I'm sure I can figure out the
> rest from there.
>
> Any direction is helpful
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org