在 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 直观地定位"特殊"字段，就像它在主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>

然后用position: absolute; top: ...或类似的东西来设计.special-field类。

解决方案不是很优雅，它更像是一种黑客攻击。这会给以后必须阅读本文的人带来一些困惑。但是，如果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，但将具有您想要的功能。但是，当您提交外部表格时，也将提交第二种表格。