Apache Wicketでajaxで単一入力フィールドを処理する

Question

私はajaxで処理したいいくつかの入力フィールドと1つの特別なフィールドを持つフォームを持っています。問題は、AjaxLinkがクリックされた後にそのフィールドだけを処理したいということです。フォーム全体の処理なし。私はAjaxLinkのメソッドonSubmitでその入力フィールドの値にアクセスしたいと思います。それは可能ですか？はいの場合は、どうですか？

よろしく、 はMateusz

Answer 1

デフォルトでは、AjaxLinkはではなく、データ/フォームを送信します。 AjaxSubmitLinkとAjaxButtonはそうです！

あなたの場合、AjaxRequestAttributesを使用して「動的な追加パラメータ」を送信できます。私は自分のモバイル上にいるので、現時点では例を挙げることはできませんが、考えられるのは、要求パラメータ名であるkeyとforn要素の値を持つ単純なJSONオブジェクトを作成することです。 Googleこれらのキーワード！ あなたがそれを行うことができない場合は、コメントを追加し、できるだけ早く私の答えを更新します！

ここにサンプルコードを示します。私はそれを完全にここに書いていることに注意してください、それはタイプミスまたは2つがあるかもしれません！

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を使用することです解決する1つの方法メインのFormの内側にあります。その後、

<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クラスのスタイル：

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

とマークアップでは、いつものように：このような

何か。

解決策はそれほどエレガントではありませんが、それはもっとハックです。後にこれを読まなければならない人にとって、混乱を招くでしょう。しかし、CSSを使うことができればうまくいくかもしれません。

Answer 3

実際には、どのような提案よりも簡単です。

だけの巣は、フォームや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); 

2番目の形式は、div要素としてレンダリングされますが、あなたが望む機能を持つことになります。ただし、外形を提出する場合は、2番目の書式も提出されます。