Can use AjaxStatus while The next Page Is Loading? - javascript

Im developing a SW Application. I have been for several time trying to show a modal between the transition of my xhtml pages. I dont want the user can push many buttons or repeat pushing while the next screen is loading.
First i tried it putting an overlayPaneltrying to cover the full screen but i found this problem:
p:overlayPanel Full Screen
Then, I tried it using blockUI blocking the whole body of my page, but then I found this other problem:
p:blockui disable ajax
Finally, I really thought that i got it, using a JS function but then I had this problem (basically the problem is that it dont works with the dataTable):
onstart and oncomplete dont work in datatable with p:commandLink
Thank U In Advice!!!!

to make an ajaxStatus try to make it like that (do not forget that the ajaxStatus is invoked each time you use a p:ajax that mean in your dataTable you need to add an ajax event when you try to invok it )
mypage.xhtml
<p:ajaxStatus onstart="PF('statusDialog').show()" onsuccess="PF('statusDialog').hide()" />
<h:form id="form">
...
</h:form>
<p:dialog widgetVar="statusDialog" modal="true" draggable="false" closable="false" resizable="false" showHeader="false">
<p:graphicImage name="ajaxloadingbar.gif" library="images/myIcons" />
</p:dialog>
Hope that helped you

Related

Ajax update causes elements created by javascript to be lost in Primefaces

I have in my .xhtml form an element into which I am appending html elements through javascript.
When I trigger an ajax commandButton, these appended elements are lost.
I have tried to exclude this element from my ajax update and make my submit partial (following this practice How to exclude child component in ajax update of a parent component?) , but in vain, the newly added elements are lost after the update takes place.
Is there any way to avoid this? Thanks in advance :)
Code sample:
<h:form id="formID">
<p:commandButton
value="ajax_button" partialSubmit="true"
update="#(#divOfElement :not(.notupdate))"
ajax="true">
<f:actionListener binding="#{myBean.myAction()}"/>
</p:commandButton>
</h:form>
<p:outputPanel id="divOfElement">
<!-- other things i want to be updated-->
<p:outputPanel id="panel_not_to_update"styleClass="notupdate">
<!-- this div is filled with other elements from javascript code which will be destroyed when the ajax update takes place -->
</p:outputPanel>
</p:outputPanel>
Here, I want divOfElement to be updated through the command button in the ajax call, but exclude the div with id panel_not_to_update so it's child elements added through javascript code will not be lost.
I am using JSF 2.2 and Primefaces 7.0.

Button loading state Asp.net JavaScript

I using bootstrap and i want to use that; http://getbootstrap.com/javascript/#buttons-stateful
<asp:Button ID="Button1" runat="server" Text="Send It" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off" />
<script>
$('#Button1').on('click', function () {
var $btn = $(this).button('loading')
$btn.button('reset')
})
</script>
But it doesn't work. what can i do to work this?
When an ASP.NET control is rendered, it's assigned a new ID. If you do an inspect element on your button, you'll notice it's ID is actually not Button1. Because of this, your $('#Button1') selector is not finding anything.
If you're using a version of ASP.NET that supports it, you can put clientIDMode="static" on your button to keep the ID from changing.
If not, you can get the client ID by replacing $('#Button1') with $('#<%=Button1.ClientID%>')
Make sure jquery is loaded
Make sure boostrap css is loaded
Make sure bootstrap javascript is loaded
It looks like when your button is loaded it is immediately reset. Trying have the button load in the before step in an ajax request. Then put the rest in the complete step of the ajax step. This way you can see it working.

How can I refresh the datatable's page automatically ?

I am using Primefaces 3.4.
When I add a new data inside the database, I have to refresh the data table or the page to see the changes.
How can I make the page refreshing automatically ?
In most cases add datatable id in the update="datatableID" attribute of the p:ajax or p:commandButton
If you need the update be completely automatic and with no action from the user, like pushing a button, you need to use a poll
"Poll component make ajax calls in a specified interval."
<h:form id="form">
<h:outputText id="txt_count" value="#{counterBean.count}" />
<p:poll interval="3"
listener="#{counterBean.increment}" update="txt_count" />
</h:form>
this is the primefaces showcase sample
you can get ideas from it
cheers

Primefaces DataTable waitTime for data to load

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:
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...)
what pf version? have you looked at blockUi in the showcase?

How to call a dialog box from a javascript function

I'm currently using PrimeFaces to create a web service and ran into a snag while trying to show() a dialog box using a javascript function instead of an onclick="__.show();" command.
What I would like to do is:
function displayPopup(){
statusDialog.show();
}
and if I do something like
a href=”#” onclick=”statusDialog.show()”
Then it works just fine (but not the work flow I require).
This is the PrimeFaces code:
<p:dialog modal="true" widgetVar="statusDialog" header="Your request is in progress..." draggable="false" closable="false" resizable="false">
<img alt="Banner Right" src="#/images/ajaxloadingbar.gif" border="0"/>
</p:dialog>
This is the generated code:
jQuery(function() {statusDialog = new PrimeFaces.widget.Dialog('j_idt41',{autoOpen:false,minHeight:0,draggable: false,modal: true,resizable:false,closable:false});});
I haven't seen show() before, but you can generate an alert with the alert() function, or an alert with "Yes" and "No" buttons using the confirm() function, int confirm(String text).
It sounds like you just want to call alert("Your request is in progress...").
I don't think you can show images in the basic alert, but 5 seconds on google gave me this site:
http://javascript.internet.com/miscellaneous/custom-alert-box.html
Which seems to solve your problem.

Categories

Resources