I have a Problem with Primefaces BlockUI. After i click on the p:commandButton the form is updated and it shows the correct things, but the blockUI doesn't hide the form.
I found out there are several Problems with blockUI and p:commandButtons which uses update.
<h:form id="form">
<h:panelGroup id="askInput">
<p:inputTextarea id="sparql" value="#{connect.query}" rows="10"
cols="80" rendered="#{resultController.askStatus}"
styleClass="width size" />
<p:watermark for="sparql" value="Ask your Questions here..."
rendered="#{resultController.askStatus}" />
<h:panelGroup rendered="#{!resultController.askStatus}">
<p:dataTable var="result" value="#{resultController.maps}"
scrollRows="20" scrollable="true" scrollHeight="500"
id="results">
<p:columns value="#{resultController.header}" var="column">
<f:facet name="header"> #{column}</f:facet>
<h:outputText value="#{result[column]}" styleClass="size" />
</p:columns>
</p:dataTable>
</h:panelGroup>
<p:commandButton value="Search More NOW" id="searcher"
actionListener="#{resultController.setRs(connect.result())}"
update="form" styleClass="btn btn-primary width" />
<p:blockUI widgetVar="dlg" block="form" trigger="searcher">
LOADING<br />
<p:graphicImage value="./images/ajax-loader.gif" />
</p:blockUI>
</h:panelGroup>
</h:form>
Now i found something interesting in the deployed xhtml page:
<script id="form:j_idt31_s" type="text/javascript">
$(function()
{PrimeFaces.cw('BlockUI','dlg',
{id:'form:j_idt31',block:'form',triggers:'form:searcher'});});
</script>
And
<button id="form:searcher" name="form:searcher"
class="ui-button ui-widget ui-state-default ui-corner-all
ui-button-text-only btn btn-primary width"
onclick="PrimeFaces.ab({source:'form:searcher',update:'form'});return false;"
type="submit">
<span class="ui-button-text ui-c">Search More NOW</span>
</button>
If i copy the function of the script in the javascript console of my browser execute it.
After that exectue the onclick function of the button in the console. everything works.
So my guess is that the script isn't load and therefore it can't be invoked. So any idea how i can invoke it by myself?
If you need anything else i will put it here ;)
THANKS ALOT IN ADVANCE :)
FINALLY FOUND THE ANSWER :)
I had a jquery.js file under my resources. Primefaces provides a jquery.js itself.
After i deleted the jquery.js everything works :)
i found a solution (still not working for me, but for a co-worker of mine)
$(document).ajaxStart(function() {
PF('dlg').show();
});
$(document).ajaxComplete(function(){
PF('dlg').hide();
binding();
});
This shows on EVERY ajax start the BlockUI and hide it after the completion.
Like i said unfortunately doesn't work for me but for my co-worker, so hopefully it helps other people :)
Related
i'm trying to update (merge) a field from a ListDataModel and I'm experiencing what I think is a bug in Jsf (Mojara) 2.2. The update only works if the PrimeFaces command button is clicked twice. I've read a number of posts on here and tried the solutions but nothing seems to be working:
h:commandButton/h:commandLink does not work on first click, works only on second click
commandButton only works on the second click
p:commandButton with p:fileDownload and no ajax only works in second click
The list comes from
<h:form>
<p:dataTable value="#{proDocFolBean.selectedProDocs}" var="docs">
<p:column headerText="Document Name:">
<h:outputText value="#{docs.docName}"/>
</p:column>
<p:column headerText="Description">
<h:outputText value="#{docs.description}"/>
</p:column>
<p:column headerText="Date Created">
<h:outputText value="#{docs.dateCreated}">
<f:convertDateTime pattern="dd-MMM-yyyy" />
</h:outputText>
</p:column>
<p:column headerText="Classification">
<h:outputText value="#{docs.classification}"/>
</p:column>
<p:column>
*** <p:commandLink value="Update" action="#{proDocFolBean.prepareUpdateDoc}"/> ***
</p:column>
<p:column>
<p:commandLink id="downLoadLink" value="Download" ajax="false">
<p:fileDownload value="#{proDocFolBean.downloadFromFolders}"
contentDisposition="attachment"/>
</p:commandLink>
....
</h:form>
Clicking the Update link in the above form calls a preparedUpdate method in the bean:
public String prepareUpdateDoc() {
docToUpdate = selectedProDocs.getRowData();
selectedId = docToUpdate.getProjectDocId();
docsFacade.find(selectedId);
return "UpdateProDoc";
}
The above method populates the update form:
<h:outputScript name="js/formbugfix.js" target="head" />
<p:inputTextarea rows="30" cols="60" value="#{proDocFolBean.docToUpdate.description}" immediate="true"/>
<p>
<p:commandButton value="Change" action="#{proDocFolBean.updateProjectDoc}">
<!-- <f:ajax execute="#form"/> -->
</p:commandButton>
I included a js script although I realize that PF has already fixed view state through embedded js. I thought possibility including a script as stated in this question.
might solve the problem but it results in the same behavior.
Finally, the form calls the following merge method in the bean:
public String updateProjectDoc() {
docsFacade.update(docToUpdate);
return "ProSysHome";
}
If I try to use an h:commandbutton or set ajax to false using the p:commandButton (without the js script), the form is simply refreshed and the updated value is not merged into the database. If i use the p:commandButton on its own, I am able to get the operation working but only after two clicks. This is very odd behavior and would appreciate any help. Thanks in advance!
Well I think I solved this with Vsevolod's help. First it's totally unnecessary to use a separate js script because as Vsevolod says PF has its own fix.
Using p:commandButton alone I was getting a javascript error
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.
VM94:25 Uncaught TypeError: Cannot read property 'debug' of undefined
It seems that this error comes from the original list form at the point I click the UPDATE link to call the prepareUpdateDoc method and populate the update form. Setting the ajax to false on this column solved the problem:
<p:column>
<p:commandLink value="Update" action="# {proDocFolBean.prepareUpdateDoc}" ajax="false"/>
</p:column>
The form now works after a single click but I would still like to know if the cause was due to two repeated ajax calls (one from the list form p:commandLink and the second from the actual update call by the p:commandButton) and why the js error disappears after setting ajax to false?
I had this "2 click" problem as well. In my case the solution was to use
<p:commandLink value="Update" id="sButton" action="#{myBean.myAction}" update=":myForm"/>
and not
<p:commandLink value="Update" id="sButton" action="#{myBean.myAction}">
<p:ajax event="click" update=":myForm"/>
</p:commandLink>
I had this problem, but in my case there was ajavax.faces.application.ViewExpiredException
Here is a good article about it javax.faces.application.ViewExpiredException: View could not be restored
I'm having a error when i try to open dialog box on Primefaces, and i can't understand why this is happening.
Here my page code:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<body>
<ui:composition template="./template/template.xhtml">
<ui:define name="content">
<p:commandButton value="Abrir" oncomplete="w_dlgTeste.show()"/>
<p:confirmDialog header="Erro desnecessário." message="Não estou a entender nada." widgetVar="w_dlgTeste" />
</ui:define>
</ui:composition>
</body>
</html>
On google chrome Javascript console i see this:
Try with onclick="PF('w_dlgTeste').show()". The error that appear there is because in Primefaces 4.0 and newer, the widgets are stored in a javascript widget array and you must call PF('w_dlgTeste') to return it from the array.
Apart from that, you can have a confirmDialog without content inside but it doesn't make any sense since you can't confirm anything. You should add confirmation buttons too.
If you want the simplest way, you can do it with only javascript:
<p:commandButton onclick="return confirm('Are you sure?')" .../>
Edit:
If what you want to do is to show a dialog confirmation, the best way you should do it is like this:
Using p:confirm in each button that you want a dialog confirmation:
<p:commandButton value="Abrir">
<p:confirm header="Erro desnecessário." message="Não estou a entender nada." />
</p:commandButton>
And put the dialog with global="true" on your template because you probably want to reuse it:
<p:confirmDialog global="true">
<p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
<p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
</p:confirmDialog>
Another option would be if what you want is just a simple information dialog after the action of the button you can do it like this too:
<p:commandButton value="Abrir" oncomplete="PF('w_dlgTeste').show()"/>
<p:dialog header="Erro desnecessário." widgetVar="w_dlgTeste">
Não estou a entender nada.
</p:dialog>
I have a Button called Add oncilck of add panel needs to be displayed and within the panel there is a cancel button onclick of cancel the panel should be closed my problem is onclicking the add button the panel is coming for a moment and disapperaring. actually i have incuded template_2.xhtml which has .. if i remove from template_2.xhtml the panel is working fine but these warnings are coming like this The form component needs to have a UIForm in its ancestry. Suggestion: enclose the necessary components within i want both of things to work fine and warnings should not come .Here is my codei know the problem that i am using 2 times form in 1 xhtml page but not able to overcome that help me out
`
<h:commandButton value="Add" id="show" action="#" onclick="panelwv.show()" ></h:commandButton>
<h:form>
<p:panel id="panel" widgetVar="panelwv" visible="false" header="Add Dependents">
<h:panelGrid id="myPanel" columns="3" cellpadding="5" styleClass="text-input">
<h:outputText value=""/>
<h:outputLabel value="Name" style="font-family: cursive;font-size: 18px;font-weight:normal;"/>
<h:inputText id="name" value="#{depco.depapp.dep.name}" styleClass="border" label="First Name" />
<h:outputText value=""/>
<h:outputLabel value="Relationship" style="font-family: cursive;font-size: 18px;font-weight:normal;"/>
<h:inputText id="rel" value="#{depco.depapp.dep.relationship}" styleClass="border" label="Relationship" />
<h:outputText value=""/>
<h:outputLabel value="Date of Birth" style="font-family: cursive;font-size: 18px;font-weight:normal;"/>
<p:calendar id="dob" value="#{depco.depapp.dep.dob}" showOn="button" label="Date of Birth" />
<h:outputText value=""/>
<h:outputLabel value="Emp Id" />
<h:selectOneMenu value="#{depco.depapp.dep.empId}" >
<f:selectItems value="#{coemp.empapp.itemsAvailableSelectOne}" var="emp" itemLabel="#{emp.empId}" itemValue="#{emp.empId}" />
<f:converter converterId="employeeConverter" />
</h:selectOneMenu>
<h:outputText value=""/>
<h:commandButton value="Save" action="#{depco.createDepAction()}"/>
<h:commandButton action="#" id="hide" onclick="panelwv.hide()" value="cancel"/>
</h:panelGrid>
</p:panel>
</h:form>
`
Your Example is working fine for me, [using Primefaces 3.5 JSF 2.1.13].
It might be the problem with the buttons you used.
Usually h:commandButton will not do a Ajax submit, it submits the form untill you specify f:ajax explicitly, so that might be the reason the panel is coming and disappearing.
Use p:commandButton which does a ajax submit by default.or else use f:ajax with the h:commandButton.
Since you are not calling any ManagedBean's property or method from your h:commandButtons, you can even use h:button.
JSF menu and submenu tags should be included within form tag .so i just mage a separate jsf file with some name(say xyz.xhtml) and i just included the xyz.xhtml in actual jsf page using
In my JSF page when user clicks on 'Register' commandLink component I have to display a confirmation message to the user in a jQuery popup after doing the registration stuff.
My JSF page looks like
<h:commandLink value="Register" p:data-role="button" >
<f:ajax execute="#form" listener="#{userController.registerUser(event)}"
onevent="function(data){if(data.status==='success')
{
openDialogFunc();
}}" />
</h:commandLink>
<div data-role="popup" id="register-dialog" data-theme="a" data-overlay-theme="a">
<div data-role="header" data-tap-toggle="false">
<h1>Success</h1>
</div>
<div data-role="content">
<br/>
<p>Your user account has now been created.</p>
<br/>
<h:commandButton value="Login" p:data-role="button" action="#{userController.Login}"/>
</div>
</div>
The definition of openDialogFunc is given below:
function openDialogFunc() {
$("<a />").attr({
"href": "#register-dialog",
"data-rel": "popup",
"data-position-to": "window",
"data-theme": "a"
}).click();
}
When I click on the 'Register' button it registers the user and the openDialogFunc is called. However the jQuery popup is not displayed. Am I doing something silly here? (I am a newbie to Java/Web world).
Update:- I used component from primefaces (version 3.5) as per #BalusC's advice. But the dialog is again not displaying. I simply did the copy paste from the sample found in showcase. The browser log displayed an error message 'PF not defined'.
I used the following code to launch the dialog:
<p:commandButton id="basic" value="Basic" onclick="PF('dlg1').show();" type="button" />
which doesn't work in 3.5. Its actually a 4.0 way to display the dialog. However using the following didn't work either
<p:commandButton id="basic" value="Basic" onclick="dlg1.show();" type="button" />
Anyhow, now I am using Growl component to display the notification.
I can see there is a Dialog Framework which can be used to launch an external page into a dialog from a bean. Is it possible to use the same framework to launch a or into the dialog dynamically?
Just use a jQuery based JSF component library such as PrimeFaces. It has a <p:dialog> component for the very purpose without the need that you've to write/compose all that HTML/JS boilerplate code every time.
The showcase showcases currently PrimeFaces 4.0 compatible code, here's the PrimeFaces 3.5 compatible markup (note the <p:dialog widgetVar>, this works also in PrimeFaces 4.0, but somehow they preferred to show how to use the new PF() function):
<h:form>
...
<p:commandLink value="Register" action="#{user.register}" oncomplete="w_confirm.show()" />
</h:form>
<p:dialog widgetVar="w_confirm" header="Success">
<h:form>
<p>Your user account has now been created.</p>
<p><p:commandButton value="Login" action="#{user.login}" oncomplete="w_confirm.hide()" /></p>
</h:form>
</p:dialog>
See also:
What is the need of JSF, when UI can be achieved from CSS, HTML, JavaScript, jQuery?
ReferenceError: PF is not defined
Sorry for the question title, but I couldn't figure out a better one.
I'm using JSF 2.0 (MyFaces 2.0.2) and added RichFaces 4 (4.0.0.20101004-M3) to my project.
I found an example with RichFaces 4 (http://java.sys-con.com/node/1098139) and created a xhtml-page with the following code:
<ui:define name="webpage_main_body">
<h:form>
<h:panelGrid columns="2">
<h:outputText value="Text:" />
<h:inputText value="#{echoBean.text}">
<a4j:ajax event="keyup" render="text,count"
listener="#{echoBean.countListener}" />
</h:inputText>
<h:outputText value="Echo:" />
<h:outputText id="text" value="#{echoBean.text}" />
<h:outputText value="Count:" />
<h:outputText id="count" value="#{echoBean.count}" />
</h:panelGrid>
</h:form>
</ui:define>
As this is a Facelets page, it uses a template which defines a header (including a logo and the main navigation).
If i'm opening the page in my browser, it gets rendered correctly. The resulting HTML code of the inputbox is as follows:
<input type="text"
onkeyup="RichFaces.ajax("j_id1176210999_514e0f6c:j_id1176210999_514e0fad",event,{"parameters":{"javax.faces.behavior.event":"keyup"} } )" value="" name="j_id1176210999_514e0f6c:j_id1176210999_514e0fad" id="j_id1176210999_514e0f6c:j_id1176210999_514e0fad">
The problem is, if I enter something into the textbox, it should fire an ajax-reqest on every keyup using a Javascript-function called "RichFaces.ajax(...)". However everytime the event is fired, the Firefox Error-Console prints an Error:
Error: RichFaces is not defined
Source File: http://localhost:8080/project/richEchoTest.xhtml
Line: 1
To my question: Has anyone have an idea where this RichFaces-Javascript-Object is defined? Or is there anything i have to include within the xhtml-pages? I only included the "xmlns:a4j="http://richfaces.org/a4j", do i have to add the "xmlns:rich...." too?
Thanks in advance, I'd really appreciate any help, cause I already wasted 3 days looking into the problem.
//EDIT:
I forgot to mention that if I use the built-in jsf2 ajax-tag it works like a charm:
<f:ajax event="keyup" execute="#form" render="text count"
listener="#{echoBean.countListener}" />
This problem was solved and commented in this link. Here's an extract of relevance:
Cause:
The browser can't find references to JS and CSS libraries of RichFaces.
Solution:
Add the following tag to your JSF code:
<h:head/>