wicket how to update the header of modal<T> - ajax

Question

I'm making a page using wicket.
The main page consists of a table displaying invoice information.
In the last column of the table has a link for each one of the invoices displaying the full information for that invoice, by opening a modal.
I'm using de.agilecoders.wicket.core.markup.html.bootstrap.dialog.Modal
My goal is when I open the modal, the header of the modal shows the invoice number of that invoice that was opened.
I'm able to get it only after refreshing the page, and if I open the modal of another invoice the header is not updated, it shows the number of the previous invoice. I have to refresh again the page.
I don't know how to open a modal that shows in the header the number of the respective invoice without refreshing the page.
below the markup of the main page.
<wicket:extend>
<div class="page-header">
<h2>
<wicket:message key="invoices-welcome">[Welcome message]</wicket:message>
</h2>
</div>
<div>
<span wicket:id="navigator">[dataview navigator]</span>
</div>
<div>
<table cellspacing="0" class="table table-condensed">
<tr>
<th>Status</th>
<th>Invoice number</th>
<th>Supplier</th>
<th>Customer</th>
<th>Amount</th>
<th>Actions</th>
</tr>
<tr wicket:id="rows">
<td><span wicket:id="status">[status]</span></td>
<td><span wicket:id="invoiceN">[invoiceN]</span></td>
<td><span wicket:id="supplier">[supplier]</span></td>
<td><span wicket:id="customer">[customer]</span></td>
<td><span wicket:id="amount">[amount]</span></td>
<td><a wicket:id="showModal">View</a></td>
</tr>
</table>
</div>
<div wicket:id="modal"></div>
</wicket:extend>
Java code of the main page
package nl.riskco.liberobc.web.pages.invoices;
import java.util.List;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.ajax.markup.html.AjaxLink;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.navigation.paging.PagingNavigator;
import org.apache.wicket.markup.repeater.Item;
import org.apache.wicket.markup.repeater.data.DataView;
import org.apache.wicket.markup.repeater.data.ListDataProvider;
import org.apache.wicket.model.IModel;
import org.apache.wicket.model.Model;
import org.apache.wicket.request.mapper.parameter.PageParameters;
import nl.riskco.liberobc.client.business.model.InvoiceDomain;
import nl.riskco.liberobc.client.business.services.IInvoiceService;
import nl.riskco.liberobc.client.business.services.InvoiceServiceMocked;
import nl.riskco.liberobc.web.pages.BasePage;
//#AuthorizeInstantiation("VIEWER")
public class InvoicesPage extends BasePage {
private static final long serialVersionUID = 1L;
private InvoiceModalAgile modal2;
public InvoicesPage(PageParameters parameters) {
super(parameters);
IInvoiceService service = new InvoiceServiceMocked();
List<InvoiceDomain> invoicesToTest2;
invoicesToTest2 =service.getInvoices(1, 30);
modal2 = new InvoiceModalAgile("modal", Model.of(new InvoiceDomain()));
modal2.addCloseButton();
modal2.setOutputMarkupId(true);
add(modal2);
DataView<InvoiceDomain> dataview = new DataView<InvoiceDomain>("rows",
new ListDataProvider<InvoiceDomain>(invoicesToTest2)) {
private static final long serialVersionUID = 1L;
#Override
protected void populateItem(Item<InvoiceDomain> item) {
// TODO Auto-generated method stub
InvoiceDomain invoice = item.getModelObject();
item.add(new Label("status", invoice.getStatus()));
item.add(new Label("invoiceN", String.valueOf(invoice.getInvoiceGUID())));
item.add(new Label("supplier", invoice.getSupplier()));
item.add(new Label("customer", invoice.getCustomer()));
item.add(new Label("amount", String.valueOf(invoice.getAmount())));
item.add(new AjaxLink("showModal") {
private static final long serialVersionUID = 1L;
#Override
public void onClick(AjaxRequestTarget target) {
modal2.setInvoiceModel(Model.of(invoice), target);
modal2.show(target);
}
});
}
};
dataview.setItemsPerPage(10L);
add(dataview);
add(new PagingNavigator("navigator", dataview));
}
#Override
protected void onDetach() {
// TODO Auto-generated method stub
super.onDetach();
}
}
Markup of the modal
<wicket:extend>
<div class="panel panel-default">
<div class="panel-heading">Invoice details</div>
<div class="panel-body">
<table class="table table-bordered">
<tr>
<th><wicket:message key="invoice-id">[invoice-id]</wicket:message></th>
<td><div wicket:id="invoiceN"></div></td>
</tr>
<tr>
<th><wicket:message key="invoice-status">[invoice-status]</wicket:message></th>
<td><div wicket:id="status"></div></td>
</tr>
<tr>
<th><wicket:message key="invoice-customer">[invoice-customer]</wicket:message></th>
<td><div wicket:id="customer"></div></td>
</tr>
<tr>
<th><wicket:message key="invoice-supplier">[invoice-supplier]</wicket:message></th>
<td><div wicket:id="supplier"></div></td>
</tr>
<tr>
<th><wicket:message key="invoice-ibanSupplier">[invoice-ibanSupplier]</wicket:message></th>
<td><div wicket:id="iban"></div></td>
</tr>
<tr>
<th><wicket:message key="invoice-amount">[invoice-amount]</wicket:message></th>
<td><div wicket:id="amount"></div></td>
</tr>
<tr>
<th>Approved</th>
<td><form wicket:id="form"><input type="checkbox" wicket:id="checkbox1"></form></td>
</tr>
<tr>
<th>Early payment</th>
<td><form wicket:id="form2"><input type="checkbox" wicket:id="checkbox2"></form></td>
</tr>
<tr>
<th>Paid (by customer)</th>
<td><form wicket:id="form3"><input type="checkbox" wicket:id="checkbox3"></form></td>
</tr>
</table>
</div>
</div>
</wicket:extend>
Java code of the modal
package nl.riskco.liberobc.web.pages.invoices;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.markup.html.WebMarkupContainer;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.form.CheckBox;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.model.IModel;
import org.apache.wicket.model.Model;
import org.apache.wicket.model.StringResourceModel;
import de.agilecoders.wicket.core.markup.html.bootstrap.behavior.BootstrapResourcesBehavior;
import de.agilecoders.wicket.core.markup.html.bootstrap.dialog.Modal;
import nl.riskco.liberobc.client.business.model.InvoiceDomain;
public class InvoiceModalAgile extends Modal<InvoiceDomain>{
private static final long serialVersionUID = 1L;
private Label labelGuid;
private Label status;
private Label customer;
private Label iban;
private Label amountLabel;
private Label supplierLabel;
private CheckBox approved;
private CheckBox earlyPayment;
private CheckBox customerPaid;
private Form form;
private Form form2;
private Form form3;
private WebMarkupContainer header;
private WebMarkupContainer footer;
public InvoiceModalAgile(String id , IModel<InvoiceDomain> model) {
super(id, model);
add(form = new Form<>("form"));
add(form2 = new Form<>("form2"));
add(form3 = new Form<>("form3"));
status = (new Label("status",model.getObject().getStatus()));
status.setOutputMarkupId(true);
add(status);
supplierLabel = (new Label("supplier",model.getObject().getSupplier()));
supplierLabel.setOutputMarkupId(true);
add(supplierLabel);
labelGuid = new Label("invoiceN",model.getObject().getInvoiceGUID());
labelGuid.setOutputMarkupId(true);
add(labelGuid);
customer = (new Label("customer",model.getObject().getCustomer()));
customer.setOutputMarkupId(true);
add(customer);
iban = new Label("iban",model.getObject().getIBANsupplier());
iban.setOutputMarkupId(true);
add(iban);
amountLabel = new Label("amount",model.getObject().getAmount());
amountLabel.setOutputMarkupId(true);
add(amountLabel);
approved = new CheckBox("checkbox1");
approved.setOutputMarkupId(true);
approved.setEnabled(false);
add(approved);
form.setOutputMarkupId(true);
add(form);
form.add(approved);
earlyPayment = new CheckBox("checkbox2");
earlyPayment.setOutputMarkupId(true);
earlyPayment.setEnabled(false);
add(earlyPayment);
form2.setOutputMarkupId(true);
add(form2);
form2.add(earlyPayment);
customerPaid = new CheckBox("checkbox3");
customerPaid.setOutputMarkupId(true);
customerPaid.setEnabled(false);
add(customerPaid);
form3.setOutputMarkupId(true);
add(form3);
form3.add(customerPaid);
BootstrapResourcesBehavior.addTo(this);
}
public void setInvoiceModel(IModel<InvoiceDomain> invoice, AjaxRequestTarget target){
this.labelGuid.setDefaultModel(Model.of(invoice.getObject().getInvoiceGUID()));
target.add(labelGuid);
this.amountLabel.setDefaultModel(Model.of(invoice.getObject().getAmount()));
target.add(amountLabel);
this.status.setDefaultModel(Model.of(invoice.getObject().getStatus()));
target.add(status);
this.customer.setDefaultModel(Model.of(invoice.getObject().getCustomer()));
target.add(customer);
this.supplierLabel.setDefaultModel(Model.of(invoice.getObject().getSupplier()));
target.add(supplierLabel);
this.iban.setDefaultModel(Model.of(invoice.getObject().getIBANsupplier()));
target.add(iban);
this.approved.setDefaultModel(Model.of(invoice.getObject().getApprovedFlag()));
target.add(approved);
this.earlyPayment.setDefaultModel(Model.of(invoice.getObject().getOptForEarlyPaymentFlag()));
target.add(earlyPayment);
this.customerPaid.setDefaultModel(Model.of(invoice.getObject().getHasCustomerPaidFlag()));
target.add(customerPaid);
this.header(Model.of(String.valueOf(invoice.getObject().getInvoiceGUID())));
}
#Override
protected void onDetach() {
// TODO Auto-generated method stub
super.onDetach();
}
}

Answer 1

The problem is that you use the model object of the empty model that you pass at Modal construction. You need to use dynamic models for the properties.
Static/simple model:
label = new Label("staticValue", personModel.getObject().getName());
Here the label will use the name of the current person for each rendering.
Dynamic model:
label = new Label("staticValue", new AbstractReadOnlyModel<String>() {
#Override public String getObject() {
return personModel.getObject().getName());
}
}
You see that the dynamic version reads personModel's name lazily and it is called at each rendering of the Label. This way it will read the name of the person even if you put a new Person into the Label's Model.
In your case you need something like:
status = new Label("status", new PropertyModel(this, "model.object.status"));
For more information read: https://cwiki.apache.org/confluence/display/WICKET/Working+with+Wicket+models