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

Question

我有一个带有几个输入字段和一个特殊字段的表单，我想用ajax进行处理。事情是，我想在单击AjaxLink之后仅处理该字段。没有处理整个表单。我想访问AjaxLink的onSubmit方法中的输入字段的值。那可能吗？如果是，那么如何？

问候， Mateusz来解决，这将是把那个“特殊的”场以其“特殊”链接到第二Form，然后用CSS来直观地定位“特别”领域像它

Answer 1

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

对于您的用例，您可以使用AjaxRequestAttributes并发送“动态额外参数”。我在我的手机上，目前我不能给你一个例子，但想法是用一个键作为请求参数名称并赋值forn元素的值来构造一个简单的JSON对象。 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()}); 
    } 
}); 

Answer 2

的一种方式主要在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，但将有你想要的功能。但是当你提交外部表单时，第二种形式也会被提交。