CODEWITHSUNDEEP
wicket
slawtul
slawtul

Reputation: 11

How to generate empty div for modal window when page is rendered first time?

Are you able to suggest how to generate an empty 'div' tag for a modal window when the page is rendered the first time? 'div' content will be fetched with ajax request. I would like to avoid fetching modal window content twice - first when the page is rendered and then when I click on the link to show modal window.

I do not use wicket modal window implementation.

I have a base ModalBorder class.

ModalBorder.java
public class ModalBorder extends Border {
    public ModalBorder(String id) {
        super(id);
    }
}

with ModalBorder.html markup
<wicket:border>
  <div class="modal-background"></div>
  <div class="modal-content">
    <div class="box">
      <wicket:body/>
    </div>
  </div>
</wicket:border>

AboutAppModalPanel.java
public class AboutModalPanel extends Panel {
    public AboutModalPanel(String id) {
        super(id);
        setOutputMarkupId(true);
        var mb = new ModalBorder("modalBorder");
        mb.setRenderBodyOnly(true);
        add(mb);
    }
}

AboutAppModalPanel.html
<wicket:panel>
  <div wicket:id="modalBorder">
    <article class="media">
      <div class="media-content">
        <div class="content">
          <p>
            <strong>
              About application content
            </strong>
          </p>
        </div>
      </div>
    </article>
  </div>
</wicket:panel>

I would like to achieve the below output:

MainPage.html

Page is rendered first time (with empty div)
<html>
  <body>
    ...
    <div class="modal" id="aboutAppModalPanel2">
        <!-- modal is empty and hidden (not-active) -->
    </div>
  </body>
</html>

and then requesting modal content via ajax request

<html>
  <body>
   ...
  <div class="modal is-active" id="aboutAppModalPanel2">
    <!-- modal is filled in and SHOWN (added 'is-active' class) -->
    <div class="modal-background"></div>
    <div class="modal-content">
    <div class="box">
      <article class="media">
       <div class="media-content">
       <div class="content">
       <p><strong>About application content</strong>
                
    ...
  </div>
  </body>
</html>

but now I am facing this issue:

Page is rendered first time (with filled in div)
<html>
  <body>
  ...
  <div class="modal" id="aboutAppModalPanel2">
    <!-- modal is filled in and HIDDEN (not-active) -->
    <div class="modal-background"></div>
    <div class="modal-content">
    <div class="box">
      <article class="media">
      <div class="media-content">
      <div class="content">
      <p><strong>About application content</strong>
                
    ...
  </div>
  </body>
</html>

and then requesting modal content via ajax request

<html>
  <body>
   ...
  <div class="modal is-active" id="aboutAppModalPanel2">
    <!-- modal is filled in and SHOWN (added 'is-active' class) -->
    <div class="modal-background"></div>
    <div class="modal-content">
    <div class="box">
      <article class="media">
       <div class="media-content">
       <div class="content">
       <p><strong>About application content</strong>
                
    ...
  </div>
  </body>
</html>

Are you able to suggest a solution?

I use Wicket 9.

Upvotes: 1

Views: 111

Answers (2)

slawtul
slawtul

Reputation: 11

thanks for a tip. I needed to change my implementation but now it works.

// In page constructor:
// Instead of empty WebMarkupContainer you suggested an empty panel with setOutputMarkupId(true)
add(new AjaxEmptyPanel("aboutApp"));
add(showAboutAppLink());


// and AjaxLink:
private AjaxLink<String> showAboutAppLink() {
    return new AjaxLink<>("showAboutApp", new ResourceModel("SHOW")) {
        private static final long serialVersionUID = -3035458028030059416L;

        @Override
        public void onClick(AjaxRequestTarget ajaxRequestTarget) {
            var aboutApp = new AboutAppModalPanel("aboutApp");
            aboutApp.setOutputMarkupId(true);
            getPage().replace(aboutApp);
            ajaxRequestTarget.add(aboutApp);
        }
    };
}

Upvotes: 0

cserepj
cserepj

Reputation: 926

Add an empty WebMarkupContainer instead of your panel to the page, making sure you call setOutputMarkupId(true) so it can be refreshed in an ajax call. Then replace it with your panel in the Link's onClick(AjaxRequestTarget target) method.

Upvotes: 2

Related Questions