Question

i got the following structure which display editable rows in an html table

Panel
 + WebMarkupContainer - in HTML <tbody wicket:id="container">
   + ListView which for each item in the list does (in HTML this)
     + item.add(new PopTable1Row("Pop1Panel", popTable1Item, ComponentMode.EDIT));
       + PopTable1Row component contains
         + Form
           + some inputs and a 2 submit buttons (Save, Delete)

Now i want to achieve that for example by clicking on delete the list view will AJAX like reload without reloading the whole page. The Delete button deletes a row from a table, so one row should disappear.

I achieved reloading the ListView by using AjaxSelfUpdatingTimerBehavior:

WebMarkupContainer.add(new AjaxSelfUpdatingTimerBehavior(Duration.seconds(5)));

It refreshed the listView every 5 seconds.
OK, but now i want to refresh the listView in onSubmit of the for example the Delete Button.

And here;s the question: how to do this?

I tried in the onSubmit:

this.getParent().getParent().getParent().getParent().render();
this.getParent().getParent().getParent().getParent().renderComponent();

But both did not work.

Answer 1

First you have to set outputId to true in yours listView. So Wicket will generate an id for the list tag, required to be updated by ajax.

yourListView.setOutputMarkupId(true);

And then in your onSubmit method tell Wicket to repaint the list. Note that in the example the save button is a AjaxLink, but you can use other components.

AjaxLink<Void> dltBttn = new AjaxLink<Void>("yourButtonId") {
  public void onClick(AjaxRequestTarget target) {
    // your stuff

    if(target != null) {
      // tells wicket to repaint your list
      target.addComponent(yourListViewComponent); 
}
  }
}