You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Bushby <mi...@yahoo.com> on 2008/02/22 16:49:40 UTC
AutoCompleteTextField user selection
I have an AutoCompleteTextField which searches for a person object. When a
person is selected from the auto complete, I want to update the panel and
the model with the person’s information. I have tried adding an
AjaxFormComponentUpdatingBehavior, but it gets called twice. Once with the
text entered by the user, and the second with the text from the auto
complete. How do I capture just the selection event?
Thanks
--
View this message in context: http://www.nabble.com/AutoCompleteTextField-user-selection-tp15634452p15634452.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: AutoCompleteTextField user selection
Posted by Ryan Gravener <ry...@gmail.com>.
Try adding setting the outputMarkupPlaceholderTag.
patientAutoCompleteTextField.setOutputMarkupId( true );
patientAutoCompleteTextField.setVisible( false );
patient.setOutputMarkupPlaceholderTag(true);
and in your onUpdate
target.addComponent(patient)
that way you will not have to add the whole panel.
On 28/02/2008, Martin Funk <ma...@googlemail.com> wrote:
> Hmmmm...
>
> not quit sure if I understood you. Just for the fun of it I rehacked a
> quickstart that might simulate you problem.
>
> But even if it does I'm not quite sure if its bug, or a feature.
> You add an AjaxFormComponentUpdatingBehavior to an AutoCompleteTextField.
> As long as the keyboard is used to select the value or to leave the
> TextField everything is fine its just that when the mouse is used to select
> an element in the dropdown the AjaxFormComponentUpdatingBehavior gets called
> twice.
>
> That's not without some plausibility.
> First a value is typed, so the field is changed and a dropdown is shown.
> Then the mouse clicks on an element in the dropdown, the textfield looses
> focus, so the first 'onchange' is fired.
> Then the pulldown value is inserted into the textfield, it is changed agan
> and possibly retains focus.
> Finally as the mouse clicked on the dropdown, so outside of the textfield it
> looses the focus again, second 'onchange' fired.
>
> Maybe someone else has more insight, and maybe something can be done in
> /wicket-autocomplete.js
>
> mf
>
> svn diff jdk-1.4/wicket-quickstart/src/
> Index: jdk-1.4
> /wicket-quickstart/src/main/java/org/apache/wicket/quickstart/Index.java
> ===================================================================
> --- jdk-1.4/wicket-quickstart/src/main/java/org/apache/wicket/quickstart/Index.java
> (Revision 632116)
> +++ jdk-1.4/wicket-quickstart/src/main/java/org/apache/wicket/quickstart/Index.java
> (Arbeitskopie)
> @@ -16,7 +16,17 @@
> */
> package org.apache.wicket.quickstart;
>
> +import java.util.ArrayList;
> +import java.util.Arrays;
> +import java.util.Iterator;
> +
> import org.apache.wicket.PageParameters;
> +import org.apache.wicket.ajax.AjaxRequestTarget;
> +import org.apache.wicket.ajax.form.AjaxFormComponentUpdatingBehavior;
> +import
> org.apache.wicket.extensions.ajax.markup.html.autocomplete.AutoCompleteTextField
> ;
> +import org.apache.wicket.markup.html.basic.Label;
> +import org.apache.wicket.markup.html.form.Form;
> +import org.apache.wicket.model.Model;
>
> /**
> * Basic bookmarkable index page.
> @@ -34,5 +44,36 @@
> */
> public Index(final PageParameters parameters)
> {
> + Form form = new Form("form")
> + {
> + protected void onSubmit()
> + {
> + System.out.println("submit");
> + }
> + };
> + add(form);
> + final AutoCompleteTextField af = new
> AutoCompleteTextField("field", new Model(""))
> + {
> + protected Iterator getChoices(String input)
> + {
> + String[] args = { "a", "b", "c" };
> + return new ArrayList(Arrays.asList
> (args)).iterator();
> + }
> + };
> + final Label label = new Label("label", "");
> + label.setOutputMarkupId(true);
> + add(label);
> + af.add(new AjaxFormComponentUpdatingBehavior("onchange")
>
> + {
> + private static final long serialVersionUID = 1L;
> +
> + public void onUpdate(AjaxRequestTarget target)
>
> + {
> + System.out.println("updated : " + " : " +
> af.getModelObjectAsString());
> + label.setModelObject(af.getModelObject());
> + target.addComponent(label);
> + }
> + });
> + form.add(af);
> }
> }
> Index: jdk-1.4
> /wicket-quickstart/src/main/java/org/apache/wicket/quickstart/Index.html
> ===================================================================
> --- jdk-1.4/wicket-quickstart/src/main/java/org/apache/wicket/quickstart/Index.html
> (Revision 632116)
> +++ jdk-1.4/wicket-quickstart/src/main/java/org/apache/wicket/quickstart/Index.html
> (Arbeitskopie)
> @@ -5,6 +5,11 @@
> <body>
> <h1>QuickStart</h1>
> <p>This is your first Wicket application.</p>
> + <p wicket:id="label"></p>
> + <form wicket:id="form">
> + Text field: <input type="text" wicket:id="field" /><br/>
> + <input type="submit" value="Send
> to server" />
> + </form>
> </body>
> </html>
>
> 2008/2/26, Bushby <mi...@yahoo.com>:
>
> >
> >
> > I have a panel which is backed by an over all CompoundPropertyModel. It
> > has
> > an inner panel which is my search panel and Labels. Here is the search
> > panel code.
> >
> > public class SearchPatientPanel extends Panel
> > {
> > private static final long serialVersionUID = 8413569236371190758L;
> > private PatientAutoCompleteTextField patientAutoCompleteTextField;
> > private Label searchLabel;
> > public SearchPatientPanel( String id )
> > {
> > super( id );
> > setOutputMarkupId( true );
> > final ModalWindow addPatientWindow;
> > add( addPatientWindow = new ModalWindow(
> > "addPatientWindow" ) );
> >
> > searchLabel = new Label( "searchLabel", "Enter any part of
> > the patient's
> > name." );
> > searchLabel.setOutputMarkupId( true );
> > searchLabel.setVisible( false );
> > add( searchLabel );
> >
> > patientAutoCompleteTextField = new
> > PatientAutoCompleteTextField(
> > "lastName", new PatientAutoCompleteTextRenderer(), addPatientWindow );
> > patientAutoCompleteTextField.setOutputMarkupId( true );
> > patientAutoCompleteTextField.setVisible( false );
> > add( patientAutoCompleteTextField );
> >
> > add( new AjaxLink( "search" )
> > {
> > private static final long serialVersionUID
> > = -6622359946182548552L;
> >
> > @Override
> > public void onClick( AjaxRequestTarget
> > target )
> > {
> >
> > SearchPatientPanel.this.patientAutoCompleteTextField.setVisible( true
> > );
> >
> > SearchPatientPanel.this.searchLabel.setVisible( true );
> > target.addComponent(
> > SearchPatientPanel.this );
> > }
> >
> > });
> > }
> >
> > public void hideSearch()
> > {
> > patientAutoCompleteTextField.setVisible( false );
> > patientAutoCompleteTextField.setModel( new Model() );
> > searchLabel.setVisible( false );
> > }
> > }
> >
> > The AutoCompleteTextField has an AjaxUpdatingBehavior.
> >
> > this.add( new AjaxFormComponentUpdatingBehavior(
> > "onchange" )
> > {
> >
> > private static final long serialVersionUID = 1L;
> >
> > public void onUpdate( AjaxRequestTarget target )
> > {
> >
> > String selectedPatient = getModelValue();
> > if( StringUtils.isNotEmpty( selectedPatient )
> > )
> > {
> > if( StringUtils.contains( selectedPatient,
> > "New Patient" ) )
> > {
> > System.out.println( "user wants to
> > create a new patient" );
> > addPatientWindow.show( target );
> > }
> > else
> > {
> > Patient patient = getPatient(
> > selectedPatient ) );
> > target.addComponent(
> > patientDataPanel );
> > hideSearch( target );
> > }
> > }
> >
> >
> > }
> > });
> >
> > I type a couple characters into the autocomplete and then select from the
> > list. The first time the onChange event is fired, I get the input. The
> > second time the event is fired I get the selected text.
> >
> > Thanks
> > Mike
> >
> >
> >
> > Martin Funk-3 wrote:
> > >
> > > Hi Michal,
> > >
> > > could you come up with some code?
> > >
> > > mf
> > >
> > > 2008/2/22, Bushby <mi...@yahoo.com>:
> > >>
> > >>
> > >> I have an AutoCompleteTextField which searches for a person
> > object. When
> > >> a
> > >> person is selected from the auto complete, I want to update the panel
> > and
> > >> the model with the person's information. I have tried adding an
> > >> AjaxFormComponentUpdatingBehavior, but it gets called twice. Once with
> > >> the
> > >> text entered by the user, and the second with the text from the auto
> > >> complete. How do I capture just the selection event?
> > >>
> > >> Thanks
> > >>
> > >>
> > >> --
> > >> View this message in context:
> > >>
> > http://www.nabble.com/AutoCompleteTextField-user-selection-tp15634452p15634452.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
> > >>
> > >>
> > >
> > >
> >
> >
> > --
> > View this message in context:
> > http://www.nabble.com/AutoCompleteTextField-user-selection-tp15634452p15676689.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
> >
> >
>
--
Ryan Gravener
http://ryangravener.com
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: AutoCompleteTextField user selection
Posted by Martin Funk <ma...@googlemail.com>.
Hmmmm...
not quit sure if I understood you. Just for the fun of it I rehacked a
quickstart that might simulate you problem.
But even if it does I'm not quite sure if its bug, or a feature.
You add an AjaxFormComponentUpdatingBehavior to an AutoCompleteTextField.
As long as the keyboard is used to select the value or to leave the
TextField everything is fine its just that when the mouse is used to select
an element in the dropdown the AjaxFormComponentUpdatingBehavior gets called
twice.
That's not without some plausibility.
First a value is typed, so the field is changed and a dropdown is shown.
Then the mouse clicks on an element in the dropdown, the textfield looses
focus, so the first 'onchange' is fired.
Then the pulldown value is inserted into the textfield, it is changed agan
and possibly retains focus.
Finally as the mouse clicked on the dropdown, so outside of the textfield it
looses the focus again, second 'onchange' fired.
Maybe someone else has more insight, and maybe something can be done in
/wicket-autocomplete.js
mf
svn diff jdk-1.4/wicket-quickstart/src/
Index: jdk-1.4
/wicket-quickstart/src/main/java/org/apache/wicket/quickstart/Index.java
===================================================================
--- jdk-1.4/wicket-quickstart/src/main/java/org/apache/wicket/quickstart/Index.java
(Revision 632116)
+++ jdk-1.4/wicket-quickstart/src/main/java/org/apache/wicket/quickstart/Index.java
(Arbeitskopie)
@@ -16,7 +16,17 @@
*/
package org.apache.wicket.quickstart;
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.Iterator;
+
import org.apache.wicket.PageParameters;
+import org.apache.wicket.ajax.AjaxRequestTarget;
+import org.apache.wicket.ajax.form.AjaxFormComponentUpdatingBehavior;
+import
org.apache.wicket.extensions.ajax.markup.html.autocomplete.AutoCompleteTextField
;
+import org.apache.wicket.markup.html.basic.Label;
+import org.apache.wicket.markup.html.form.Form;
+import org.apache.wicket.model.Model;
/**
* Basic bookmarkable index page.
@@ -34,5 +44,36 @@
*/
public Index(final PageParameters parameters)
{
+ Form form = new Form("form")
+ {
+ protected void onSubmit()
+ {
+ System.out.println("submit");
+ }
+ };
+ add(form);
+ final AutoCompleteTextField af = new
AutoCompleteTextField("field", new Model(""))
+ {
+ protected Iterator getChoices(String input)
+ {
+ String[] args = { "a", "b", "c" };
+ return new ArrayList(Arrays.asList
(args)).iterator();
+ }
+ };
+ final Label label = new Label("label", "");
+ label.setOutputMarkupId(true);
+ add(label);
+ af.add(new AjaxFormComponentUpdatingBehavior("onchange")
+ {
+ private static final long serialVersionUID = 1L;
+
+ public void onUpdate(AjaxRequestTarget target)
+ {
+ System.out.println("updated : " + " : " +
af.getModelObjectAsString());
+ label.setModelObject(af.getModelObject());
+ target.addComponent(label);
+ }
+ });
+ form.add(af);
}
}
Index: jdk-1.4
/wicket-quickstart/src/main/java/org/apache/wicket/quickstart/Index.html
===================================================================
--- jdk-1.4/wicket-quickstart/src/main/java/org/apache/wicket/quickstart/Index.html
(Revision 632116)
+++ jdk-1.4/wicket-quickstart/src/main/java/org/apache/wicket/quickstart/Index.html
(Arbeitskopie)
@@ -5,6 +5,11 @@
<body>
<h1>QuickStart</h1>
<p>This is your first Wicket application.</p>
+ <p wicket:id="label"></p>
+ <form wicket:id="form">
+ Text field: <input type="text" wicket:id="field" /><br/>
+ <input type="submit" value="Send
to server" />
+ </form>
</body>
</html>
2008/2/26, Bushby <mi...@yahoo.com>:
>
>
> I have a panel which is backed by an over all CompoundPropertyModel. It
> has
> an inner panel which is my search panel and Labels. Here is the search
> panel code.
>
> public class SearchPatientPanel extends Panel
> {
> private static final long serialVersionUID = 8413569236371190758L;
> private PatientAutoCompleteTextField patientAutoCompleteTextField;
> private Label searchLabel;
> public SearchPatientPanel( String id )
> {
> super( id );
> setOutputMarkupId( true );
> final ModalWindow addPatientWindow;
> add( addPatientWindow = new ModalWindow(
> "addPatientWindow" ) );
>
> searchLabel = new Label( "searchLabel", "Enter any part of
> the patient's
> name." );
> searchLabel.setOutputMarkupId( true );
> searchLabel.setVisible( false );
> add( searchLabel );
>
> patientAutoCompleteTextField = new
> PatientAutoCompleteTextField(
> "lastName", new PatientAutoCompleteTextRenderer(), addPatientWindow );
> patientAutoCompleteTextField.setOutputMarkupId( true );
> patientAutoCompleteTextField.setVisible( false );
> add( patientAutoCompleteTextField );
>
> add( new AjaxLink( "search" )
> {
> private static final long serialVersionUID
> = -6622359946182548552L;
>
> @Override
> public void onClick( AjaxRequestTarget
> target )
> {
>
> SearchPatientPanel.this.patientAutoCompleteTextField.setVisible( true
> );
>
> SearchPatientPanel.this.searchLabel.setVisible( true );
> target.addComponent(
> SearchPatientPanel.this );
> }
>
> });
> }
>
> public void hideSearch()
> {
> patientAutoCompleteTextField.setVisible( false );
> patientAutoCompleteTextField.setModel( new Model() );
> searchLabel.setVisible( false );
> }
> }
>
> The AutoCompleteTextField has an AjaxUpdatingBehavior.
>
> this.add( new AjaxFormComponentUpdatingBehavior(
> "onchange" )
> {
>
> private static final long serialVersionUID = 1L;
>
> public void onUpdate( AjaxRequestTarget target )
> {
>
> String selectedPatient = getModelValue();
> if( StringUtils.isNotEmpty( selectedPatient )
> )
> {
> if( StringUtils.contains( selectedPatient,
> "New Patient" ) )
> {
> System.out.println( "user wants to
> create a new patient" );
> addPatientWindow.show( target );
> }
> else
> {
> Patient patient = getPatient(
> selectedPatient ) );
> target.addComponent(
> patientDataPanel );
> hideSearch( target );
> }
> }
>
>
> }
> });
>
> I type a couple characters into the autocomplete and then select from the
> list. The first time the onChange event is fired, I get the input. The
> second time the event is fired I get the selected text.
>
> Thanks
> Mike
>
>
>
> Martin Funk-3 wrote:
> >
> > Hi Michal,
> >
> > could you come up with some code?
> >
> > mf
> >
> > 2008/2/22, Bushby <mi...@yahoo.com>:
> >>
> >>
> >> I have an AutoCompleteTextField which searches for a person
> object. When
> >> a
> >> person is selected from the auto complete, I want to update the panel
> and
> >> the model with the person's information. I have tried adding an
> >> AjaxFormComponentUpdatingBehavior, but it gets called twice. Once with
> >> the
> >> text entered by the user, and the second with the text from the auto
> >> complete. How do I capture just the selection event?
> >>
> >> Thanks
> >>
> >>
> >> --
> >> View this message in context:
> >>
> http://www.nabble.com/AutoCompleteTextField-user-selection-tp15634452p15634452.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
> >>
> >>
> >
> >
>
>
> --
> View this message in context:
> http://www.nabble.com/AutoCompleteTextField-user-selection-tp15634452p15676689.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: AutoCompleteTextField user selection
Posted by Bushby <mi...@yahoo.com>.
I have a panel which is backed by an over all CompoundPropertyModel. It has
an inner panel which is my search panel and Labels. Here is the search
panel code.
public class SearchPatientPanel extends Panel
{
private static final long serialVersionUID = 8413569236371190758L;
private PatientAutoCompleteTextField patientAutoCompleteTextField;
private Label searchLabel;
public SearchPatientPanel( String id )
{
super( id );
setOutputMarkupId( true );
final ModalWindow addPatientWindow;
add( addPatientWindow = new ModalWindow( "addPatientWindow" ) );
searchLabel = new Label( "searchLabel", "Enter any part of the patient's
name." );
searchLabel.setOutputMarkupId( true );
searchLabel.setVisible( false );
add( searchLabel );
patientAutoCompleteTextField = new PatientAutoCompleteTextField(
"lastName", new PatientAutoCompleteTextRenderer(), addPatientWindow );
patientAutoCompleteTextField.setOutputMarkupId( true );
patientAutoCompleteTextField.setVisible( false );
add( patientAutoCompleteTextField );
add( new AjaxLink( "search" )
{
private static final long serialVersionUID = -6622359946182548552L;
@Override
public void onClick( AjaxRequestTarget target )
{
SearchPatientPanel.this.patientAutoCompleteTextField.setVisible( true
);
SearchPatientPanel.this.searchLabel.setVisible( true );
target.addComponent( SearchPatientPanel.this );
}
});
}
public void hideSearch()
{
patientAutoCompleteTextField.setVisible( false );
patientAutoCompleteTextField.setModel( new Model() );
searchLabel.setVisible( false );
}
}
The AutoCompleteTextField has an AjaxUpdatingBehavior.
this.add( new AjaxFormComponentUpdatingBehavior( "onchange" )
{
private static final long serialVersionUID = 1L;
public void onUpdate( AjaxRequestTarget target )
{
String selectedPatient = getModelValue();
if( StringUtils.isNotEmpty( selectedPatient ) )
{
if( StringUtils.contains( selectedPatient, "New Patient" ) )
{
System.out.println( "user wants to create a new patient" );
addPatientWindow.show( target );
}
else
{
Patient patient = getPatient( selectedPatient ) );
target.addComponent( patientDataPanel );
hideSearch( target );
}
}
}
});
I type a couple characters into the autocomplete and then select from the
list. The first time the onChange event is fired, I get the input. The
second time the event is fired I get the selected text.
Thanks
Mike
Martin Funk-3 wrote:
>
> Hi Michal,
>
> could you come up with some code?
>
> mf
>
> 2008/2/22, Bushby <mi...@yahoo.com>:
>>
>>
>> I have an AutoCompleteTextField which searches for a person object. When
>> a
>> person is selected from the auto complete, I want to update the panel and
>> the model with the person's information. I have tried adding an
>> AjaxFormComponentUpdatingBehavior, but it gets called twice. Once with
>> the
>> text entered by the user, and the second with the text from the auto
>> complete. How do I capture just the selection event?
>>
>> Thanks
>>
>>
>> --
>> View this message in context:
>> http://www.nabble.com/AutoCompleteTextField-user-selection-tp15634452p15634452.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
>>
>>
>
>
--
View this message in context: http://www.nabble.com/AutoCompleteTextField-user-selection-tp15634452p15676689.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: AutoCompleteTextField user selection
Posted by Martin Funk <ma...@googlemail.com>.
Hi Michal,
could you come up with some code?
mf
2008/2/22, Bushby <mi...@yahoo.com>:
>
>
> I have an AutoCompleteTextField which searches for a person object. When
> a
> person is selected from the auto complete, I want to update the panel and
> the model with the person's information. I have tried adding an
> AjaxFormComponentUpdatingBehavior, but it gets called twice. Once with
> the
> text entered by the user, and the second with the text from the auto
> complete. How do I capture just the selection event?
>
> Thanks
>
>
> --
> View this message in context:
> http://www.nabble.com/AutoCompleteTextField-user-selection-tp15634452p15634452.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
>
>