第一次呈现页面时如何为模态窗口生成空div？

如何解决第一次呈现页面时如何为模态窗口生成空div？

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

我不使用 wicket 模态窗口实现。

我有一个基本的 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。

解决方法

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

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

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

第一次呈现页面时如何为模态窗口生成空div？

如何解决第一次呈现页面时如何为模态窗口生成空div？

解决方法

相关推荐