从Wicket Java进行JavaScript函数调用时失败_Java_Javascript_Wicket

从Wicket Java进行JavaScript函数调用时失败

java javascript wicket

从Wicket Java进行JavaScript函数调用时失败,java,javascript,wicket,Java,Javascript,Wicket,我在Wicket Java代码中调用JavaScript时遇到了问题。我有一个表单，有两个文本字段，一个按钮和一个隐藏字段。我想连接文本字段的文本，并在单击按钮时使用JavaScript将连接的文本设置为隐藏字段这是我的密码：爪哇： JavaScript: <script type="javascript"> function concat() { var val1=document.getElementById("field1").value;

我在Wicket Java代码中调用JavaScript时遇到了问题。我有一个表单，有两个文本字段，一个按钮和一个隐藏字段。我想连接文本字段的文本，并在单击按钮时使用JavaScript将连接的文本设置为隐藏字段

这是我的密码：

爪哇：

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>


函数concat（）{
var val1=document.getElementById（“field1”）.value；
var val2=document.getElementById（“field2”）.value；
document.getElementById（“hiddenField”）.value=val1+val2；
}

但它不起作用。任何信息都会对我很有帮助。谢谢。
注意：我也尝试了

AjaxSubmitButton

，但这给了我一个错误

new SimpleAttributeModifier("onclick", "concat();")

或

最好像下面这样做

TextField.setOutputMarkupId（）

将使组件打印

id

属性，但默认情况下，id属性与组件id（总是在构造函数中传递的第一个字符串参数）不同，而是生成的

试试这个：

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

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

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


函数concatValues（field1Id、field2Id、hiddenId）{
document.getElementById（hiddenId）.value=document.getElementById（field1Id）.value+document.getElementById（field2Id）.value；
}

现在，使用Ajax实现这一点的示例（concat操作在服务器上完成，而不是在javascript中完成）：

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

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

公共类主页扩展网页{
字符串字段1；
字符串字段2；
隐藏的字符串；
公共网页（）{
表格表格=新表格（“表格”，新的CompoundPropertyModel（本））；
添加（新文本字段（“字段1”））；
添加（新文本字段（“字段2”））；
添加（新隐藏字段（“隐藏”）；
表格.添加（新AjaxButton（“concat”）{
@凌驾
提交时受保护的void（AjaxRequestTarget目标，表单）{
隐藏=字段1+字段2；
target.addComponent（表单）；
}
});
添加（新的AjaxButton（“显示”）{
@凌驾
提交时受保护的void（AjaxRequestTarget目标，表单）{
appendJavascript（“警报（“+JavascriptUtils.escapeQuotes（隐藏）+”）；
}
});
添加（表格）；
}
}

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>

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

我已经通过这种方式解决了问题，因为在我的情况下，上述过程都不起作用，这可能是由于我的页面结构：

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

它成功了。谢谢你的帮助。

1）请正确格式化你的代码2）不要看到Wicket生成的源HTML。这是不可能回答的。你能给我们看看生成的HTML吗？你为什么需要这个？你想解决的实际问题是什么？Wicket可能有一种更有效的方法来实现你想要的东西。这是我的HTML代码：在我的第一篇文章中，我试图展示这段代码，但是html没有显示。你的javascript函数不起作用，因为你的表单元素都没有id-你要传递给Wicket构造函数的是Wicket:id。请参阅tetsuo关于如何更改此行为的回答。你可以用另一种方式来做，并发布此内容，就像faith在下面提到的那样，但是您必须使用标记ID从java执行此操作。（即SimpleAttributeModifier（“onclick”，在此处插入javascript，用textField1.getMarkupId（）、textField2.getMarkupId（）、hiddenField.getMarkupId（））替换field1、field2和hiddenField。）它们很可能类似于Field11或包含field1的内容，但很少只会是field1“将生成的ID连接到脚本中”。不够清楚，这看起来很感谢。通过执行第一个过程，我得到了以下错误：此组件未（尚未）耦合到页面。在调用此方法（组件#getMarkupId）之前，它必须能够找到它应该在其中操作的页面奇怪的是，它确实对我有效。好吧，你可以尝试改变指令的顺序，在生成脚本和添加按钮之前添加表单和字段……是的，如果我像上面那样创建一个页面，它是有效的，但在我的情况下它是不同的。我必须添加带有面板片段的表单。我在下面给出了答案。