Wicket：使用可重用组件和AjaxButton提交表单_Ajax_Wicket

Wicket：使用可重用组件和AjaxButton提交表单

ajax wicket

Wicket：使用可重用组件和AjaxButton提交表单,ajax,wicket,Ajax,Wicket,我用的是wicket版本6 我有一张表格。作为表单的内容，我有一个FormComponentPanel，其中包含两个DateTimeField（org.apache.wicket.extensions.yui.calendar）在包含表单的类中，我有一个AjaxButton和一个AjaxLink，它们都执行相同的操作：读取模型、创建新对象并将其发送到某个服务器进行处理不管怎样单击链接时，将使用正确的值创建我的新对象，但使用日期选择器选择的新日期除外单击按钮时，我发现一些错误（[Ajax

我用的是wicket版本6

我有一张表格。作为表单的内容，我有一个FormComponentPanel，其中包含两个DateTimeField（org.apache.wicket.extensions.yui.calendar）

在包含表单的类中，我有一个AjaxButton和一个AjaxLink，它们都执行相同的操作：读取模型、创建新对象并将其发送到某个服务器进行处理

不管怎样

单击链接时，将使用正确的值创建我的新对象，但使用日期选择器选择的新日期除外
单击按钮时，我发现一些错误（[AjaxRequestHandler@1701777932responseObject[org.apache.wicket.ajax.AjaxRequestHandler$1@3e1]）但没有关于错误的进一步信息

正如所建议的，我解决了第一个问题（链接），尝试向其添加ajax更新行为，但所选日期在模型中没有更新

AjaxButton被创建并在提交时被覆盖，只需调用另一个方法和target.add（form）；setOutputMarkupId也被设置为true，但似乎仍然缺少一些内容

为了让它工作，我只需要解决其中一个问题，但如果有人能解决这两个问题，那就太好了。提前谢谢

编辑

public MyPanelIncludingForm() {
  // ...
  form.add(getRangePanel()); // creates a new TimeRangePanel and returns the instance
  form.add(getSubmitButton());
  // ...
}

private FormComponent<String> getSubmitButton() {
  FormComponent<String> submitBtn = new AjaxButton("submitBtn", form) {
  private static final long serialVersionUID = 3005L;

    @Override
    protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
      System.out.println("submit QT ajax button");
      setResponsePage(HomePage.class);
      sendQuery();
      target.add(form);
    }

    @Override
    protected void onError(AjaxRequestTarget target, Form<?> form) {
      System.err.println("error occurred. " + target);
      target.add(feedback);
    }
  };
  submitBtn.setOutputMarkupId(true);
  return submitBtn;
}

// separate FormComponentModel for timeRange

public class TimeRangePanel extends FormComponentPanel<MyRange> {

MyRange range;
PropertyModel<Date> dpFromPM = new PropertyModel<Date>(this, "range.start");
PropertyModel<Date> dpToPM = new PropertyModel<Date>(this, "range.stop");
public RangePanel(String id, IModel<MyRange> model) {
  super(id, model);

dpFrom = new DateTimeField("dpFrom", dpFromPM) {
  private static final long serialVersionUID = 3006L;

  @Override
  protected DateTextField newDateTextField(String id, PropertyModel<Date> model) {

    DateTextField dtf = super.newDateTextField(id, model);

    AjaxFormComponentUpdatingBehavior a = new AjaxFormComponentUpdatingBehavior("onChange") {
      private static final long serialVersionUID = 3006L;
      @Override
      protected void onUpdate(AjaxRequestTarget target) {
        System.out.println("here u " + dpFrom.getModelObject().toString());
      }
    };
    dtf.add(a);
    return dtf;
  }
};

// second DateTimeField as dpFrom

} // end of constructor

@Override
protected void onBeforeRender() {
  range = getModelObject();
  super.onBeforeRender();
}

} // end of class

publicMyPanelIncludingForm（）{
// ...
add（getRangePanel（））；//创建一个新的TimeRangePanel并返回实例
add（getSubmitButton（））；
// ...
}
私有FormComponent getSubmitButton（）{
FormComponent submitBtn=新的AjaxButton（“submitBtn”，表单）{
私有静态最终长serialVersionUID=3005L；
@凌驾
提交时受保护的void（AjaxRequestTarget目标，表单）{
System.out.println（“提交Qtajax按钮”）；
setResponsePage（HomePage.class）；
sendQuery（）；
目标。添加（表格）；
}
@凌驾
受保护的void onError（AjaxRequestTarget目标，表单）{
System.err.println（“发生错误。”+目标）；
目标。添加（反馈）；
}
};
submitBtn.setOutputMarkupId（真）；
返回submitBtn；
}
//时间范围的单独FormComponentModel
公共类时间范围面板扩展FormComponentPanel{
我的范围；
PropertyModel dpFromPM=新的PropertyModel（这是“range.start”）；
PropertyModel dpToPM=新的PropertyModel（这个“range.stop”）；
公共范围面板（字符串id，IModel模型）{
超级（id，型号）；
dpFrom=新日期时间字段（“dpFrom”，dpFromPM）{
私有静态最终长serialVersionUID=3006L；
@凌驾
受保护的DateTextField newDateTextField（字符串id，PropertyModel模型）{
DateTextField dtf=super.newDateTextField（id，型号）；
AjaxFormComponentUpdateingBehavior a=新的AjaxFormComponentUpdateingBehavior（“onChange”）{
私有静态最终长serialVersionUID=3006L；
@凌驾
受保护的void onUpdate（AjaxRequestTarget目标）{
System.out.println（“此处u”+dpFrom.getModelObject（）.toString（））；
}
};
添加（a）；
返回dtf；
}
};
//作为dpFrom的第二个日期时间字段
}//构造函数的结尾
@凌驾
受保护的void onBeforeRender（）{
range=getModelObject（）；
super.onBeforeRender（）；
}
}//下课

edit2

这是wicket ajax调试窗口正在打印的内容：

INFO: focus removed from 
INFO: focus set on submitBtn11
INFO: Received ajax response (299 characters)
INFO:
<div wicket:id="feedbackQuery" class="feedback" id="feedbackQuery1c"><wicket:panel>
  <ul wicket:id="feedbackul" class="feedbackPanel">
    <li wicket:id="messages" class="feedbackPanelERROR">
      <span wicket:id="message" class="feedbackPanelERROR"></span>
    </li>
  </ul>
</wicket:panel></div>
INFO: returned focused element: [object HTMLInputElement]
INFO: returned focused element: [object HTMLInputElement]
INFO: Response processed successfully.
INFO: refocus last focused component not needed/allowed
INFO: focus removed from submitBtn11

信息：焦点已从
信息：焦点设置为submitBtn11
信息：收到ajax响应（299个字符）
信息：




信息：返回的聚焦元素：[对象HTMLInputElement]
信息：返回的聚焦元素：[对象HTMLInputElement]
信息：响应已成功处理。
信息：重新聚焦上次聚焦的组件不需要/不允许
信息：焦点已从submitBtn11中删除

edit3

我在评论中写道：

我删除了可重用组件（FormComponentPanel），现在AjaxButton没有出现错误。无论如何，这很奇怪，我认为即使使用Ajax，可重用组件也应该可以工作；而且模型分配正确

单击按钮时，我发现一些错误 ([AjaxRequestHandler@1701777932响应对象 [org.apache.wicket.ajax.AjaxRequestHandler]$1@3e1])但没有更多有关错误的信息

=>您应该在开发模式下运行Wicket以获得更详细的跟踪

您只需在表单中添加一个名为：

射程开始

射程停止

并使用对象MyRange作为属性模型，而不是为每个字段创建一个新的属性模型。实际上不需要额外的循环，而且如果为每个属性创建新的PropertyModel，我认为Wicket不会将信息写回MyRange对象

例如：第276行

和相应的HTML 第82行

塞巴斯蒂安