How to clear autoComplete textfield in Wicket after submit? - wicket

Question

I'm having issues clearing the input of a autoComplete Textfield.. For some reason whenever I call target.add(reference to AutoCompleteTextField);
my input values are null...
So basically, I can clear the referenced string the input is stored in, but everytime I call an ajaxupdate it nulls.
I tried both ajaxButton, and AjaxSubmitLink. Both get the same reactions. I have a button to submit the input from the textField.
Code:
<form wicket:id="autoCompleteForm">
<td><input wicket:id="autoCompleteTextField" size="20"/></td>
<td><button width:100px wicket:id="selectRoleBtn">Select</button></td>
</form>
private void autoCompleteForm()
{
findRoleForm = new Form<Void>("autoCompleteForm");
findRoleForm.setOutputMarkupId(true);
addOrReplace(findRoleForm);
field = new AutoCompleteTextField<String>("autoCompleteTextField",
new PropertyModel<String>(this,"autoString"))
{
#Override
protected Iterator<String> getChoices(String input)
{
if (Strings.isEmpty(input))
{
List<String> emptyList = Collections.emptyList();
return emptyList.iterator();
}
List<String> choices = new ArrayList<String>(10);
for (final Role role : rolesList)
{
final String roles = role.getRoleName();
if (roles.toUpperCase().startsWith(input.toUpperCase()))
{
choices.add(roles);
if (choices.size() == 10)
{
break;
}
}
}
return choices.iterator();
}
};
findRoleForm.addOrReplace(field);
findRoleForm.addOrReplace(new AjaxSubmitLink("selectRoleBtn", findRoleForm)
{
protected void onSubmit(AjaxRequestTarget target, Form<?> form)
{
System.out.println("here1" + autoString);
if(rolesList != null && autoString!= null)
{
if(rolesList .size() != 0)
{
for(int i=0; i < rolesList .size(); i++)
{
System.out.println("here2" + autoString);
if(rolesList .get(i).getRoleName().equals(autoString))
{
role = rolesList.get(i);
roleInformation.addOrReplace(new Label("roleNameTxt", role.getRoleName()));
roleInformation.addOrReplace(new Label("roleAliasTxt", role.getRoleAlias()));
roleInformation.addOrReplace(new Label("roleOwnerTxt", role.getRoleOwnerId()));
roleInformation.addOrReplace(new Label("roleStatusTxt", role.getRoleAccessStatus()));
roleInformation.addOrReplace(new Label("roleCategoryTxt", role.getRoleCategoryName()));
roleInformation.addOrReplace(new Label("roleDescriptionTxt", role.getRoleDescription()));
roleInformation.addOrReplace(new Label("roleValidityTxt", role.getRoleValidityStatus()));
roleInformation.addOrReplace(new Label("roleNumUsers", ""));
//add adOrReplace(findRoleForm);
autoString = "";
target.add(field);
target.add(roleInformation);
currentRoleSelection = null;
target.add(rolesDropDownChoice);
break;
}
}
}
}
}
}).add(getIndicatorAppender());
}
Edit:
The autoCompleteTextField input field clears the first time, but when I try it again. The string: autoString will be null. So if you choose your selection on first attempt (from the search list provided), hit select button, it gives you the correct string and clears. But when you do it for a second time, selected a provided value, the "autoString" will be null.. and will not get the input value assigned to it.

Answer 1

Can you describe your problem more properly?
I had to modify your code to get it compiled
import java.io.Serializable;
import java.util.ArrayList;
import java.util.Collections;
import java.util.Iterator;
import java.util.LinkedList;
import java.util.List;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.ajax.markup.html.form.AjaxSubmitLink;
import org.apache.wicket.extensions.ajax.markup.html.autocomplete.AutoCompleteTextField;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.model.PropertyModel;
import org.apache.wicket.util.string.Strings;
public class AutoTestPage2 extends WebPage {
Form<Void> findRoleForm;
AutoCompleteTextField field;
List<Role> rolesList = new LinkedList<AutoTestPage2.Role>();
String autoString;
public AutoTestPage2() {
super();
autoCompleteForm();
}
private void autoCompleteForm() {
rolesList.add(new Role("Adam"));
rolesList.add(new Role("Boris"));
rolesList.add(new Role("Clair"));
findRoleForm = new Form<Void>("autoCompleteForm");
findRoleForm.setOutputMarkupId(true);
add(findRoleForm);
field = new AutoCompleteTextField<String>("autoCompleteTextField",
new PropertyModel<String>(this, "autoString")) {
#Override
protected Iterator<String> getChoices(final String input) {
if (Strings.isEmpty(input)) {
final List<String> emptyList = Collections.emptyList();
return emptyList.iterator();
}
final List<String> choices = new ArrayList<String>(10);
for (final Role role : rolesList) {
final String roles = role.getName();
if (roles.toUpperCase().startsWith(input.toUpperCase())) {
choices.add(roles);
if (choices.size() == 10) {
break;
}
}
}
return choices.iterator();
}
};
findRoleForm.addOrReplace(field);
findRoleForm.addOrReplace(new AjaxSubmitLink("selectRoleBtn", findRoleForm) {
#Override
protected void onSubmit(final AjaxRequestTarget target, final Form<?> form) {
System.out.println("here1" + autoString);
if (rolesList != null && autoString != null) {
if (rolesList.size() != 0) {
for (int i = 0; i < rolesList.size(); i++) {
System.out.println("here2" + autoString);
if (rolesList.get(i).getName().equals(autoString)) {
final Role role = rolesList.get(i);
// roleInformation.addOrReplace(new Label("roleNameTxt", role.getName()));
//add adOrReplace(findRoleForm);
autoString = "";
target.add(field);
// target.add(roleInformation);
// currentRoleSelection = null;
// target.add(rolesDropDownChoice);
break;
}
}
}
}
}
})/* .add(getIndicatorAppender()) */;
// add(findRoleForm);
}
class Role implements Serializable {
String name;
public Role(final String name) {
this.name = name;
}
public String getName() {
return name;
}
public void setName(final String name) {
this.name = name;
}
}
}
and when I press select, text field is cleared and there are two messages in console
here1Adam
here2Adam

Answer 2

I was able to fix this by putting other components inside the same form as the autoCompleteTextField.. for whatever reason, when those are re-rendered and they are inside the form.. it corrects the problem.