Question

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

此致 Mateusz

Answer 1

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

对于您的用例，您可以使用AjaxRequestAttributes并发送＆＃34;动态额外参数＆＃34;。我在我的手机上，目前我不能给你一个例子，但我的想法是构造一个简单的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

解决这个问题的一种方法是将这种特殊的方法用于解决这个问题。其特殊的领域＆＃39;链接到第二个Form，然后使用CSS直观地定位“特殊”＃39}。类似的字段位于主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: ...或类似的东西进行样式化。

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

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

3 个答案: