第一次渲染页面时如何为模态窗口生成空div？答案

【问题标题】：How to generate empty div for modal window when page is rendered first time?第一次渲染页面时如何为模态窗口生成空div？
【发布时间】：2020-12-18 19:22:46
【问题描述】：

您能否建议在第一次呈现页面时如何为模式窗口生成一个空的“div”标签？ 'div' 内容将通过 ajax 请求获取。我想避免两次获取模态窗口内容 - 第一次是在呈现页面时，然后是当我单击链接以显示模态窗口时。

我不使用检票口模态窗口实现。

我有一个基本的 ModalBorder 类。

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>

我想实现以下输出：

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>

但现在我面临这个问题：

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>

您能提出解决方案吗？

我使用 Wicket 9。

【问题讨论】：

标签： wicket

【解决方案1】：

向页面添加一个空的 WebMarkupContainer 而不是您的面板，确保调用 setOutputMarkupId(true) 以便可以在 ajax 调用中刷新它。然后将其替换为 Link 的 onClick(AjaxRequestTarget target) 方法中的面板。

【讨论】：

【解决方案2】：

感谢您的提示。我需要更改我的实现，但现在它可以工作了。

// 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);
        }
    };
}

【讨论】：