Question

我必须在组件中添加一个类。我无法通过ajax添加组件，因为这是输入问题。我的代码是：

private ListView<Opzioni> setListOpzioni(boolean b) {

    return new ListView<Opzioni>("list_opzioni", opzioniDao.findAll()) {

        @Override
        protected void populateItem(ListItem<Opzioni> item) {
            erroriAssociatiAlTextField = new HashMap<>();
            List<Opzioni> opzioniCron = opzioniDao.getOpzioniFormatore();

            final Opzioni o = item.getModelObject();

            final WebMarkupContainer errorContainer = new WebMarkupContainer("errorContainer");
            errorContainer.setOutputMarkupId(true);
            errorContainer.setOutputMarkupPlaceholderTag(true);

            Boolean isSelected = false;
            Boolean isAzienda = o.getAzienda() != null ? o.getAzienda().equals(getAziendaLogged()) : false;
            if (isAdminFormatore(getUserLogged())) {
                isSelected = o.getControlFormatore() || isAzienda;
            } else {
                isSelected = isAzienda;
            }

            Boolean visibile = isSa || isSelected;

            Label name_op = new Label("name_op", o.getName());
            item.add(name_op.setVisible(visibile));

            TextField val_op = new TextField("val_op", new PropertyModel(o, "val"));
            val_op.add(new OnChangeAjaxBehavior() {
                @Override
                protected void onUpdate(AjaxRequestTarget art) {
                    if (opzioniCron.contains(o)) {
                        controllaStringa(o);
                    }
                    if (valoriScorretti == true) {
                        contatore++;
                    } else {
                         contatore = 0;
                    }
                    if (contatore > 0) {
                         ciSonoErrori = true;
                         String error = "Valori inseriti nel box " + o.getName() + " non corretti";

                    if (!erroriAssociatiAlTextField.containsKey(o)) {
                         erroriAssociatiAlTextField.put(o, error);
                    }

                    for (Map.Entry<Opzioni, String> map : erroriAssociatiAlTextField.entrySet()) {
                        val_op.error(map.getValue());
                    }
                    art.add(errorContainer.setVisible(true));
                    refreshFp(art);
                    art.add(save_btn.setVisible(false));
                    } else {
                        ciSonoErrori = false;

                        if (!erroriAssociatiAlTextField.isEmpty()) {

                            art.add(save_btn.setVisible(false));

                            if (erroriAssociatiAlTextField.containsKey(o)) {
                                    erroriAssociatiAlTextField.remove(o);

                            }

                            for (Map.Entry<Opzioni, String> map : erroriAssociatiAlTextField.entrySet()) {
                                 val_op.error(map.getValue());
                            }
                        }
                        if (erroriAssociatiAlTextField.isEmpty()) {
                            art.add(save_btn.setVisible(true));
                        }
                        art.add(errorContainer.setVisible(false));

                        refreshFp(art);

                        }
                    }
                });
                item.add(val_op.setEnabled(b).setVisible(visibile));


                item.add(errorContainer.setVisible(false));

                if (visibile) {
                    o.setModificato(true);
                } else {
                    o.setModificato(false);
                }
            }
        };
    }

每次用户在字段内插入一个字母时，使用此代码，光标将转到第一个位置，并且无法使用它。是否有另一种动态添加类的模式？

Answer 1

每次用户在字段内插入一个字母时都会使用此代码光标移到第一个位置，无法使用它。

这是因为你正在使用的OnChangeAjaxBehavior。如果FormComponent验证正确，则此行为会在每次用户输入后检查，如果是，则会调用onUpdate方法。

对于没有添加IValidator的TextField，意味着在每次输入后都会调用onUpdate。如果您通过AjaxRequestTarget重新打印TextField，您将获得输入字段的行为，您可以按照当前的方式键入“向后”。

如何修改属性而不在Wicket中添加组件？

如果您希望在浏览器中看到更改，则需要在某个时刻使用ajax更新组件。没有办法解决它。

你可能不得不重新考虑你的行为，因为你目前所做的事情没有多大意义。

目前您有一个TextField，当用户输入有效的内容时，您将css类“field-error”添加到html输入中。

当用户输入无效的内容时，是否应该反过来添加“字段错误”？
您真的想在用户输入内容时验证并执行ajax更新吗？为什么不在表单/文本字段实际提交时，或者用户输入字段时验证输入？

修改

您可以使用AjaxRequestTarget发送jQuery命令将css类添加到输入中，而不是使用AjaxRequestTarget更新输入：

val_op.setOutputMarkupId(true); val_op.add(new OnChangeAjaxBehavior() { @Override protected void onUpdate(AjaxRequestTarget art) { art.appendJavaScript("$('#"+val_op.getMarkupId()+"').addClass('field-error');"); } }

不是通过ajax更新整个输入，而是只发送一个jQuery Javascript以在AjaxResponse中执行。然后，您可以在链接的页面中执行Javascript调用，并且将在客户端添加css类。

您唯一需要的是输入的id，以便jquery可以找到它。因此，setOutputMarkupId必须设置为true，然后您可以通过调用getMarkupId（）获取wicket创建的id并将其插入到javascript命令中。

正如我已经说过的，在onUpdate方法中添加错误类似乎很奇怪。在我看来，正确的方法是在onError方法中添加错误类（在输入无效时调用）并在onUpdate中删除它（当输入有效时）。

val_op.setOutputMarkupId(true); val_op.add(new OnChangeAjaxBehavior() { @Override protected void onUpdate(AjaxRequestTarget art) { art.appendJavaScript("$('#"+val_op.getMarkupId()+"').removeClass('field-error');"); } @Override protected void onError(AjaxRequestTarget art, RuntimeException e) { art.appendJavaScript("$('#"+val_op.getMarkupId()+"').addClass('field-error');"); } }

如何在不添加Wicket中的组件的情况下修改属性？

1 个答案: