Verarbeitung eines einzelnen Eingabefeldes mit Ajax in Apache Wicket

Question

Ich habe ein Formular mit mehreren Eingabefeldern und ein spezielles Feld, das ich mit Ajax verarbeiten möchte. Die Sache ist, dass ich nur dieses Feld verarbeiten will, nachdem der AjaxLink geklickt wurde. Ohne Verarbeitung der gesamten Form. Ich möchte auf den Wert dieses Eingabefeldes in der Methode onSubmit des AjaxLink zugreifen. Ist das möglich? Wenn ja, wie?

Grüße, Mateusz

Answer 1

Standardmäßig sendet AjaxLink nicht Daten/Formulare senden. AjaxSubmitLink und AjaxButton tun!

Für Ihren Anwendungsfall können Sie AjaxRequestAttributes verwenden und "dynamische zusätzliche Parameter" senden. Ich bin auf meinem Handy und kann Ihnen im Moment kein Beispiel geben, aber die Idee besteht darin, ein einfaches JSON-Objekt zu konstruieren, dessen Schlüssel der Name des Anfrageparameters ist und den Wert des Forn-Elements bewertet. Google diese Schlüsselwörter! Wenn Sie es nicht schaffen, dann fügen Sie einen Kommentar hinzu und ich werde meine Antwort so schnell wie möglich aktualisieren!

Hier ist ein Beispielcode. Passen Sie auf, dass ich es hier vollständig geschrieben habe, also könnte es einen Tippfehler oder zwei haben!

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

Eine Möglichkeit, dies zu lösen wäre, dass Feld ‚besondere‘ zu setzen mit ‚besonderem‘ Link zu einem zweiten Form und CSS dann visuell verwenden, um das ‚besondere‘ Feld wie es zu positionieren ist innerhalb der Haupt Form.

Etwas wie folgt aus:

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

Und im Markup, wie üblich:

<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> 

Und dann Stil, dass .special-field Klasse mit position: absolute; top: ... oder so ähnlich.

Die Lösung ist nicht sehr elegant, es ist eher ein Hack. Es wird etwas Verwirrung für eine Person schaffen, die das später lesen müsste. Aber es kann funktionieren, wenn der Trick mit CSS möglich ist.

Answer 3

Es ist eigentlich sogar einfacher als was rpuch vorgeschlagen.

Gerade Nest Ihre Formulare und stellen Sie sicher, dass die AjaxLink nur die zweite Form übermittelt:

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

Die zweite Form wird als div gemacht werden, aber die Funktionalität, die Sie wünschen. Das zweite Formular wird jedoch auch eingereicht, wenn Sie das äußere Formular einreichen.