如何修改屬性而不在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');"); 
    } 
}