Question

hi Stack Overflow I have a web app and I added in the Primefaces library in order to do cool things with dataTables.

I have a dataTables that displays my fields and sorts and has paging. so If I have 100 records It displayes 25 at a time and one can click ona apage to go to it, but i have so much information, it takes a few seconds to actually load up the new info (the correct page you want to be on) so I have a hidden div I use to display when there is some waiting to do liek updating tables and whatnot.

the js looks like this:

                function loading(){
                $( "#loadingPopUp" ).dialog( "open" );
                return false;
            }

my div looks like this:

<div id="loadingPopUp">                 
            <ul class="appnitro"  >
                        <div> <p><b> Please Wait</b></p> <p><img src="/miloWeb/images/loading.gif"  /></p>  </div>
            </ul>               
        </div>

ThedataTable is very basic:

<p:dataTable 
                                                                                 id="dataTable" 
                    value="#{auditBB.auditList}"
                                                                                 var="testVar" 
                    rows="25"  
                    paginator="true" 
                    paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                    rowsPerPageTemplate="5,10,15,25,50,100">
//
//columns go here
//
</p:dataTable

How do I call the method in javascrip loading() so that when I click on the page numbe I want to go to and then hide it again when the data actually loads again? THankS!

for visual support:

Answer 1

If you alrady integrated primefaces into your project why don’t you use its AJAX – Status

Its very simple and does exactly the thing you want , Ajax Status is a global indicator to inform users about the ajax interactions.

Take a look at the simple example Ajax Status and the more advanced one ,all you have to do is place the <p:ajaxStatus in your page (and if you work is templates you can place it in your header and it will apply for all the pages of your web app…)