In JSF, the loading bar is hidden before the page is completely loaded

Currently, I am facing an issue with the loading bar. It seems to disappear before the page content is fully loaded. Ideally, I would like the loading bar to remain visible until the entire page has been loaded correctly.

In the layout.xhtml file, I have included the following code:

<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>

Next, here is a snippet of the Java method being used:

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

Additionally, in bookinghistory.xhtml, the following code for the loading dialog box is present:

<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>

If anyone has suggestions on how to resolve this issue, please feel free to share!

Answer №1

If you're looking for a code that will work, give this a try: onclick="statusDialog.start()" and oncomplete="statusDialog.close()"

<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

I have finally found the solution to my problem.

After making changes in layout.xhtml by inserting the following code within the body:

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

I proceeded to add script code as follows:

<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>

Additionally, I included the following CSS styling:

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

Now the loading bar functions properly with the help of a reference from here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering a JSON Parsing Issue within an Android Application

I'm facing an issue in my Android app where I am attempting to retrieve popular media from Instagram. To achieve this, I am utilizing the JSONParser class featured in a tutorial available at public class JSONParser { static InputStream is = nu ...

"Comparing the similarity and accessibility of using the same browser session with a Firefox or Chrome

I'm working on a solution to close and open the same session in my browser using a Firefox extension. The code I have currently closes the browser and then opens the last session, but it also opens another window which is not desired. I want to be abl ...

Conducting a test multiple times, with each iteration specific to a different web browser

It has crossed my mind that running a single test across multiple browsers could be very beneficial, but the execution seems quite complex. As I ponder over the steps required to achieve this, a feeling of uncertainty clouds my mind. Is there anyone out t ...

Eliminate incorrect or invalid state when resetting a dropdown in an Angular ng-select component

I have integrated the ng-select plugin into my Angular project for handling dropdowns. One specific requirement I have is to reset the second dropdown when the first dropdown is changed. Below is a snippet of the code: <ng-select [items]="branchMo ...

Utilize the data storage API within Next.js or directly in the user's

Struggling to store this ini file on either the server or client, any help would be greatly appreciated. Additionally, I would like to display the ini info in the browser so that clients can easily copy and paste the information. However, I seem to be fac ...

Even with employing Cors alongside Axios, I continue to encounter the following issue: The requested resource does not have the 'Access-Control-Allow-Origin' header

When working with a MEAN stack app, I had no issues with CORS. However, upon transitioning to the MERN stack, I encountered an error related to CORS despite having it implemented in the backend: Access to XMLHttpRequest at 'http://localhost:5000/api/ ...

parse website using jsoup redirection

While parsing data from this URL, I encountered an issue with the ajax load process. Despite my efforts to parse the website, I only receive the body element and not the desired response within the ticket_lists. I am unsure how to tackle the redirection on ...

Transferring a JSON array from Google App Engine to Cloud Storage using GO

I am attempting to upload a JSON array to Google Cloud Storage, which is posted by an App Engine application using the code below: saveData : function saveData() { var _this = this, save = this.shadowRoot.querySelector('#save-data'), ...

Tips for exporting telegram information to a Google spreadsheet

Recently, I set up a basic telegram bot using the telegraf framework and wrote this code snippet to log essential data: bot.on('text', (ctx, next) => { console.log(`[text] ${ ctx.message.chat.id } ${ ctx.from.username } ${ ctx.message.chat.f ...

python extract values from a JSON object

I've been searching everywhere, but I haven't been able to find a solution. It seems like my question is not clear enough, so I'm hoping to receive some guidance. Currently, I am working with turbogears2.2. In my client view, I am sending a ...

Arrange the grid in a pleasing manner

I'm really struggling with this issue. In my current setup, I have a Grid container that holds two separate grids - one for a textfield and another for a checkbox. Unfortunately, I can't seem to get them to align properly. <Grid container& ...

The if statements in my code are not displaying the contents of two arrays when compared, even though the code is functioning properly

Currently, I am working on creating a simple mastermind game where the computer randomly selects a 4-digit number and the user has to input numbers repeatedly until they guess the correct number. My approach involves storing the guessed number and the rand ...

Is it feasible to transmit an image file to PHP using AJAX?

I'm attempting to utilize AJAX to send an image file along with other text information. However, I am encountering difficulties with the file part and am struggling to comprehend how to resolve it. Below is the JavaScript code snippet: //The user ...

The error message "TypeError: Cannot set property 'href' of undefined" occurred at angular.js line 12520 when trying to set $window.location.href

Has anyone tried using a directive function to redirect when clicking with ng-click? Here is the HTML code: <a ng-click="navbarlinksCtrl.clickedfr()" ng-class="{active: clickedfr()}">FR</a><br> <a ng-click="navbarlinksCtrl.clickeden( ...

Can you explain the process that occurs when the user changes the size of the applet window?

I have noticed that whenever I drag to change the window size in my applet, the paint method seems to run again. I am curious about what is actually happening. Is the paint method re-running itself? And is there a way to make it do this automatically wit ...

Troubleshooting: Vue JS failing to recognize new objects and properties in HTML

Within my Vue instance, I have a method named `loadPlannedAlerts` that performs an AJAX call to retrieve JSON data. This method is called during the `mounted` lifecycle hook of my Vue JS instance. The retrieved JSON object consists of key-value pairs struc ...

The function you are trying to access is not Random-js

Everything was running smoothly, but now there seems to be a glitch. Node version - 10.4 Error: var random = require("random-js")(); ^ TypeError: require(...) is not a function Code: var random = require("random-js")(); ...

After closing and reopening the jQuery modal, the name does not appear

I crafted a custom modal window to display images along with comments and the owner's name. The issue arises when I close the current modal and reopen it; the owner's name disappears. Oddly enough, the name is displayed the first time the modal i ...

Automatically updating client-side values in AngularJS using setInterval()

Implementing a value calculator on the client side using AngularJS. I need to update the main value of the calculator every 5 minutes with setInterval(). This is my AngularJS code: $http({method: 'GET', url: '../assets/sources.json'} ...

Double dragenter events triggered before dragleave in HTML5 drag and drop functionality

Currently, I'm researching HTML5 Drag and Drop functionality by using this resource. However, I've encountered an issue with the dragenter event that seems to fire twice for child elements before the dragleave event. Because of this, the dashed b ...