Как обновить калитки AjaxEditableMultiLineLabel модель по вызову ajax

Question

Я пробовал несколько вещей без успеха. На данный момент мой код выглядит следующим образом:

homepage.html:

  <div wicket:id="text3" contenteditable="true"> 
      </div> 

HomePage.java:

public HomePage(final PageParameters parameters) { 
//... 

    AjaxEditableMultiLineLabel textArea = 
      new AjaxEditableMultiLineLabel ("text3", new PropertyModel (this, "text3")); 


    textArea.add(new AjaxEventBehavior ("keyup") { 

     @Override 
     protected void onEvent(AjaxRequestTarget target) { 
      System.out.println("on event!"); 
      System.out.println(getText3()); 
     } 
    }); 
//... 
} 

/** 
* @return gets text3 
*/ 
public String getText3() { 
    return text3; 
} 

/** 
* @param text3 
*   the text3 to set 
*/ 
public void setText3(String text3) { 
    this.text3 = text3; 
} 

Я хочу, чтобы получить содержимое внутри "DIV", но это не является обновляется по вызову ajax. Могу ли я заставить его отправить его каким-то образом?

Кстати, я пытаюсь добиться простого текстового содержимого области с богатым текстом каждый раз, когда это обновляется, если есть более простой способ сделать это в калитке.

Answer 1

Вы добавляете AjaxEventBehavior к AjaxEditableMultiLineLabel, который НЕ ИСПРАВЛЯЕТ. AjaxEditableMultiLineLabel является панель, которая состоит из двух компонентов:

• этикетки
• Editor (текстовое поле)

Любое поведение Ajax должен быть добавить к любой из этих компонентов. В вашем случае вам нужно добавить поведение в редактор.

(после полного рабочего примера на https://repo.twinstone.org/projects/WISTF/repos/wicket-examples-6.x/browse)

Разметка

<h2>Form</h2> 
    <form wicket:id="form"> 
     <div wicket:id="text"></div> 
     <input wicket:id="submit" type="submit" value="Send" /> 
    </form> 

    <hr/> 

    <h2>Result</h2> 
    <div wicket:id="result">[result placeholder]</div> 

фрагмент кода

final IModel<String> textModel = Model.of("initial text"); 

    Form<String> form = new Form<>("form", textModel); 
    add(form); 

    AjaxEditableMultiLineLabel<String> textArea = new AjaxEditableMultiLineLabel<String>(
      "text", textModel) { 

     private static final long serialVersionUID = 1L; 

     @Override 
     protected FormComponent<String> newEditor(MarkupContainer parent, 
       String componentId, IModel<String> model) { 
      final FormComponent<String> editor = super.newEditor(parent, 
        componentId, model); 

      editor.add(new AjaxFormComponentUpdatingBehavior("keyup") { 

       private static final long serialVersionUID = 1L; 

       @Override 
       protected void onUpdate(AjaxRequestTarget target) { 
        System.out.println("Ajax update for textArea " + editor.getDefaultModelObjectAsString()); 

       } 
      }); 

      return editor; 
     } 

    }; 

    textArea.setCols(50); 
    textArea.setRows(20); 

    form.add(textArea); 
    form.add(new SubmitLink("submit")); 

    add(new Label("result", textModel)); 

ВНИМАНИЕ: ПРЕДЫДУЩИЙ КОД ДЕЙСТВИТЕЛЬНО ОЧЕНЬ МЕДЛЕННО

Код очень медленно, becuase каждое нажатие/отпускание делает следующее:

1. вызова сервера с содержимым текстового поля
2. Invoke код на стороне сервера (обновление, визуализацию и т.д.)
3. Отправить назад весь результат тег как HTML в ответ XML (AJAX)
4. Заменить весь результат тег

Это медленно на локальном хосте, в реальном Интернете, безусловно, не годны к употреблению.

РЕШЕНИЕ

Использование простого обновления JQuery (JavaScript, JQuery построен в калитке 6)

фрагмент кода с JQuery обновления

final IModel<String> textModel = Model.of("initial text"); 
    final Label result = new Label("result", textModel); 
    result.setOutputMarkupId(true); 
    add(result); 

    Form<String> form = new Form<>("form", textModel); 
    add(form); 

    AjaxEditableMultiLineLabel<String> textArea = new AjaxEditableMultiLineLabel<String>(
      "text", textModel) { 

     private static final long serialVersionUID = 1L; 

     private boolean initialized = false; 

     private FormComponent<String> editor; 

     @Override 
     public void onEdit(AjaxRequestTarget target) { 
      super.onEdit(target); 
      if(!initialized) { 
       String editorId = editor.getMarkupId(); 
       String resultId = result.getMarkupId(); 
       StringWriter sw = new StringWriter(); 
       sw.write("$('#"); 
       sw.write(editorId); 
       sw.write("').keyup(function() { var str = $('#"); 
       sw.write(editorId); 
       sw.write("').val(); "); 
       sw.write("$('#"); 
       sw.write(resultId); 
       sw.write("').html(str); });"); 
       String js = sw.toString(); 
       System.out.println("Appending editor JS " + js); 
       target.appendJavaScript(js); 
       initialized = true; 
      } 
     } 

     @Override 
     protected FormComponent<String> newEditor(MarkupContainer parent, 
       String componentId, IModel<String> model) { 
      editor = super.newEditor(parent, componentId, model); 
      return editor; 
     } 

    }; 

    textArea.setCols(50); 
    textArea.setRows(20); 

    form.add(textArea); 
    form.add(new SubmitLink("submit")); 

Answer 2

Вы должны добавить компоненты, которые обновляются в AjaxRequestTarget, как это:

target.add(myComponent); 

Вы можете сделать это в вашем методе OnEvent, например, как это:

@Override 
    protected void onEvent(AjaxRequestTarget target) { 
     System.out.println("on event!"); 
     System.out.println(getText3()); 
     target.add(textArea); 
    } 

На ваш вопрос о модели области с богатым текстом, вы можете использовать обычную модель, и ваш код будет выглядеть так:

public HomePage(final PageParameters parameters) { 
    private Model<String> textModel; 

    Model<String> textModel = Model.of(""); 
    AjaxEditableMultiLineLabel textArea = new AjaxEditableMultiLineLabel ("text3", textModel); 


    textArea.add(new AjaxEventBehavior ("keyup") { 

     @Override 
     protected void onEvent(AjaxRequestTarget target) { 
      System.out.println(textModel.getObject()); 
     } 
    }); 
//... 
} 

Не значительная разница, я думаю, но вы используете только одну модель, а не свойство String и модель.