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
Related
I want to validate my inputText field, which is in a popupPanel. It should contains only numbers.
<h:form>
<h:outputText value="Input:"/>
<h:inputText id="myID" value="#{myBean.field}"
validatorMessage="Only numbers">
<f:validateRegex pattern="([0-9])*$" />
<rich:validator />
<a4j:ajax event="change" render="msgValidator" />
</h:inputText>
<h:message id="msgValidator" for="myID" styleClass="text_colorRed" />
</h:form>
After all I want to save all with button. If the input is correct I want to close the popup, otherwise I want to re-insert the correct input without closing popup.
<a4j:ajaxButton type="submit" value="Save" styleClass="text_weigthBold"
action="#{myBean.save()}" render="myTable"
oncomplete="#{rich:component('myPopup')}.hide();" execute="#this">
</a4j:ajaxButton>
Unfortunately when I type wrong input and click two times on the button, it save the request and close the popup without requesting to input the correct text.
I also used a Java validator but the behavior is still the same.
What can I do to correct this bug?
This is because you're closing popup unconditionally. You must check yourself if validation was OK. In JSF 2.0 you can use FacesContext#isValidationFailed().
<a4j:commandButton execute="#form" value="Save" styleClass="text_weigthBold"
oncomplete="if (!#{facesContext.validationFailed}) {#{rich:component('myPopup')}.hide();}"
action="#{myBean.save}" render="myTable" />
To check also other errors you can use facesContext.maximumSeverity.ordinal gt 0 or facesContext.maximumSeverity != null.
I don't know RF 3.X (and you didn't tell if you're using RF 3 or 4) but it looks like it never had component named a4j:ajaxButton, did you mean a4j:commandButton? Also note that I've changed action="#{myBean.save()}" to action="#{myBean.save}" which is corrent.
Resolved. In the form there were some h:checkbox, I remove the checkboxes and now it works fine. I dont know why the Richfaces checkbox doesn't work correctly but I replace them with HTML checkbox.
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 basic web page that uses a simple javascript validate function to verify field content before returning TRUE to allow submission. If validate is false, then it just displays an alert() and returns FALSE.
However, I need to modify this, so that if everything validates, a pop-up appears that says "You are about to submit this form and agree to XYZ. Click OK to continue, Cancel to leave, or Print to print this page"
In other words, I need an alert box with an OK, CANCEL, and PRINT button (the print button actually would print the page itself and then allow user to click OK and move forward with the submit command.
** EDIT: I should have clarified, using a modal pop-up is causing that modal to appear in the print screen. so maybe a close.modal followed by a print.screen set of commands? library isn't an option because we are confined to a single page with no external loads of any kind because this is inside of a banking platform and they only allow html/inline-css/on-page javascript.
You need to use a custom code to do this since there is no way to add buttons to window.confirm.
Libraries like jQuery UI, YUI, DOJO, etc have a modal dialogs which would allow you do do something like that.
http://jsfiddle.net/QRm4c/1/
You could always just use a <div> to make a fake one.
<div id="confirmation">
<p>Blah, blah, blah</p>
<form>
<input type="button" name="ok" id="ok" value="OK" />
<input type="button" name="cancel" id="cancel" value="Cancel" />
<input type="button" name="confirm" id="confirm" value="Confirm" />
</form>
</div>
epascarello is right, window.confirm can't do this.
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/>
I am using JSF2 and Java to build a web application. I want to build a form like the one at the picture below:
When somebody unchecks the checkbox the form should disappear:
Here is an example with gwt.
So far,
I tried some stuff with the <f:ajax> tag and an PropertyActionListener in the managedBean but it didn't work. Can somebody give me an example or at least some hints to accomplish my goal. I would be really thankfull
Use <f:ajax render="idOfPanelContainingInputFields"> in the checkbox and give the component containing the input fields a rendered attribute which depends on the checkbox's state. No need for another JS code clutter.
<h:form>
<fieldset>
<legend>
<h:selectBooleanCheckbox binding="#{showUserInfo}">
<f:ajax render="idOfPanelContainingTextBox" />
</h:selectBooleanCheckbox>
<h:outputText value="User information" />
</legend>
<h:panelGroup id="idOfPanelContainingTextBox" layout="block">
<ui:fragment rendered="#{not empty showUserInfo.value and showUserInfo.value}">
<p>
<h:outputLabel for="firstName" value="First name:" />
<h:inputText id="firstName" value="#{bean.user.firstName}" />
</p>
</ui:fragment>
</h:panelGroup>
</fieldset>
</h:form>
The above example binds the checkbox to the view, you can of course also bind it to a boolean bean property, you can then remove the not empty check from the rendered attribute.
<h:selectBooleanCheckbox value="#{bean.showUserInfo}">
...
<ui:fragment rendered="#{bean.showUserInfo}">
See also:
How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"
Why do I need to nest a component with rendered="#{some}" in another component when I want to ajax-update it?
As suggested by amorfis, the idea of using Ajax here is not the best solution, as you will do a call to your server for a client-side manipulation.
The best solution is to use Javascript to hide your component(s). For example, if all your labels and input texts are nested in a <h:panelGrid> component, you can do that:
<script type="text/javascript">
function hideOrShow(show) {
// Get the panel using its ID
var obj = document.getElementById("myForm:myPanel");
if (show) {
obj.style.display = "block";
} else {
obj.style.display = "none";
}
}
</script>
<h:form id="myForm">
<h:selectBooleanCheckbox id="myCheckbox" onclick="hideOrShow(this.checked);"/>
<h:panelGrid id="myPanel" columns="2">
...
</h:panelGrid>
</h:form>
You could do it by jQuery, or another JavaScript. It is also possible by <f:ajax>, but it connects to the server, which you don't need here.
By jQuery you can just hide the form, not changing the DOM. As far as I understand, it should be enough.
Post some .xhtml if you want more :)