有 Java 编程相关的问题?

你可以在下面搜索框中键入要查询的问题!

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

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

这是我的密码:

爪哇:

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,但这给了我一个错误


共 (3) 个答案

  1. # 2 楼答案

    我以这种方式解决了这个问题,因为在我的情况下,上述过程都不起作用,这可能是因为我的页面结构:

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

    它成功了。谢谢你帮我

  2. # 3 楼答案

    TextField.setOutputMarkupId()将使组件打印id属性,但默认情况下,id属性与组件id(总是在构造函数中传递的第一个字符串参数)不同,而是生成的id属性

    试试这个:

    textField1.setMarkupId("field1");
    textField2.setMarkupId("field2");
    hiddenField.setMarkupId("hiddenField");
    

    而且,如果不在服务器端使用TextFields的值(仅使用hiddenField值),也无法将其添加为Wicket组件,而将其保留为静态HTML(具有固定ID)

    [通过示例进行编辑以提高清晰度]

    另一个选项是使用生成的ID生成脚本(或函数调用):

    主页。爪哇

    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中完成):

    主页。爪哇

    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>