Java: How to set a value from javascript to a wicket component textfield

Question

I am using javascript to get a value from client-side using a button that is not binded to a wicket component (i.e., it doesn't have a wicket-id). Now, I need to set that value to a textfield (textarea) - that is a wicket-component, but unable to do that. If I set value in a simple textarea (not a wicket component) then it works fine. But I need that value in the wicket component so that I can get its value when the form submits.

Javascript isn't working on the wicket component.

Javascript method:

var text2 = document.getElementById("e2");
var text1 = document.getElementById("e1");
text1.value = "hello";
text2.value = "hello";

html:

<wicket:panel>
<form wicket:id="form" id="form" onsubmit="submit(event,this);">
<div wicket:id="myPanel">

   <input type="button" value="Verify" name="B3" onclick=GetTemplate() />

   <p><textarea name="S2" id="e2"></textarea></p>

   <p><textarea wicket:id="e1" name="S1" id="e1" ></textarea></p>

   <input type="submit" class="submitForm" wicket:id="submit" wicket:message="value:Submit" name="submit" />

</div>
</form>
</wicket:panel>

Java:

public class MyPanel  extends Panel {
 public MyPanel(...){
   ...
   Form<?> form = new Form("form", new Model());
   container = new WebMarkupContainer("myPanel");

   textArea = new TextArea<String>("e1", new Model());
   textArea.setEnabled(true).setOutputMarkupId(true).
   textArea.setOutputMarkupPlaceholderTag(true);
   textArea.setEscapeModelStrings(false);
   textArea.add(new ErrorIndicator());

   submitButton = (Button) new Button("submit") {
            private static final long serialVersionUID = 1L;

            @Override
            public void onSubmit() {
                message = textArea.getModelObject();
            }
        }.setEnabled(true);
   container.add(textArea);
   container.add(submitButton);
   form.add(container);
   add(form);
 }

Here, I can set value in the textarea id=e2 but not on id=e1.

I don't get any error. The value doesn't set on the textarea. — F.K.

Rob Audenaerde Rob Audenaerde · Accepted Answer · 2018-02-13T10:29:58

The problem come from this line:

 textArea.setEnabled(true).setOutputMarkupId(true)

This will generate a custom id for the TEXTAREA (for Wicket Ajax). So, the id is changed and your javascript won't work anymore, because that uses the 'e1' id that is replaced.

You can add a custom data-attribute and get the component by that attribute.

For example:

 <p><textarea wicket:id="e1" name="S1" data-id="e1" ></textarea></p>

And then (for example, using jquery, something like this)

  $("TEXTAREA[data-id='e1']").val("hello");

Or, if you don't need ajax, skip calling the setOutputMarkupId

Java: How to set a value from javascript to a wicket component textfield

1 Answers