使用AJAX在按钮单击事件之后重新加载检票口组件

时间:2019-03-26 07:40:54

标签: java html ajax wicket reload

我在这里使用检票口组件。我的看法如下。

enter image description here

我需要重新生成报告并通过单击(GO)按钮重新加载报告框架。但是,即使我用新的报告元素替换了旧元素,该div也不会重新加载。有人可以帮我吗?

form.add(new AjaxLink<Void>("goLink") {
        @Override
        public void onClick(final AjaxRequestTarget target) {
            System.out.println(reportType+"go button clicked");
            final IResourceStream stream = renderItems();
            //generate report and create a new component using that.
            Component component = new AIAIframe("reportFrame", stream);
            component.setOutputMarkupId(true);
            this.addOrReplace(component);
            System.out.println("new framwe added reportframe");
        }
    });
    add(form);

请在下面找到markup.html

<wicket:extend>
<div style="margin-left:3%;">
    <form wicket:id="form">
        <span>
            <h4>Report Erscheinung Auswahl</h4>

            <select wicket:id="chooseType" style="margin-left:5%;">
            <option>Kostenvoranschlag</option>
            <option>Aufträge</option>
            <option>Rechnungen</option>
        </select>
        </span>
        <span>
            <a href="#" class="downloadLink" wicket:id="goLink">GO</a>
        </span>
    </form>
</div>
<br>
<style>
    a.downloadLink {
      width: 115px;
      height: 25px;
      background: #4E9CAF;
      padding: 6px;
      text-align: center;
      border-radius: 5px;
      color: white;
      font-weight: bold;
    }
    .aia-center {
       margin:0 auto;
       padding: 6px;
    }
</style>
<div class="aia-center">
    <span>Download as: </span>
    <select wicket:id="formatSelect">
    </select>
    <a href="#" class="downloadLink" wicket:id="downloadLink">Download</a>
</div>
<span style="height: 100%; width: 100%" wicket:id="reportFrame"></span>

1 个答案:

答案 0 :(得分:0)

如果要使用Ajax响应重新呈现此target.add(component),则需要致电component

由于使用wicket:id =“ reportFrame”重新创建组件,因此需要确保最初呈现的组件(在Ajax请求之前)也具有.setOutputMarkupId(true),以便Ajax逻辑可以在其中找到它。浏览器DOM并将其替换为新的。