Processing single input field with ajax in Apache Wicket

Question

I have a form with several input fields and one special field, that I want to process with ajax. The thing is, that I want to process only that field after the AjaxLink has been clicked. Without processing of the whole form. I want to access the value of that input field in the method onSubmit of the AjaxLink. Is that possible? If yes, then how?

Regards, Mateusz

martin-g · Accepted Answer · 2017-03-21T09:40:28.713

By default AjaxLink does not submit data/forms. AjaxSubmitLink and AjaxButton do!

For your use case you can AjaxRequestAttributes and send "dynamic extra parameters". I'm on my mobile and I cannot give you an example at the moment but the idea is to construct a simple JSON object with a key being the request parameter name and value the forn element's value. Google these keywords! If you can't manage to do it then add a comment and I will update my answer as soon as I can!

Here is a sample code. Beware I've written it completely here, so it might have a typo or two!

add(new AjaxLink("customSubmitLink") {
    @Override public void onClick(AjaxRequestTarget target) {
        int aFieldValue = getRequest().getRequestParameters().getParameterValue("aField").toInt();
        // do something with aFieldValue
    }

    @Override protected void updateAjaxAttributes(AjaxRequestAttributes attrs) {
        super.updateAjaxAttributes(attrs);
        attrs.getDynamicExtraParameters().add("return {\"aField\": jQuery('#aFormField').val()});
    }
});

Hi Martin, I tried couple of variants but still couldn't make it work. Could you paste some example, how it can be done? — Mateusz Moroz, Mar 20 '17 at 13:51
Martin, thank you, thank you, thank you! :) Just had to replace the $ with jQuery and it works like a charm. — Mateusz Moroz, Mar 21 '17 at 08:29

Roman Puchkovskiy · Answer 2 · 2017-03-17T19:49:18.240

One way to solve this would be to put that 'special' field with its 'special' link to a second Form and then use CSS to visually position the 'special' field like it is inside the main Form.

Something like this:

Form<Void> mainForm = new Form<Void>("main-form") {
    @Override
    protected void onSubmit() {
        super.onSubmit();
    }
};
add(mainForm);

// ... populate the main form

Form<Void> secondForm = new Form<Void>("second-form");
add(secondForm);
final Model<String> specialModel = Model.of();
secondForm.add(new TextField<>("special-field", specialModel));
secondForm.add(new AjaxButton("special-button") {
    @Override
    protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
        // ... process the special field value
    }
});

And in the markup, as usual:

<form wicket:id="main-form">
    ... main form content
</form>

<form wicket:id="second-form">
    <label>Special field: <input class="special-field" wicket:id="special-field"></label>

    <button wicket:id="special-button">Special button</button>
</form>

And then style that .special-field class with position: absolute; top: ... or something like that.

The solution is not very elegant, it's more of a hack. It will create some confusion for a person who would have to read this later. But it may work if the trick with CSS is possible.

Unfortunately I already have a form, and can't separate that field to its own form. — Mateusz Moroz, Mar 20 '17 at 13:53

score 0 · Answer 3 · answered Mar 17 '17 at 20:53

It's actually even easier than what rpuch suggested.

Just nest your forms and make sure the AjaxLink only submits the second form:

            <form wicket:id="form">
            <div wicket:id="dateTimeField"></div>
            <form wicket:id="secondForm">
                <input wicket:id="text" />
                <a wicket:id="secondSubmit">submit2</a>
            </form>
            <a wicket:id="submit">submit</a>
            </form>

    Form secondForm= new Form("secondForm");
    form.add(secondForm);

    final IModel<String> textModel = Model.of("");

    TextField<String> text = new TextField<>("text", textModel);
    secondForm.add(text);

    AjaxSubmitLink secondSubmit = new AjaxSubmitLink("secondSubmit", secondForm) {
        @Override
        protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
            super.onSubmit(target, form);
            logger.info("textMod: " + textModel.getObject());
        }
    };
    secondForm.add(secondSubmit);

The second form will be rendered as a div but will have the functionality that you desire. However the second form will also be submitted when you submit the outer form.

Processing single input field with ajax in Apache Wicket

3 Answers3