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があり、ユーザーが有効なものを入力すると、cssクラス "field-error"がhtml入力に追加されます。

1. ユーザーが無効なものを入力したときに「フィールドエラー」が追加されるはずですか？
2. 本当にバリデーションを行い、ユーザーが何かを入力している間にajaxを更新しますか？フォーム/テキストフィールドが実際にサブミットされたとき、またはユーザーがフィールドに入力したときに入力を検証してみませんか？

編集

の代わりにあなたが入力するCSSクラスを追加するためにjQueryのコマンドを送信するためにAjaxRequestTargetを使用することができ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経由で、これはAjaxResponseで実行されるjQuery Javascriptを送信します。リンクしたページでJavascriptコールを行うだけで、cssクラスの追加はクライアント側で行われます。

あなたが必要とするのは、jqueryが見つけられるように入力のIDだけです。 setOutputMarkupIdをtrueに設定する必要があります。そして、getMarkupId（）を呼び出して作成したウィジェットを取得し、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');"); 
    } 
}