I've run into and issue with IE not allowing me to hit the enter key to submit a form. I found a partial solution (http://www.thefutureoftheweb.com/blog/submit-a-form-in-ie-with-enter) but my dialog window closes. My validations are run and the error messages are displayed. How would I keep my dialog open?
<p:dialog id="sgupdlg" header="#{bundle['signUp.HEADER']}" widgetVar="signUpDlg"
modal="true" styleClass="dialog dialog1" draggable="false"
resizable="false" showEffect="fade" hideEffect="fade" position="top">
<h:form id="signUpFrm" binding="#{signUpDetail.signUpFrm}">
<p:growl id="growl" showDetail="true" showSummary="false" life="3000" errorIcon="/images/Validation-Error.png" infoIcon="/images/Validation-Success.png"/>
<p:inputText value="#{signUpDetailBean.firstName}" name="nameInput" required="true" requiredMessage="First Name is Required"/>
<p:inputText value="#{signUpDetailBean.lastName}" required="true" requiredMessage="Last Name is Required"/>
<p:commandButton styleClass="form-btn2"
value="#{bundle['signUp.button.LABEL']}" actionListener="#{signUpDetail.signUp}" onclick="trackingSignUpOverlaySave()"
oncomplete="handleSignUpRequest(xhr, status, args)" update="growl"/>
<p:commandButton type="reset" styleClass="close" />
</h:form>
</p:dialog>
<script type="text/javascript">
$ = jQuery
$(function(){
$('input').keydown(function(e){
if (e.keyCode == 13) {
$('#signUpFrm').submit();
return false;
}
});
});
</script>
function closeWhenValidationSuccesful(dialog, xhr, status, args) {
if (!args.validationFailed) {
dialog.hide();
}
}
<p:commandButton value="Save" action="doSomething" update=":formName:panelContainingValidatedElements"
oncomplete="closeWhenValidationSuccesful(dialogWidgetVar, xhr, status, args)" />
I use the following to keep a dialog open and display validation errors. You will need to move your inputs into a panelGrid so that it can be target by the update attribute.
A simple tag would solve it.
oncomplete="if (args.validationFailed){} else {Professor.show(),Student.hide();}"
you suppose to apply this on Professor widget var
Related
I got a <h:commandButton like:
<h:commandButton id="login"
actionListener="#{bean.login}" value="Login"
styleClass="btn btn-primary btn-sm">
<f:ajax execute="#form" render="#form"/>
</h:commandButton>
and a
<p:blockUI id="block" block=":form" trigger="login" />
It is not working. The block is never shown up.
It does work with a <p:commandButton>.
How can I achieve it with a <h:commandbutton>. If that is not possible: Is there any workaround?
The <p:blockUI> listens on PrimeFaces/jQuery-specific pfAjaxSend and pfAjaxComplete events only. Those events are triggered by all PrimeFaces ajax components, but not by standard JSF <f:ajax>.
You've 3 options:
Replace <f:ajax> by <p:ajax> to let the <h:commandButton> send a PF/jQuery ajax request instead of a standard JSF one.
<h:commandButton id="login" value="Login" action="#{bean.login}">
<p:ajax process="#form" update="#form" />
</h:commandButton>
(note: carefully read Differences between action and actionListener)
Attach a global listener on <f:ajax> which auto-triggers the PF/jQuery-specific events.
jsf.ajax.addOnEvent(function(data) {
if (data.status === "begin") {
$(document).trigger("pfAjaxSend", [null, data]);
}
else if (data.status === "success") {
$(document).trigger("pfAjaxComplete", [null, data]);
}
});
Might have some undesired side-effects, though.
Manually trigger a specific <p:blockUI> during <f:ajax> events.
<f:ajax ... onevent="triggerBlockUI" />
...
<p:blockUI widgetVar="widgetBlockUI" ... />
With this JS function.
function triggerBlockUI(data) {
if (data.status === "begin") {
PF("widgetBlockUI").show();
}
else if (data.status === "success") {
PF("widgetBlockUI").hide();
}
}
Needless to say that option 1 is the most straightforward choice.
Try p:commandlink Instead. I had the same problem for h:commandlink and its solved
Primefaces actionListener is not working in p:confirmDialog . Can someone help? The saveRecord works fine in a simple dialog box.
<p:commandButton value="Save" actionListener="#{EmployeeDetailsComponent.displayInfo}">
<p:confirm header="Attention" message="test" icon="ui-icon-alert" />
</p:commandButton>
<p:confirmDialog global="true" showEffect="fade" hideEffect="explode" appendToBody="true">
<p:commandButton value="Save" action="#{TestComponent.saveRecord(TestComponent.testData)}" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
<p:commandButton value="Cancel" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
</p:confirmDialog>
You have appendToBody="true", which means there is no <h:form> to handle the click because the whole dialog content is moved directly under body. Just add the form inside the dialog.
<p:confirmDialog global="true" showEffect="fade" hideEffect="explode" appendToBody="true">
<h:form>
<p:commandButton value="Save" action="#{TestComponent.saveRecord(TestComponent.testData)}" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
<p:commandButton value="Cancel" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
</h:form>
</p:confirmDialog>
I just add a div to center the buttons and the process and the action works perfectly, example code with primefaces 5.1:
<p:confirmDialog global="true" showEffect="clip" >
<div align="center">
<p:commandButton value="Aceptar" actionListener="#{bienvenidoUI.asignarPSI()}" update="tablaProceso" icon="ui-icon-check" process="#this" styleClass="ui-confirmdialog-yes"/>
<p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
</div>
</p:confirmDialog>
and I just call the confirmDialog from inside a table with:
<p:commandButton icon="ui-icon-circle-check" title="Asignar PSI" rendered="#{bienvenidoUI.usr.idUsuario==bienvenidoUI.autorizadorId and min.estado.descripcion=='Proceso'}">
<f:setPropertyActionListener value="#{min}" target="#{bienvenidoUI.minutaSelected}" />
<p:confirm header="Confirmación" message="Esta seguro que desea asignar psi?" icon="ui-icon-alert" />
</p:commandButton>
remove appendToBody="true" from the confirm dialog component and enclose Save command buttton with in form.
<!DOCTYPE html>
<f:view xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<html lang="en">
<h:head>
</h:head>
<h:body id="top">
<h:form>
<p:commandButton value="Save" actionListener="#{simpleBean.displayInfo}" action="#{simpleBean.saveRecord}">
<p:confirm header="Attention" message="test" icon="ui-icon-alert" />
</p:commandButton>
</h:form>
<p:confirmDialog closeOnEscape="true" global="true" showEffect="fade" hideEffect="explode">
<p:commandButton value="Save" type="button" styleClass="ui-confirmdialog-yes"/>
<p:commandButton value="Cancel" type="button" styleClass="ui-confirmdialog-no"/>
</p:confirmDialog>
</h:body>
</html>
</f:view>
SimpleBean.java
#Named("simpleBean")
public class SimpleBean implements Serializable{
public void displayInfo(){
Logger.getLogger(this.getClass().getName()).log(Level.INFO, "Display Info works");
}
public String saveRecord(){
Logger.getLogger(this.getClass().getName()).log(Level.INFO, "Save Record works");
return null;
}
}
i am trying to display the message of the outcome of a validation done in managed bean in the dialog but it is not getting displayed in the dialog on submit of the form.
Please help me in fixing this
My JSF page snippet with dialog
<p:dialog header="Add LPC" id="lpcDlg" widgetVar="dlg" rendered="true"
appendToBody="true" resizable="true" modal="true" height="320px"
width="38%">
<h:form id="addLpc">
<div align="center" style="margin-bottom: 1px; padding-bottom: 1px;">
<h:outputLabel value="Add New LPC"
style="font-color:#000000;font-weight:bold;font-size:24px;padding-bottom:1px;"></h:outputLabel>
</div>
<div align="center">
<p:messages id="lpcDlgMsg" showDetail="false" autoUpdate="true"
closable="true" />
<p:messages id="lpcDlgMsg2" for="lpcDlgMessage" showDetail="false"
autoUpdate="true" closable="true" />
<h:panelGrid id="addLpcForm" columns="2" appendToBody="true">
<h:outputText value="LPC ID" />
<p:inputText id="lpcId" value="#{lpcBean.lpcId}" required="true"
requiredMessage="LPC ID is required">
<f:ajax event="blur" render="lpcDlgMsg" />
</p:inputText>
<h:outputText value="First Name" />
<p:inputText id="firstName" value="#{lpcBean.firstName}" />
.
.
.
.
</h:panelGrid>
</div>
<div align="center">
<p:commandButton id="submitButton" value="Submit" ajax="true"
update=":lpcForm:lpcDataTable,addLpc"
action="#{lpcBean.formSubmit}" oncomplete="dlg.hide()" />
<p:commandButton id="cancelButton" value="Cancel"
onclick="dlg.hide()" />
</div>
</h:form>
</p:dialog>
message with id lpcDlgMsg2 is the message i am trying to display on submit.The other message is getting displayed correct on blur.
Snippet of the method that is called on submit
public void formSubmit()
{
if(resultSet.next())
{
int lpcIdCount=rs.getInt("lpcCount");
if(lpcIdCount!=0)
{
FacesContext.getCurrentInstance().addMessage("lpcDlgMessage", new FacesMessage(FacesMessage.SEVERITY_ERROR," ", "Duplicate LPCID"));
System.out.println("after display");
}
else
{
.
.
.
.
}
}
}
}
Here is my suggestion:
<p:dialog header="Add LPC" id="lpcDlg" widgetVar="dlg" rendered="true"
appendToBody="true" resizable="true" modal="true" height="320px"
width="38%">
<h:form id="addLpc">
<div align="center">
<p:messages id="lpcDlgMsg" showDetail="false" autoUpdate="true"
closable="true" />
<h:panelGrid id="addLpcForm" columns="2" >
<h:outputText value="LPC ID" />
<p:inputText id="lpcId" required="true" />
<h:outputText value="First Name" />
<p:inputText id="firstName" required="true" />
</h:panelGrid>
</div>
<div align="center">
<p:commandButton id="submitButton" value="Submit"
oncomplete="if (!args.validationFailed){dlg.hide();}" />
<p:commandButton id="cancelButton" value="Cancel"
onclick="dlg.hide()" />
</div>
</h:form>
</p:dialog>
Note that I've simplified your code in order to avoid using a managedbean.
If you want your managed bean to perform the validation, use RequestContext to conditionally execute the code that will close the dialog and remove the oncomplete from Submit button.
if (success) {
RequestContext.getCurrentInstance().execute("dlg.hide()");
}else{
//show all the messages you need here
}
You have to add this javascript first inside head tag
function handleComplete(xhr, status, args) {
if (!args.validationFailed) {
dlg.hide();
} else {
}
}
More changes are
<p:commandButton id="submitButton" value="Submit" ajax="true"
update=":lpcForm:lpcDataTable,addLpc :lpcDlgMsg2"
actionListener="#{lpcBean.formSubmit}" oncomplete="handleComplete(xhr, status, args)" />
action to actionListener because action has String return type.
This will work fine.
I am trying to replicate primefaces ajax dialog form as in Primefaces showcase
My JSF code snippet is as below
<h:body>
<p:commandButton id="showDialogButton" type="button" value="Show"
onclick="PF('dlg').show()" />
<p:dialog header="Enter FirstName" widgetVar="dlg" appendToBody="true"
resizable="false">
<h:form id="form">
<h:panelGrid columns="2" style="margin-bottom:10px">
<h:outputLabel for="firstName" value="firstName:" />
<p:inputText id="firstName" value="#{backingBean.firstName}" />
</h:panelGrid>
<p:commandButton id="submitButton" value="Submit" update=":display"
oncomplete="PF('dlg').hide();" />
</h:form>
</p:dialog>
<p:outputPanel id="display" style="display:block;margin-top:10px;">
<h:outputText id="name" value="Hello #{backingBean.firstName}"
rendered="#{not empty backingBean.firstName}" />
</p:outputPanel>
My managed bean
#ManagedBean
#ViewScoped
public class BackingBean implements Serializable{
private String firstName;
public String getFirstName() {
return firstName;
}
public void setFirstName(String firstName) {
this.firstName = firstName;
}
}
No dialog is getting displayed on clicking submit button :(. I have also included appendToBody="true" but no result.In ie i get javascript error as "Object Expected". Please help me out to solve this issue.
which version of primefaces you use ?
If you use Primefaces 3.5 or older:
<p:commandButton id="showDialogButton" type="button" value="Show"
onclick="dlg.show()" />
For Primefaces 4.0 :
<p:commandButton id="showDialogButton" type="button" value="Show"
onclick="PF('dlg').show()" />
In my case I had a script link to jquery in header. I droped it and primefaces started to work correctly
Is it possible to update view parameter without redirecting the page? For instance
I have a managed bean which checks if an ID exist
public void signIn(){
Client c = clientFacade.loginDetail(client.getID());
if (c != null) {
loggedIn = true;
}
else{
loggedIn = false;
}
}
and a view which renders just fine if the ID exist.
<h:panelGroup rendered="#{not applicationManager.loggedIn}">
<p:commandLink value="Sign In" onclick="loginDialog.show()" styleClass="login-link"></p:commandLink>
</h:panelGroup>
<h:panelGroup rendered="#{applicationManager.loggedIn}">
<p:menuButton value="#{applicationManager.client.firstname}" />
</h:panelGroup>
<p:dialog widgetVar="loginDialog" >
<h:panelGrid columns="2" cellpadding="5">
ID : <p:inputText value="#{applicationManager.client.id}" />
<p:commandButton value="submit" action="#{applicationManager.signIn()}" update=":loginForm" />
</h:panelGrid>
</p:dialog>
Is it possible to insert the code below at the top of the view and still have an update on the url?
<f:metadata>
<f:viewParam name="input" value="#{applicationManager.client.id}" />
<f:event listener="#{applicationManager.signIn()}" type="preRenderView"/>
</f:metadata>
I tried it, but it's not working, so I guess I might be missing something or doing something wrong.