从 Wicket Java 制作 JavaScript 函数调用失败答案

【问题标题】：JavaScript function call failing when made from Wicket Java从 Wicket Java 制作 JavaScript 函数调用失败
【发布时间】：2011-01-20 14:22:24
【问题描述】：

我遇到了从 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，但这给了我一个错误。

【问题讨论】：

1) 请正确格式化您的代码 2) 如果没有看到 Wicket 生成的源 HTML，这是无法回答的。
你能告诉我们生成的html吗？
为什么需要这个？您要解决的实际问题是什么？ Wicket 可能有一种更有效的方式来实现你想要的。
这是我的 HTML 代码：

在我的第一篇文章中，我尝试显示此代码，但 html 未显示.
好吧，您的 javascript 函数不起作用，因为您的表单元素都没有 id - 您传递给 Wicket 构造函数的是 wicket:id。请参阅 tetsuo 关于如何改变这种行为的回答。

标签： java javascript wicket

【解决方案1】：

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

主页.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);
    }
}

主页.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>

【讨论】：

你可以用另一种方式来做，并像下面提到的那样发布它，但你必须使用标记 ID 从 java.util 中执行此操作。（即 SimpleAttributeModifier("onclick",insert javascript here replace field1, field2, and hiddenField with textField1.getMarkupId(), textField2.getMarkupId(), hiddenField.getMarkUpId()。）它们很可能是 field1_1 之类的东西包括 field1，但很少只有 field1。
好吧，我试着用“将生成的 ID 连接到脚本中”来说明这一点。不够清楚，好像
谢谢。按照第一个过程，我收到此错误：此组件（尚未）耦合到页面。它必须能够找到它应该操作的页面，然后才能调用此方法（Component#getMarkupId）
奇怪，它确实对我有用。好吧，您可以尝试更改指令的顺序，在生成脚本和添加按钮之前添加表单和字段...
是的，如果我像上面那样制作一个页面，它就可以工作，但在我的情况下它是不同的。我必须使用面板的片段添加该表单。我在下面给出的答案。

【解决方案2】：

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

或

link.add(new AttributeAppender("onclick", new Model("concat();"), ";"));

最好像下面那样做

https://cwiki.apache.org/WICKET/calling-javascript-function-on-wicket-components-onclick.html

【讨论】：

【解决方案3】：

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

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

它奏效了。谢谢你帮助我。

【讨论】：