Develop Reference

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.

Can use AjaxStatus while The next Page Is Loading?

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

Rerender full page using ajax

I am more backednd developer and sometimes ui things confuding me.
I have html form
<form action="getNewPage">
...
<input type="submit'>
</form>
getNewPage returns html page
when I click on submit
Then page reloads and html returned from getNewPage renders on this page.
How can I achieve it using ajax?
Is it possible?
P.S.
I just want to know

You can use the jQuery (the JavaScript framework) for it.
Example:
// #theForm - form id
$.get('server.php?' + $('#theForm').serialize());
$.post('server.php', $('#theForm').serialize());

Passing variables in URL

I have an address book widget that shows if there are contents.
If there are no contents, an add button will show up. Upon pressing the add button, it will redirect to another page which will show the form.
The initial design of my website is as follows:
When the user click the add button, it will direct to a page using javascript function:
document.location.href="address?addOnly=true";
The form will display.
If successful, there are $.post that will change the div only that will enable user to do CRUD in the address book.
The problem with the variable inside the url which is address?addOnly=true is that when the user refresh it, it will always shows the add form.
That's why i've decided to hide the implementation using $.post
$.post('address', {"listEmty":true}, function (data) {
window.location = "address";
});
The problem with this is that it can't pass the variable at all.
My questions are:
How to handle the page refresh if using the get method, which passes the paramater in the URL,
Are there anyways in javascript/jquery to pass the variable using post method then refresh the page?
Thank you.

<FORM method="post" action="address" id="refresh" style="display: none;">
<DIV>
<INPUT type="hidden" name="addOnly" value="true">
</DIV>
</FORM>
<SCRIPT type="text/javascript">
document.getElementById('refresh').submit();
</SCRIPT>
What this does is create an invisible form, then immediately submits it. You can of course call the submit from within your other javascript code.

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?