Wie kann ich Attribute ändern, ohne die Komponente in Wicket hinzuzufügen?

Question

Ich muss eine Klasse zu einer Komponente hinzufügen. Ich kann die Komponente nicht über Ajax hinzufügen, da dies ein Problem mit der Eingabe ist. Mein Code ist:

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); 
       } 
      } 
     }; 
    } 

Mit diesem Code jedes Mal, wenn ein Benutzer einfügen einen Brief in das Feld der Cursor auf die erste Position gehen und es ist unmöglich, es zu benutzen. Gibt es einen alternativen Modus, um die Klasse dynamisch hinzuzufügen?

Answer 1

Mit diesem Code ein Benutzer jedes Mal einen Brief in das Feld einfügen den Cursor in die erste Position gehen und es ist unmöglich, es zu benutzen.

Das ist wegen der OnChangeAjaxBehavior Sie verwenden. Dieses Verhalten überprüft nach jeder Benutzereingabe, ob die FormComponent korrekt ist, und wenn dies der Fall ist, wird die OnUpdate-Methode aufgerufen.

Für ein TextField ohne einen hinzugefügten IValidator bedeutet das, dass onUpdate nach jeder Eingabe aufgerufen wird. Wenn Sie dann das TextField über AjaxRequestTarget erneut drucken, erhalten Sie das Verhalten eines Eingabefeldes, in das Sie wie bisher "rückwärts" schreiben.

Wie kann ich Attribute ändern, ohne die Komponente in Wicket hinzufügen?

Wenn Sie möchten, dass Änderungen im Browser angezeigt werden, müssen Sie die Komponente mit AJAX aktualisieren. Es gibt keinen Weg darum herum.

Sie müssen wahrscheinlich überdenken, weil das, was Sie gerade tun, nicht viel Sinn macht.

Im Moment haben Sie ein TextField und wenn der Benutzer etwas eingibt, das gültig ist, fügen Sie der HTML-Eingabe die CSS-Klasse "field-error" hinzu.

1. Sollte es nicht umgekehrt sein und der "field-error" sollte hinzugefügt werden, wenn der Benutzer etwas eingibt, das ungültig ist?
2. Möchten Sie wirklich validieren und ein Ajax-Update durchführen, während der Benutzer etwas eingibt? Warum validieren Sie die Eingabe nicht, wenn das Formular/Textfeld tatsächlich übergeben wird oder wenn der Benutzer die Eingabe in das Feld abgeschlossen hat?

bearbeiten

Statt den Eingang mit dem AjaxRequestTarget der Aktualisierung können Sie den AjaxRequestTarget verwenden, um die jQuery-Befehl zu senden, um die CSS-Klasse an den Eingang hinzuzufügen:

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

Statt Aktualisierung die gesamte Eingabe über Ajax, dies wird nur eine jQuery Javascript in der AjaxResponse ausgeführt werden. Sie können dann den Javascript-Aufruf auf der von Ihnen verlinkten Seite ausführen, und das Hinzufügen der CSS-Klasse wird auf der Client-Seite durchgeführt.

Das einzige, was Sie brauchen, ist die ID Ihrer Eingabe, damit jQuery sie finden kann. Daher muss setOutputMarkupId auf "true" gesetzt werden, und Sie können dann die ID, die das Wicket erstellt hat, abrufen, indem Sie getMarkupId() aufrufen und sie in den Befehl javascript einfügen.

Wie ich bereits sagte, scheint es mir seltsam, dass Sie die Fehlerklasse in der OnUpdate-Methode hinzufügen. Der korrekte Weg scheint mir, die Fehlerklasse in der onError-Methode hinzuzufügen (aufgerufen, wenn die Eingabe ungültig ist) und im onUpdate zu entfernen (wenn die Eingabe gültig ist).

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');"); 
    } 
}