CODEWITHSUNDEEP
javawicketwicket-6
Markus
Markus

Reputation: 1563

Loading Wicket Panels dynamically in a <div>

In my current Wicket Application I currently make a fullpage reload after the user clicks on one menu item. I want to change this to only reload the necessary Panel.

What I currently do:

I have a BasePage.html which contains the menu items and some static content:

<li><a wicket:id="home" href="#">Home</a></li>
<li><a wicket:id="user" href="#">User</a></li>

<!-- and so on ->

<div class="panelarea">
    <wicket:child />
</div>

and my (abstract) BasePage.java:

add(new AjaxSubmitLink("home") {
    protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
        setResponsePage(new HomePage());
    }
});
//etc

my HomePage.html:

<wicket:extend>
    <span wicket:id="homePanel"></span>
</wicket:extend>

my HomePage.java (and all other Pages) then adds the Panel:

add(new HomePanel("homePanel"));

Instead of setResponsePage() I want to open the Panel in the <div class="panelarea"> without rerendering the whole page.

Can anyone give me a hint?

Upvotes: 2

Views: 3695

Answers (2)

Martin Strejc
Martin Strejc

Reputation: 4347

You have two possibilities:

  1. Make your panel hidden and show it after ajax request
  2. Place an EmptyPanel and replace it after ajax request

In both cases, you have to place a placeholder tag in your markup including output markup

<span wicket:id="homePanel"></span>

SOLUTION 1: Make your panel hidden and show it after ajax request

final Panel homePanel = new HomePanel("homePanel");
homePanel.setOuputMarkupPlaceholderTag(true);
homePanel.setOuputMarkupId(true);
homePanel.setVisible(false);
add(homePanel);
add(new AjaxSubmitLink("home") {
    protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
        homePanel.setVisible(true);
        // in Wicket 1.4 instead of target.add(Component)
        // target.addComponent(homePanel);
        target.add(homePanel);
    }
});

SOLUTION 2: Place an EmptyPanel and replace it after ajax request

final Panel emptyPanel = new EmptyPanel("homePanel");
emptyPanel.setOuputMarkupPlaceholderTag(true);
emptyPanel.setOuputMarkupId(true);
add(emptyPanel);
add(new AjaxSubmitLink("home") {
    protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
        Panel homePanel = new HomePanel("homePanel");
        homePanel.setOuputMarkupPlaceholderTag(true);
        homePanel.setOuputMarkupId(true);
        // if your Page class is MyPage.class
        MyPage.this.addOrReplace(homePanel);
        // in Wicket 1.4 instead of target.add(Component)
        // target.addComponent(homePanel);
        target.add(homePanel);
    }
});

Upvotes: 6

Martin
Martin

Reputation: 1273

Create a content Panel object for the div you want to replace:

 private Panel currentpanel = getHomePagePanel(); // fill it with any Panel you want.

You can replace the 'content' panel like so:

private void changePanel() {
    Panel newpanel = getNewPanel(); // Or pass as arg to this function
    newpanel.setOutputMarkupId(true);
    currentpanel.replaceWith(newpanel);
    currentpanel = newpanel;
    target.add(currentpanel);
}

Call this within your ajaxlink onSubmit with the correct panel to replace the old one with.

Upvotes: 1

Related Questions