How to create a modal instance inside an ajaxLink - ajax

Question

I'm using an AjaxLink to open a Modal.
This modal displays first a "Are you sure" panel and then a panel with the result of the operation together with a Close button.
I close the modal and if I open it again I get the second panel and not the first.
I would like everytime the modal is opened to get the sequence of panels from the beginning, i.e., starting with the initial panel.
I tried to instantiate the modal inside the AjaxLink but I have issues with the html markup.
HTML
<wicket:panel>
<div wicket:id="modal2"></div>
<button class="btn btn-primary" wicket:id="link"><span
wicket:id="buttonLabel"></span></button>
</wicket:panel>
Java
public class ButtonPayment2 extends Panel{
private static final long serialVersionUID = 1L;
private Label label;
private List<String> current;
private String party;
private DetailsModal2 modal;
private String guid;
#SpringBean
private Environment env;
#SpringBean
private IService service;
public ButtonPayment2(String componentId, IModel<PaymentDomain> rowmodel, String invoiceId, String paymentId){
super(componentId);
current = service.getPById(rowmodel.getObject());
guid = rowmodel.getObject().getPaymentGUID();
initiateButton(current);
modal = new DetailsModal2("modal2",rowmodel,party){
#Override
public void closeAction(AjaxRequestTarget target, boolean toPass) {
super.closeAction(target, toPass);
}
};
modal.header(Model.of("Transaction process"));
modal.setHeaderVisible(true);
modal.setOutputMarkupId(true);
add(modal);
add(new AjaxLink("link"){
private static final long serialVersionUID = 1L;
#Override
public void onClick(AjaxRequestTarget target) {
modal.show(target);
target.add(this);
}//close onclick
}.add(label));//close ajaxLink
modal.detach();
}
}
DetailsModal2.java
public class DetailsModal2 extends Modal<IModel<PaymentDomain>> {
#SpringBean
private IService service;
private String party;
private BootstrapAjaxLink<String> noButton;
private ResponseMessage message;
private String paymentId;
private ProcessingPanel panel2;
private Panel replacedPanel;
private boolean booleanToPass;
private IModel<PaymentDomain> model;
public DetailsModal2(String id, IModel<PaymentDomain> model, String party) {
super(id);
this.party = party;
this.model = model;
this.paymentId = model.getObject().getGUID();
replacedPanel = new AreYouSure("replacedPanel");
replacedPanel.setOutputMarkupId(true);
add(replacedPanel);
panel2 = new ProcessingPanel("replacedPanel");
addButton(new BootstrapAjaxLink<String>("button", null, Buttons.Type.Warning, new ResourceModel("details")) {
private static final long serialVersionUID = 1L;
#Override
public void onClick(AjaxRequestTarget target) {
addNewPanel(new AjaxLazyLoadPanel("replacedPanel") {
#Override
public Component getLazyLoadComponent(String markupId) {
if (!condition) {
message = service.getPayment(paymentId);
if (message == null) {
booleanToPass = true;
return new VotingResultPanel(markupId, true);
} else {
return new VotingResultPanel(markupId, false);
}
} // close if
else if (condition)) {
message = service.setPayment(paymentId);
if (message == null) {
booleanToPass = false;
return new VotingResultPanel(markupId, true);
} else {
System.out.println("" + message.getError());
return new VotingResultPanel(markupId, false);
}
}
else {
System.out.println("It was not possible to access the db");
}
}
}, target);
this.setVisible(false);
target.add(this);
noButton.setLabel(Model.of("Close"));
target.add(noButton);
target.add(this);
}
});
noButton = new BootstrapAjaxLink<String>("button", null, Buttons.Type.Primary) {
private static final long serialVersionUID = 1L;
#Override
public void onClick(AjaxRequestTarget target){
closeAction(target,booleanToPass);
}
}.setLabel(Model.of("No"));
addButton(noButton);
}
public void closeAction(AjaxRequestTarget target, boolean flag){
close(target);
}
public void addNewPanel(Panel addpanel, AjaxRequestTarget target) {
Panel newPanel = null;
newPanel = addpanel;
newPanel.setOutputMarkupId(true);
replacedPanel.replaceWith(newPanel);
target.add(newPanel);
replacedPanel = newPanel;
}
}// close class
HTML of DetailsModal2
<wicket:extend>
<div><span wicket:id="replacedPanel"> </span></div>
</wicket:extend>
New solution for this particular case, DetailsModal2 changed:
public class DetailsModal2 extends Modal<IModel<PaymentDomain>> {
#SpringBean
private IService service;
private Component noButton;
private Component yesButton;
private Component noButton;
private String paymentId;
private Panel replacedPanel;
private IModel<PaymentDomain> model;
public DetailsModal2(String id, IModel<PaymentDomain> model, String party)
{
super(id);
this.party = party;
this.model = model;
this.paymentId = model.getObject().getPaymentGUID();
replacedPanel = new AreYouSure("replacedPanel");
replacedPanel = panel1;
replacedPanel.setOutputMarkupId(true);
add(replacedPanel);
addButton(yesButton = new BootstrapAjaxLink<String>("button", null, Buttons.Type.Warning, new ResourceModel("details")) {
private static final long serialVersionUID = 1L;
#Override
public void onClick(AjaxRequestTarget target) {
addNewPanel(new AjaxLazyLoadPanel("replacedPanel") {
#Override
public Component getLazyLoadComponent(String markupId) {
if (!condition)) {
message = service.getPayment(paymentId);
if (message == null) {
return new VotingResultPanel(markupId, true);
} else
{
return new VotingResultPanel(markupId, false);
}
} // close if
else if (condition)) {
message = service.setPayment(paymentId);
if (message == null) {
return new VotingResultPanel(markupId, true);
} else {
System.out.println("" + message.getError());
return new VotingResultPanel(markupId, false);
}
}
else {
System.out.println("error");
}
}
}, target);
this.setOutputMarkupPlaceholderTag(true);
this.setVisible(false);
noButton.setOutputMarkupPlaceholderTag(true);
noButton.setVisible(false);
closeButton.setVisible(true);
target.add(this, noButton, closeButton);
}
});
noButton = new BootstrapAjaxLink<String>("button", null, Buttons.Type.Primary) {
private static final long serialVersionUID = 1L;
#Override
public void onClick(AjaxRequestTarget target){
close(target);
}
}.setLabel(Model.of("No"));
addButton(noButton);
}
closeButton = new BootstrapAjaxLink<String>("button", null, Buttons.Type.Primary) {
private static final long serialVersionUID = 1L;
#Override
public void onClick(AjaxRequestTarget target){
addNewPanel(panel1,target);
yesButton.setOutputMarkupId(true);
yesButton.setVisible(true);
noButton.setOutputMarkupId(true);
noButton.setVisible(true);
closeButton.setOutputMarkupId(true);
closeButton.setOutputMarkupPlaceholderTag(true);
closeButton.setVisible(false);
target.add(yesButton,noButton,closeButton);
close(target);
}
}.setLabel(Model.of("Close"));
closeButton.setOutputMarkupPlaceholderTag(true);
closeButton.setVisible(false);
addButton(closeButton);
}
public void addNewPanel(Panel addpanel, AjaxRequestTarget target) {
Panel newPanel = null;
newPanel = addpanel;
newPanel.setOutputMarkupId(true);
replacedPanel.replaceWith(newPanel);
target.add(newPanel);
replacedPanel = newPanel;
}
}// close class

Answer 1

you can try to move the following lines
replacedPanel = new AreYouSure("replacedPanel");
replacedPanel.setOutputMarkupId(true);
add(replacedPanel);
to onConfigure and change add() to addOrReplace()