Сбой вызова функции JavaScript при выполнении из Wicket Java - PullRequest
Новая
       5

Сбой вызова функции JavaScript при выполнении из Wicket Java

2 голосов
/ 20 января 2011

У меня проблема с вызовом JavaScript из кода Wicket Java.У меня есть форма с двумя текстовыми полями, одна кнопка и одно скрытое поле.Я хочу объединить тексты текстовых полей и установить этот объединенный текст в скрытое поле при нажатии этой кнопки, используя 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, но это приводило к ошибке.

Ответы [ 3 ]

6 голосов
/ 20 января 2011

TextField.setOutputMarkupId() заставит компонент печатать атрибут id, но атрибут id по умолчанию не совпадает с идентификатором компонента (первый параметр String, который вы всегда передаете в конструкторе), но генерируетсяone.

Попробуйте это: 

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

И, если вы не используете значения TextFields на стороне сервера (только значение hiddenField), вы также не сможете добавить ихв качестве компонентов Wicket, и оставьте их как статический HTML (с фиксированными идентификаторами).

[Отредактировано для улучшения ясности на примере]

Другой вариант заключается всгенерировать скрипт (или вызов функции), используя сгенерированные идентификаторы:

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>
0 голосов
/ 21 января 2011

Я решил проблему таким образом, поскольку ни одна из описанных выше процедур не работает в моем случае, возможно, это связано со структурой моей страницы: 

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

И это сработало.Спасибо за помощь.

0 голосов
/ 20 января 2011 
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

...