CODEWITHSUNDEEP
javascriptwicket
aioobe
aioobe

Reputation: 421090

Enabling/disabling form components dynamically without server round trip

I'm creating a form in which certain text fields should be enabled only if a certain checkbox is checked.

I'm fairly new to Wicket, and I'm curious about the following:

  1. Can I enable/disable the field without an (AJAX) round-trip to the server using existing Wicket classes? I.e. is it possible to add behaviors to the fields which causes the rendered HTML to include JavaScript that enables/disables the fields?

  2. If the answer to the above question is no: Is it "legal" for me to add the required JavaScript code myself in the markup? Or do I run the risk of messing up the form submission so that it is not properly recognized by Wicket?

I'm new to Wicket and I'm not sure what is best practice here. Perhaps the Wicket-way of doing this always involves an AJAX round-trip?

Upvotes: 1

Views: 477

Answers (2)

Tom
Tom

Reputation: 4093

Can I enable/disable the field without an (AJAX) round-trip to the server using existing Wicket classes? I.e. is it possible to add behaviors to the fields which causes the rendered HTML to include JavaScript that enables/disables the fields?

Yes, you can do it without a server round trip. An no, not with a class provided by Wicket, you will have to create that yourself. Here's a behavior that you can add to a component. If the component with this behavior is clicked, the target component passed in the constructor will be disabled via javascript:

public class DisableFormComponentBehavior extends Behavior {

private Component sourceComponent;

private FormComponent targetComponent;

public DisableFormComponentBehavior(FormComponent targetComponent) {
    targetComponent.setOutputMarkupId(true);
    this.targetComponent = targetComponent;
}

public void bind(Component component) {
    super.bind(component);
    component.setOutputMarkupId(true);
    this.sourceComponent = component;
}

@Override
public void renderHead(Component component, IHeaderResponse response) {
    super.renderHead(component, response);
    response.render(JavaScriptHeaderItem
            .forReference(JQueryResourceReference.get()));
    response.render(OnDomReadyHeaderItem.forScript(String
            .format("$('#%s').click(function(){$('#%s').prop('disabled', true);});",
                    component.getMarkupId(), targetComponent.getMarkupId())));
}

}

If the answer to the above question is no: Is it "legal" for me to add the required JavaScript code myself in the markup? Or do I run the risk of messing up the form submission so that it is not properly recognized by Wicket?

Well, the answer to above question is not "no", but it is still perfectly legal to add your own javascript to the Wicket html files. You will have to define the ids of your components in the HTML then, however. I like the solution with Behaviors better, though, because it is more reusable.

Upvotes: 2

DevlshOne
DevlshOne

Reputation: 8457

This is definitely doable without a call to the server. Some pretty basic client-side Javascript / jQuery will do what you want. Take a look here and substitute your checkboxes for the dropdowns.

Upvotes: 0

Related Questions