Question

实际上我正在加载栏，但在页面内容加载之前，加载栏被隐藏。我想要加载栏，直到页面未正确加载。

我在layout.xhtml中使用的代码

 <li class="#{loginBean.subMenu eq 'Booking_History' ? 'active' : ''}">
          <p:commandLink rendered="#{loginBean.logedadmin or loginBean.logedagent}" action="#{bookingHistoryBean.showList}" value="Booking History"
                        immediate="true">
                        </p:commandLink>

java方法

public String showList() {
    startLoadingBar();
    status="All";
    noOfRecords=0;
    getList();
    searchBookingHistory();
    log.info("Loaded successfully");
    return "/pages/internalstackholders/bookinghistory.jsf?faces-redirect=true";
}

在bookinghistory.xhtml

 <p:dialog widgetVar="statusDialog" id="statusbar" modal="true"
        showEffect="fade" showHeader="false" closable="false" width="250"
        resizable="false">
    <h:form>
      <center>
        <img src="#{request.contextPath}/resources/images/loading.gif" /><br />
        <b>Please wait...</b><br />
        <br />
      </center>
    </h:form>
  </p:dialog>

任何有任何建议的机构。

Answer 1

您可以尝试使用以下代码对我有用的onclick =＆＃34; statusDialog.start（）＆＃34;和oncomplete =＆＃34; statusDialog.close（）＆＃34;

    <p:commandButton rendered="#{loginBean.logedadmin or loginBean.logedagent}" action="#{bookingHistoryBean.showList}" value="Booking History" immediate="true" async="true" onclick="statusDialog.start()" oncomplete="statusDialog.close()" />

<p:dialog widgetVar="statusDialog" id="statusbar" modal="true"
    showEffect="fade" showHeader="false" closable="false" width="250"
    resizable="false">
<h:form>
  <center>
    <img src="#{request.contextPath}/resources/images/loading.gif" /><br />
    <b>Please wait...</b><br />
    <br />
  </center>
</h:form>

Answer 2

我找到了答案..

在layout.xhtml中，我在body中添加了以下代码。

<div id="nonAjaxLoad">
    <img src="#{request.contextPath}/resources/images/loading.gif"/>
</div>

然后我添加了脚本代码。

<script>
$(document).ready(function(){
    console.log("ready is called");
    //PF('statusDialog').hide()
    $('#nonAjaxLoad').hide();
});

$(window).bind('beforeunload', function() {
     console.log("bind is called");
    // PF('statusDialog').show()
    $('#nonAjaxLoad').show(); 
});
</script>

我已经添加了css

#nonAjaxLoad {
width: 50px;
height: 50px;
position:absolute;
bottom: 50%;
right: 50%;
z-index: 999
}

现在加载栏工作正常。我从here获得了帮助。

在完全加载之前，页面加载栏隐藏在jsf中

2 个答案: