Tap*_*ose 2 javascript java wicket
我在使用Wicket Java代码调用JavaScript时遇到了麻烦.我有一个带有两个文本字段的表单,一个按钮和一个隐藏字段.我想连接文本字段的文本,并在使用JavaScript单击该按钮时将该连接文本设置为隐藏字段.
这是我的代码:
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>
但它没有用.任何信息对我都非常有帮助.谢谢.
注意:我也尝试过AjaxSubmitButton,但这给了我一个错误.
TextField.setOutputMarkupId()将使组件打印id属性,但默认情况下,id属性与组件ID(您在构造函数中始终传递的第一个String参数)不同,而是生成的属性.
试试这个:
textField1.setMarkupId("field1");
textField2.setMarkupId("field2");
hiddenField.setMarkupId("hiddenField");
而且,如果您不在服务器端使用TextFields的值(只有hiddenField值),您根本不能将它们添加为Wicket组件,并将它们保留为静态HTML(具有固定ID).
[编辑通过一个例子提高清晰度]
另一种选择是使用生成的ID生成脚本(或对函数的调用):
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>
现在,使用Ajax执行此操作的示例(concat操作在服务器上完成,而不是在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>
| 归档时间： |
|
| 查看次数： |
6083 次 |
| 最近记录： |