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>
Related
In my xhtml, inside a <h:form> tag I have multiple panels, a4j:jsFunction and rich:popupPanel and a rich:panel. In my rich:panel I have a few text areas. Then, in another panel, inside a rich:popupPanel I have an a4j:commandButton that calls a a4j:jsFunction. What I want is when the a4j:commandButton is clicked, all data from rich:panel to be submitted. The following code is not submitting anything.
<h:form id="createId">
<h:panelGrid columns="1">
<rich:panel
style="border-width: 1px; border-color: #6B489D; padding:30px">
<rich:panel style="width:100%" >
<fieldset>
<table ...>
...some outputText, inputText...
</table>
</fieldset>
</rich:panel>
<rich:popupPanel id="confirmEditPane" autosized="true">
<a4j:commandButton value="Cancel" onclick="#{rich:component('confirmEditPane')}.hide(); return false;" />
<h:outputText value=" " />
<h:outputText value=" " />
<a4j:commandButton value="Edit" onclick="edit(); return false;" />
</rich:popupPanel>
</h:form>
Try adding the attribute domElementAttachment="form" to your popuppanel.
I managed to resolve this by adding <p:ajas event="valueChange"/> inside every panel containing textboxes and now everytime I change the value inside a textbox it gets sent to the server. Thank you for your contribution.
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 :)
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/>