在 Apache Wicket 中使用 ajax 处理单个输入字段

Question

我有一个包含多个输入字段和一个特殊字段的表单，我想用 ajax 处理它。问题是，我只想在单击 AjaxLink 后处理该字段。无需处理整个表格。我想在 AjaxLink 的 onSubmit 方法中访问该输入字段的值。那可能吗？如果是，那又如何？

此致，马特乌斯

Answer 1

解决此问题的一种方法是将 'special' 字段及其 'special' link 放到第二个 Form 中，然后使用 CSS在视觉上定位 'special' 字段，就像它在主 Form.

中一样

像这样：

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
    }
});

和往常一样在标记中：

<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>

然后将 .special-field class 的样式设置为 position: absolute; top: ... 或类似的样式。

这个解决方案不是很优雅，更像是一个 hack。对于稍后必须阅读此内容的人来说，这会造成一些混乱。但如果 CSS 的技巧可行，它可能会起作用。

Answer 2

实际上比 rpuch 建议的更简单。

只需嵌套您的表单并确保 AjaxLink 仅提交第二个表单：

            <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);

第二个表单将呈现为 div，但将具有您想要的功能。但是第二个表单也会在你提交外层表单的时候被提交。

Answer 3

默认情况下，AjaxLink 不会提交 data/forms。 AjaxSubmitLink 和 AjaxButton 可以！

对于您的用例，您可以使用 AjaxRequestAttributes 并发送 "dynamic extra parameters"。我在我的手机上，我现在不能给你一个例子，但我的想法是构建一个简单的 JSON 对象，其中一个键是请求参数名称，并为 forn 元素的值赋值。 Google这些关键词！如果您做不到，请添加评论，我会尽快更新我的答案！

这是一个示例代码。请注意，我在这里完整地写了它，所以它可能有一两个错字！

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()});
    }
});

在 Apache Wicket 中使用 ajax 处理单个输入字段

Processing single input field with ajax in Apache Wicket

java

wicket

wicket-7