在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，但將有你想要的功能。但是當你提交外部表單時，第二種形式也會被提交。