I'm quite new using Wicket framework.
Currently I'm working on to set the setEnabled of the TextField. In my case, I have two TextField to control using AjaxCheckbox. During my trial, I have no issue to setEnabled for the first TextField, but when I add second TextField with AjaxCheckbox, the second one didn't work, only the first one.
Is there something that I missed out?
The first one
mobileNo = new TextField<String>("mobileNo", new PropertyModel<String>(getModelObject(), "mobileNo")) {
#Override
protected void onConfigure() {
setEnabled(mobileNoCheckBoxValue);
}
};
mobileNo.setOutputMarkupPlaceholderTag(true);
form.add(mobileNo);
AjaxCheckBox mobileNoCheckBox = new AjaxCheckBox("mobileNoCheckBox", new PropertyModel<Boolean>(this, "mobileNoCheckBoxValue")) {
private static final long serialVersionUID = 1L;
#Override
protected void onUpdate(AjaxRequestTarget target) {
target.add(mobileNo);
}
};
form.add(mobileNoCheckBox);
and the second one
appliedAmount = new TextField<BigDecimal>("appliedAmount", new BigDecimalFormatProperty<BigDecimal>(getModel(), "appliedAmount")) {
#Override
protected void onConfigure() {
setEnabled(appliedAmountCheckBoxValue);
}
};
appliedAmount.setOutputMarkupPlaceholderTag(true);
form.add(appliedAmount);
AjaxCheckBox appliedAmountCheckBox = new AjaxCheckBox("appliedAmountCheckBox", new PropertyModel(this, "appliedAmountCheckBoxValue")) {
private static final long serialVersionUID = 1L;
#Override
protected void onUpdate(AjaxRequestTarget target) {
target.add(appliedAmount);
}
};
form.add(appliedAmountCheckBox);
Check your HTML code and make sure you use different id attribute values for <input type="checkbox" .../>.
If you have id attribute in your HTML template then better remove it completely and let Wicket to auto-generate it. The ids must be unique by HTML specification. But also Wicket uses them to lookup the HTML elements when sending their values with Ajax.
I guess when you click the second checkbox Wicket sends the state of the first one, which does not toggle.
Related
I use Wicket 1.5
When i change color it is really changed on the page only after refreshing using F5. How to refresh it in backend?
I use this lines for changing color:
dateDescription.add(AttributeModifier.replace("style", "color:red;"));
add(dateDescription);
UPDATE #1
Now i use AJAX but still have to refresh page for changing color. Could you tell me what i did wrong?
// in page class
public class FilterUpdateBehavior extends AjaxFormComponentUpdatingBehavior {
public FilterUpdateBehavior(String event) {
super(event);
}
#Override
protected void onUpdate(AjaxRequestTarget target) {
RefreshResult result = getResult(target);
if (result.getStatus() == RefreshResultStatus.DATE_NOT_SET) {
dateIntervalFilterPanel.setAlarmDateStatus(true);
} else {
dateIntervalFilterPanel.setAlarmDateStatus(false);
}
}
}
// in date panel class
dateDescription.add(new AttributeModifier("style", new AbstractReadOnlyModel<String>() {
private static final long serialVersionUID = 1L;
#Override
public String getObject() {
String cssClass = null;
if (isAlarmDateStatus()) {
cssClass = "color:red;";
} else {
cssClass = "color:black;";
}
return cssClass;
}
}));
add(dateDescription);
UPDATE #2
public RefreshResult getResults(AjaxRequestTarget target) {
// ... somewhere here additional logic of getting particulate RefreshResult
target.add(table);
target.add(paging);
target.add(loadingPanel);
return new RefreshResult(resultType);
}
UPDATE #3 FINAL (IT HELPED ME)
I miss this code line when i change isAlarmDateStatus, now it works fine. Thanks to Andrea!
target.add(dateDescription);
your code line looks right but you must use AJAX to reflect your changes without reloading the entire page. Unfortunately Wicket 1.5 is really outdated and there are few resources online to provide you an example of AJAX support. You might try to look into the old 1.5 AJAX examples code here:
https://github.com/apache/wicket/tree/build/wicket-1.5.17/wicket-examples/src/main/java/org/apache/wicket/examples/ajax/builtin
I'm trying to implement a Bootstrap Validated Input field with Help-text and validation icons in Wicket. (http://getbootstrap.com/css/#forms-help-text)
see example
I've encapsulated the TextField and the ComponentFeedbackPanel (BootstrapFieldFeedbackPanel) with a Border (BootstrapFormGroup), where the validation icon and the form-group css-class are controlled.
Problem is, when i update the whole Border after a keyDown/input event, the Textfield gets updated too and the cursor jumps to the beggining, losing the previous insert position. That doesn't happen with a change event, but then the ajax validation occurs only after I leave the field and not during insertion, as desired. Is there a way to update the Border without actually trigerring the update of the Body contents (Textfield)? Do you have another suggestion of how could I encapsulate the Textfield with markup and still be able to control the attributes of the encapsulating form-group/validation icon without changing the content/status of the Textfield itself?
myUrl = new TextField<String>("url");
myUrl.add(new UrlValidator(new String[]{"http", "https"}));
myUrl.setLabel(new StringResourceModel("lbl.myLink", this, null));
myUrl
.setOutputMarkupId(true)
.add(new AjaxFormComponentUpdatingBehavior("oninput") {
private static final long serialVersionUID = 1L;
#Override
protected void onUpdate(AjaxRequestTarget target) {
target.add(myLinkFeedback);
formGroup.setFeedbackStatus(BootstrapFormGroup.VALIDATION_SUCCESS);
target.add(formGroup);
}
#Override
protected void onError(AjaxRequestTarget target, RuntimeException e) {
target.add(myLinkFeedback);
formGroup.setFeedbackStatus(BootstrapFormGroup.VALIDATION_ERROR);
target.add(formGroup);
}
});
formGroup = new BootstrapFormGroup("formGroup", new StringResourceModel("lbl.myLink", this, null));
formGroup.setOutputMarkupId(true);
formGroup.setShowFeedbackStatusIcon(true);
formGroup.add(myUrl);
myLinkFeedback = new BootstrapFieldFeedbackPanel("myLinkFeedbackField", myUrl);
formGroup.add(myLinkFeedback);
form.add(formGroup);
You can introduce method like FormGroup#repaint(AjaxRequestTarget) that adds only the children you want to be repainted.
i would like to do Enable/Disable textbox using Checkbox in wicket framework.
here is my code:
List<DeliveryFormat> formatChoices = lookupProcessor.getLookupValues(DeliveryFormat.class);
//add(new RadioChoice("deliveryFormat", formatChoices, new ChoiceRenderer<DeliveryFormat>("label")));
//Add the check boxes for Delivery format
ChoiceRenderer<DeliveryFormat> deliveryFormatShippment = new ChoiceRenderer<DeliveryFormat>("label", "id");
CheckBoxMultipleChoice<DeliveryFormat> deliveryChoices = new CheckBoxMultipleChoice<DeliveryFormat>(
"deliveryFormat", formatChoices, deliveryFormatShippment);
add(deliveryChoices);
add(new DeliveryFormatValidator(deliveryChoices));
final WebMarkupContainer deliveryFormatCountryValue = new WebMarkupContainer("deliveryFormatCountry");
deliveryFormatCountryValue.setOutputMarkupId(true);
deliveryFormatCountryValue.setOutputMarkupPlaceholderTag(true);
add(deliveryFormatCountryValue);
deliveryFormatCountryValue.setVisible(DeliveryFormat.DELIVERY_FORMAT_ONE.equals(order.getObject().getDeliveryFormat()));
final TextArea<String> sampleTextArea = new TextArea<String>("address.country");
sampleTextArea.add(StringValidator.maximumLength(250)).add(
InlineErrorFeedback.INSTANCE);
sampleTextArea.setRequired(true);
sampleTextArea.setOutputMarkupId(true);
sampleTextArea.setMarkupId("address.country");
deliveryFormatCountryValue.add(sampleTextArea);
deliveryChoices.add(new AjaxFormComponentUpdatingBehavior("address.country") {
private static final long serialVersionUID = 1L;
#Override
protected void onUpdate(AjaxRequestTarget target) {
deliveryFormatCountryValue.setVisible(DeliveryFormat.DELIVERY_FORMAT_ONE.equals(order.getObject().getDeliveryFormat()));
target.addComponent(deliveryFormatCountryValue);
}
});
but i unable to do wt ever i want..is any thing wrong in my code?
my HTML page:
USA
The AjaxFormComponentUpdatingBehavior you are using expects the name of the JavaScript event you want to listen for and not the markup id of an HTML element, as you provided to it.
So for example new AjaxFormComponentUpdatingBehavior("change") would be correct.
In your case you could even use an OnChangeAjaxBehavior, since it's exactly made for the type of event you are trying to listen for.
You need to change this statement
deliveryChoices.add(new AjaxFormComponentUpdatingBehavior("address.country") {
to
deliveryChoices.add(new AjaxFormComponentUpdatingBehavior("onchange") {1
I need to refresh the panel (it has been declared as panel in the below code) after I add a new group. The ItemSelectionComponent component is a different Panel that contains the added groups of a particular person. What I need to do is once I add a new group that particular panel (the ItemSelectionComponent panel with the wicket id "panel") should be refreshed and the newly added group should get displayed.
I currently use
target.addComponent(panel);
to refresh, but it doesn't seems to be working :(
Can someone tell me whats wrong?
thanks!
Your avaiableGroups should be a LoadableDetachableModel that contains your list of GroupSelectionModels. When you use the AjaxSubmitLink get List from the LoadableDetachableModel and add to it.
LoadableDetachableModel<List<GroupSelectionModel>> LDM = new LoadableDetachableModel<List<GroupSelectionModel>>() {
private static final long serialVersionUID = 1L;
#Override
protected String load() {
return ServiceLocator.getInstance().find(GroupService.class).getAllGroups();;
}
};
AjaxSubmitLink addBtn = new AjaxSubmitLink("addBtn") {
#Override
protected void onSubmit(AjaxRequestTarget target, Form<?> f) {
List<Group> currentGroups = ServiceLocator.getInstance().find(GroupService.class).getAllGroups();
Group group = new Group();
group.setGroupType(Group.GroupType.EMAIL);
group.setMerchant(merchant);
group.setGroupName(form.getModelObject().getGroupName());
ServiceLocator.getInstance().find(GroupService.class).saveGroup(group);
GroupSelectionModel newGroup = new GroupSelectionModel();
newGroup.setGroup(group);
newGroup.setGroupSelected(true);
LDM.getObject().add(newGroup);
target.addComponent(panel);
}
};
Then pass LDM as a param to ItemSelectionComponent instead of avaiableGroups. Use LDM in ItemSelectionComponent like you did avaiableGroups.
public class ItemSelectionComponent extends Panel{
private static final long serialVersionUID = 6670144847L;
private LoadableDetachableModel<List<GroupSelectionModel>> model;
public ItemSelectionComponent(String id,LoadableDetachableModel<List<GroupSelectionModel>> model){
super(id);
this.model = model;
init();
}
private void init(){
WebMarkupContainer groupSelectionContainer = new WebMarkupContainer("groupSelectionContainer");
RepeatingView repeater = new RepeatingView("groupList");
WebMarkupContainer groupList;
for(final GroupSelectionModel m : model.getObject()){
groupList = new WebMarkupContainer(repeater.newChildId());
WebMarkupContainer groupNameContainer = new WebMarkupContainer("groupNameContainer");
groupNameContainer.add(new Label("groupName", m.getGroup().getGroupName()));
groupList.add(groupNameContainer);
repeater.add(groupList);
}
groupSelectionContainer.add(repeater);
this.add(groupSelectionContainer);
}
}
Hope this helps.
I have one possible solution to your problem.
Add a WebMarkupContainer:
final WebMarkupContainer panelContainer = new WebMarkupContainer("panelContainer");
panelContainer.setOutputMarkupId(true);
And in the html you will have it as:
<div wicket:id="panelContainer"></div>
Then you must add the panel to your markup container:
panelContainer.add(panel)
And add the markup container on the target instead of the panel:
target.addComponent(panelContainer);
If this doesn't work let me know and i will provide further assitance
When you target the panel the components in it will be refreshed. But what happens depends on how "ItemSelectionComponent" is using "avaiableGroups".
I have a simple, mysterious problem with a label and using ajax to show it.
public class ChecklistTemplateForm extends Form{
private static final long serialVersionUID = 1L;
private Label cantSaveLabel;
public ChecklistTemplateForm(String id) {
super(id);
cantSaveLabel = new Label("cantSaveLabel", "Name is not unique, enter another name and try saving again.");
cantSaveLabel.setVisible(false);
cantSaveLabel.setOutputMarkupId(true);
add(cantSaveLabel);
add(new AjaxButton("saveButton") {
private static final long serialVersionUID = 1L;
#Override
protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
target.addComponent(cantSaveLabel);
//here i do some stuff to decide if canSave is true or false
if (canSave){
setResponsePage(AdminCheckListPage.class);
}
else if (!canSave){
cantSaveLabel.setVisible(true);
System.out.println(canSave);
}
}
});
}
}
The funny thing is, is canSave is false, the System.out.print works but the cansavelabel never becomes visible. What am I missing?
You have to tell wicket that it should use a placeholder for you label because it can't update a component that doesn't exist in the markup.
cantSaveLabel.setOutputMarkupId(true);
cantSaveLabel.setOutputMarkupPlaceholderTag(true);
You can not update the Label via Ajax as it is not in the rendered page. The
cantSaveLabel.setVisible(false);
makes it so that the Label is not in the HTML. You would need to surround the Label with another component (WebMarkupContainer), call setOutputMarkupId(true) on this and add this container to the AjaxRequestTarget instaed of the label.