JavaScript function call failing when made from Wicket Java
I am facing a trouble with a call to JavaScript from Wicket Java code. I have a form with two text fields, one button and one hidden field. I want to concatenate the texts of the text fields and set that concatenated text to the hidden field when that button is clicked, using JavaScript.
Here is my code:
Java:
Form form = new Form("field");
form.setOutputMarkupId(true);
TextField textField1 = new TextField("field1");
textField1.setOutputMarkupId(true);
form.add(textField1);
TextField textField2 = new TextField("field2");
textField2.setOutputMarkupId开发者_高级运维(true);
form.add(textField2);
HiddenField hiddenField = new HiddenField("hiddenField");
hiddenField.setOutputMarkupId(true);
form.add(hiddenField);
Button concatButton = new Button("concat");
concatButton.add(new SimpleAttributeModifier("onclick", "concat"));
form.add(concatButton);
JavaScript:
<script type="javascript">
function concat() {
var val1=document.getElementById("field1").value;
var val2=document.getElementById("field2").value;
document.getElementById("hiddenField").value=val1+val2;
}
</script>
But it is not working. Any information will be very helpful to me. Thank you.
Note: I have also triedAjaxSubmitButton, but that was giving me an error.TextField.setOutputMarkupId() will make the component to print the id attribute, but the id attribute is not, by default, the same as the component id (the first String parameter you always pass in the constructor), but a generated one.
Try this:
textField1.setMarkupId("field1");
textField2.setMarkupId("field2");
hiddenField.setMarkupId("hiddenField");
And, if you don't use the TextFields' values on the server-side (only the hiddenField value), you could also not add them as Wicket components at all, and leave them just as static HTML (with fixed ids).
[Edited to improve clarity through an example]
Another option is to generate the script (or the call to a function), using the generated IDs:
HomePage.java
public class HomePage extends WebPage {
public HomePage() {
Component field1 = new TextField("field1").setOutputMarkupId(true);
Component field2 = new TextField("field2").setOutputMarkupId(true);
Component hidden = new HiddenField("hidden").setOutputMarkupId(true);
String script = String.format("concatValues('%s','%s','%s');",
field1.getMarkupId(), field2.getMarkupId(), hidden.getMarkupId());
Component concat = new Button("concat").add(new SimpleAttributeModifier("onclick", script));
Component show = new Button("show").add(new SimpleAttributeModifier("onclick",
String.format("alert(document.getElementById('%s').value);", hidden.getMarkupId())));
add(new Form("form").add(field1, field2, hidden, concat, show));
}
}
HomePage.html
<html xmlns:wicket="http://wicket.apache.org">
<head>
<script type="text/javascript">
function concatValues(field1Id, field2Id, hiddenId) {
document.getElementById(hiddenId).value = document.getElementById(field1Id).value + document.getElementById(field2Id).value;
}
</script>
</head>
<body>
<form wicket:id="form">
<input wicket:id="field1">
<input wicket:id="field2">
<input wicket:id="hidden" type="hidden">
<input wicket:id="concat" type="button" value="Concat">
<input wicket:id="show" type="button" value="Show hidden value">
</form>
</body>
</html>
Now, an example to do this with Ajax (the concat operation is done on the server, not in javascript):
HomePage.java
public class HomePage extends WebPage {
String field1;
String field2;
String hidden;
public HomePage() {
Form form = new Form("form", new CompoundPropertyModel(this));
form.add(new TextField("field1"));
form.add(new TextField("field2"));
form.add(new HiddenField("hidden"));
form.add(new AjaxButton("concat") {
@Override
protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
hidden = field1 + field2;
target.addComponent(form);
}
});
form.add(new AjaxButton("show") {
@Override
protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
target.appendJavascript("alert('" + JavascriptUtils.escapeQuotes(hidden) + "')");
}
});
add(form);
}
}
HomePage.html
<html xmlns:wicket="http://wicket.apache.org">
<body>
<form wicket:id="form">
<input wicket:id="field1">
<input wicket:id="field2">
<input wicket:id="hidden" type="hidden">
<input wicket:id="concat" type="button" value="Concat">
<input wicket:id="show" type="button" value="Show hidden value">
</form>
</body>
</html>
new SimpleAttributeModifier("onclick", "concat();")
or
link.add(new AttributeAppender("onclick", new Model("concat();"), ";"));
better to do like below
https://cwiki.apache.org/WICKET/calling-javascript-function-on-wicket-components-onclick.html
I have solved the problem this way as none of the above procedure is working in my case, this is perhaps due to the structure of my page:
TextField textField1 = new TextField("field1");
textField1.setOutputMarkupId(true);
textField1.setMarkupId("field1");
TextField textField2 = new TextField("field2");
textField2.setOutputMarkupId(true);
textField2.setMarkupId("field2");
HiddenField hiddenField = new HiddenField("hidden");
hiddenField.setOutputMarkupId(true);
hiddenField.setMarkupId("hiddenField");
String function = "document.getElementById('"+ hiddenField.getMarkupId() +"').value = document.getElementById('"+ textField1.getMarkupId() +"').value + ' ' + document.getElementById('"+ textField2.getMarkupId() +"').value;";
Button concatButton = new Button("concat");
concatButton.add(new AttributeAppender("onclick", new Model(function), ";"));
And it worked. Thanks for helping me.
加载中,请稍侯......
精彩评论