jsf/primefaces load indicator during init of the bean -
in jsf/primefaces project, have lot of data loading in init (postconstruct) method of beans. that's why show gif indicator during bean load.
i tried primefaces , ajax status (programmatic version of showcase)
http://www.primefaces.org/showcase/ui/ajaxstatusscript.jsf so added template of project
<p:dialog modal="true" widgetvar="loadwidget" header="status" draggable="false" closable="false"> <p:graphicimage value="../images/ajaxload.gif" /> </p:dialog> i able call loadwidget.show(); @ beginning of init method of bean , loadwidget.hide(); @ end.
do have idea , how fire javascript display loading gif? thanks
edit
i add tried this. here part of template include content of page. it's not working either p:dialog included before or after content.
<div class="content"> <script>loadwidget.show();</script> <ui:insert name="body" /> <script>loadwidget.hide();</script> </div> the console says loadwidget not defined
edit2
i try explain how project works. helpful.
here template
<html ... > <f:view contenttype="text/html"> <h:head> ... </head> <h:body> <ui:insert name="header" /> <ui:insert name="menu" /> <ui:insert name="body" /> <ui:insert name="footer" /> ... <!-- other things --> </h:body> </f:view> </html> then each page defines body. example of page.
<html ... > <ui:composition template="mytemplateabove"> <ui:define name="body"> <h:outputtext value="#{beanofmyfirstpage.mytext}" /> <p:commandbutton action="#{beanofmyfirstpage.gotoanotherpage}" /> ... </ui:define> </ui:composition> </html> then each page linked bean extends basebean.
@managedbean(name = "beanofmyfirstpage") @viewscoped public class beanofmyfirstpage extends basebean { // attributes + getters , setters @postconstruct public void init() { super.init(); ... // actions take time cause of db requests example } public void gotoanotherpage() { navigation.handlenavigation(facescontext.getcurrentinstance(), null, "mysecondpage"); } // methods } and common bean
public class basebean { @postconstruct public void init() { super.init(); // general actions beans } }
i have solution!
it simple , there nothing primefaces or jsf bean construction process.
i added in template (that included every pages)
<div id="nonajaxload"> <img src="../images/ajaxload.gif"/> </div> then added css below move fixed bottom right of page
#nonajaxload { width: 50px; height: 50px; position: fixed; bottom: 30px; right: 30px; } and make magical, added script
<script> $(document).ready(function(){ $('#nonajaxload').hide(); }); $(window).bind('beforeunload', function() { $('#nonajaxload').show(); }); </script> so when leave page, loading indicator shown , when other page loaded, it's hidden.
thanks helped @andy
Comments
Post a Comment