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?
Related
I know that AJAX could solve my issue. I need help how I can solve it in my specific case however. I manage some sortiment items on a page, they get displayed with a PHP script (checks the database, if the item is available, and if so, it gets displayed). I now want an admin page where I can kind of "toggle" via a sortiment table to display or not display an item (set it as available or non available.
What I need is: if the button is clicked, I would like to start a php-skript. There should be an value passed to that script (the button id). The script itself should open an SQL connection, change a DB value based on the passed ID of the button. Then close the connection. Optionally also refresh the table (or one value) from where the button was clicked.
Can someone help me, at least telling me what I need to do this? (jQuery, Ajax?). The passing of the ID would be important, else I'd need to do function for every button.
An table entry looks like this:
<tr>
<td>Himbeerhonig</td>
<td id="himbeerhonig">Ja</td>
<td><button type="button" id="himbeerhonig" onclick="function()">press me to execute function</button></td>
</tr>```
(possible PHP pseudocode)
open SQL connection
look for database entry based on the passed ID
change the value of the found entry (!currentValue)
close SQL connection
*optionally*
refresh the <td id="himbeerhonig"> with the updated value.
I appreciate any help very much! Just need some hints as to how to do it properly. It's just a concept that currenty is hard to grasp for me so far.
1- If you want to do this with ajax (without browser refresh), you should create a separate php file, and put your php scripts in there. it's called api (api has special format for output, so search create api in php if you want to do this). then on javascript, you should do an ajax call to that php address, on onclick event of button. and then javascript will return data and you can create elements based on that data.
2- however you can do this without ajax(it will refresh browser). just write your inline phps as you wrote :
<html>
<!-- your html codes-->
<?php
if($_GET['buttonClicked']){
//put your php codes here to run when button clicked
?>
<!-- you can even put html here, even it can be on php loop. -->
<?
}
<!-- your html codes-->
<!-- turn your button to a form-->
<form action="/" method="get">
<input name="buttonClicked" hidden value='1'>
<input type="submit" value="Submit">
</form>
</html>
it's as easy as this. when button clicked, a get request will send to current page, and php will handle it, for example it will render additional html elements to the page.
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
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());
I'm working on a website project from scratch. The content section of the main page has a form and a div of class "blog". When the user is logged in on the admin account, the form shows up. This allows you to pick a title and content to post in the blog. The current code works well, except for the fact that the posts are removed when the page is refreshed. How I can permanently add this to the page?
Here's my code:
<script type="text/javascript">
function addtext() {
var title = document.blogform.title.value;
var content = document.blogform.content.value;
var $blogTitle = $('<div class="blogtitle">' + title + '</div>');
var $blogContent = $('<div class="blogbody">' + content + '</div>');
$('#blog').prepend($blogContent);
$('#blog').prepend($blogTitle);
}
</script>
<h2>Submit New Blog Post</h2>
<div class="blogtitle">Submit a new blog post:</div>
<div class="blogbody">
<form name="blogform">
<fieldset class="fieldsetoffset"><legend>Post</legend>
<div>Title of Post:</div>
<input type="text" name="title">
<div>Content of Post:</div>
<textarea name="content" class="comment" rows="6" cols="88"></textarea>
<hr>
<input type="button" value="Add New Text" onClick="addtext();">
</fieldset>
</form>
</div>
<div id="blog"></div>
You should use a database (or flat-files, but not recommended..) to store those extra parts. On your page, create a database connection (php.net/PDO), fetch any existing records from the database and when the admin stores it you should insert it into your database.
HTML is flat, you can add and delete elements dynamically by altering the DOM but that's only on your screen and nobody elses :)
I assume that this is a static HTML page. Otherwise you would be refreshing from a server-based data source. If you are going to be doing this, then the only other way would be to store the data as client-side cookies.
You can't do this by Javascript or jQuery because they are client side languages.
for this which you want to achieve you have to use a Server Side Language and database
Javascript is client side, meaning when you add content to the page with jQuery it's local to your browser only, not on the server-side (it's not actually changing the website, it's just changing what your browser is rendering).
You will need to either use cookies (there is a great jQuery cookies plugin that's incredibly simple to use) or, preferably, have some kind of server-side script store it in the database and retrieve the values later, i.e. with PHP/mySQL, since cookies are still going to be specific to you rather than anyone who might visit the website. If nothing else you could use PHP to write it to a text/html file on the server that is then displayed later but that's a really ugly solution and a database is really where you should be going here.
I would probably use jQuery's AJAX functions to call a PHP function when addtext() is triggered that passes it the content and title values to write to the database. Then add a bit of php code on the page to check the database for existing posts and display them.
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