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

Question

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

问候， 马特乌斯

Answer 1

默认情况下，AjaxLink 不提交数据/表单。AjaxSubmitLink 和 AjaxButton 做到了！

对于您的用例，您可以使用 AjaxRequestAttributes 并发送“动态额外参数”。我在我的手机上，目前我不能给你一个例子，但我的想法是构造一个简单的 JSON 对象，其中一个键是请求参数名称，值是 forn 元素的值。谷歌这些关键词！如果您无法做到，请添加评论，我会尽快更新我的答案！

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

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

Answer 2

解决此问题的一种方法是将带有“特殊”链接的“特殊”字段放在第二个Form位置，然后使用 CSS 在视觉上定位“特殊”字段，就像它在 main 中一样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用position: absolute; top: ...或类似的东西设计那个类。

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

Answer 3

它实际上比 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，但将具有您想要的功能。但是，当您提交外部表单时，也会提交第二个表单。