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

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，当用户输入有效的东西时，你可以在html输入中添加css类“field-error”。

1. 不应该是相反的方式，当用户输入无效的东西时应该添加“字段错误”吗？
2. 你真的想在用户输入内容时验证并执行ajax更新吗？为什么不在表单/文本字段实际提交时，或用户完成字段输入时验证输入？

编辑

而是与AjaxRequestTarget更新输入的，你可以使用AjaxRequestTarget发送的jQuery命令的CSS类添加到输入：

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（）来获取该小窗口创建的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');"); 
    } 
}