Display dialog from backing bean in primefaces mobile - jquery-mobile

I am doing mobile conversion of our website using PF mobile. In that I am trying to open views in a dialog using Primefaces mobile. It works just fine in desktop browser but not in mobile version. The page keeps waiting to load but nothing happens. Is it not implemented in PF mobile or is something wrong with my code?
Following is the view - webapp/m/dlg/sampledlg.xhtml
<!DOCTYPE html><html 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"xmlns:pm="http://primefaces.org/mobile"><f:view renderKitId="PRIMEFACES_MOBILE" /><h:head></h:head><h:body><pm:page id="main"><pm:header title="Main Page">/pm:header><pm:content><p:link outcome="pm:second" value="Go" /></pm:content></pm:page><pm:page id="second" lazy="true"><pm:header title="Second Page"></pm:header><pm:content>Sample content</pm:content></pm:page></h:body></html>
Following is the code from the backing bean.
RequestContext.getCurrentInstance().openDialog("dlg/sampledlg");
return;
Also basic dialog like the following that displays only a message doesnt work either in mobile pages. It works in desktop though.
RequestContext.getCurrentInstance().showMessageInDialog("This is sample text");
face-config.xml has the following:
<navigation-handler>
org.primefaces.application.DialogNavigationHandler
</navigation-handler>
<view-handler>org.primefaces.application.DialogViewHandler</view-handler>
<navigation-handler>org.primefaces.mobile.application.MobileNavigationHandler</navigation-handler>
I can absolutely add more information if needed. Any help here is much appreciated. Thank you in advance.
Here is my platform information:
- Tomee 7.0.0 M3
- Primefaces 6.0
- Jsf 2.2.12
- Jdk 1.7
- Jee 7

Working solution:
bean:
...
RequestContext.getCurrentInstance().execute("PF('dlgDelete').show();");
xhtml:
...
<p:dialog header="confirmation" widgetVar="dlgDelete" >
<p:outputLabel value="Are you...?"/>
<p:commandButton value="yes" action="#{appBean.deleteMethod()}" update="tblParts" oncomplete="PF('dlgDelete').hide();" icon="ui-icon-check" iconPos="right" styleClass="ui-btn-inline"/>
<p:commandButton value="no" onclick="PF('dlgDelete').hide();" icon="ui-icon-forbidden" iconPos="right" styleClass="ui-btn-inline"/>
</p:dialog>

Related

prime faces ajax not working

We have a JSF project with the following versions of JARs:
Prime Faces 5.1
JSF 2.0
Javaee-api 5
But the Project Facets(in eclipse) defines JSF 2.2, we never changed it.
JPA 2 ( javaee-api 5)
Ejb 3.0
Our ajax is not working.
<p:selectOneRadio id="enrolledInPlanFlag" value="#{phInfoBean.enrldPlanFlag}" label="Action" >
<f:selectItem itemLabel="Yes" itemValue="Yes" />
<f:selectItem itemLabel="No" itemValue="No" />
<p:ajax process="enrolledInPlanFlag" update="#form"/>
</p:selectOneRadio>
<p:dialog id="dialog" header="APTC Warning" widgetVar="dlg1" modal="true" height="200" width="500" resizable="false" rendered="#{phInfoBean.enrldPlanFlag eq 'Yes'}">
I am trying to display dialog based on the selectOneRadio. But the AJAX is not working and we have the wierd situation where sometimes it works and sometimes it not.
We have annotated managed bean with #ViewScoped.
Please help.
Make it work
You never show your dialog in your code. You could attach an oncomplete event to your p:ajax
<p:ajax process="enrolledInPlanFlag" update="#form" oncomplete="PF('dlg1') != null ? PF('dlg1').show() : ''" />
The condition PF('dlg1') != null is required as if you choose "No" your dialog is no longer rendered in your page, therefore PF('widgetVarOfDialog') is unreachable.
Additional notes
I would improve this code by:
Changing enrldPlanFlag to a boolean instead of a string (cleaner IMO)
Display the dialog programatically in an listener (called from your p:ajax) if the boolean is true
Why? To leave the logic in your bean instead of your .xhtml page

Primefaces Command button hangs IE 9 browser

I've been working with JSF and primefaces for past 2 years. I'm facing an issue with the Primefaces CommandButton while using <p:commandButton> with <f:setPropertyActionListener> specifically in IE 9 (works fine in IE 8, IE 10 and IE 11).
Below is the code I'm using
<p:commandButton styleClass="btn-primary-starr btn-starr right-align-only" value="#{traveldictionary['travel.tile.traveler.Continuebutton']}" update=":tabContent :createQuotePage" process=":tabContent">
<f:setPropertyActionListener target="#{DeleteTravelerDetailManagedBean.ajaxMap['DeleteNoteMessage']}"
value="false" />
<f:setPropertyActionListener
target="#{headerApplicationManagedBean.ajaxMap['Object::Tab::Active']}"
value="payment">
</f:setPropertyActionListener>
<f:setPropertyActionListener
target="#{headerApplicationManagedBean.ajaxMap['Object::Tab::GetQuotes']}"
value="show">
</f:setPropertyActionListener>
<f:setPropertyActionListener
target="#{headerApplicationManagedBean.ajaxMap['Object::Tab::Save::travelerinformation']}"
value="true">
</f:setPropertyActionListener>
</p:commandButton>
When this command button is clicked the IE 9 browser force closes
But works on all other browsers including IE 8, IE 10 and IE 11. I did some research to find out if there were any known issues with IE 9 and Primefaces but no luck.
It would be really helpful if someone could shed some light on this. Thanks in advance.

Textbox Focus in Richfaces

I have make sample project of focus in textbox from the demo of Richfaces Showcase. I use JSF 2.0, Richfaces 4.3.0 Final.jar and Jboss 7 server. I can sucessfully run the project but focus did not work. When I press the tab key, focus arrives at the textbox. If there is anything I need to congifure, please advise me.
Thanks in advance.
Finally, I got it. I put the javascript code in the jsf form just like this.
<h:form id="frm">
<script type="text/javascript">
window.onload = function() {
document.getElementById('frm:txtStaffId').focus();
}
</script>
...
...
<h:inputText id="txtStaffId"/>
...
...
</h:form>

Calendar popup of Richfaces or Primefaces not working

I have added richfaces 4.3.0 jars in my project and also tried with primefaces3.4.2 in netbeans 7.2.1
I am trying to use calendar component in my project but when I am using richfaces or primefaces calendar popup doesn't appear and it remains and it is or its not giving any error
I have used the following code in my .xhtml file
<rich:calendar id="givenDate" enableManualInput="true" style="width:60px" datePattern="MM/dd/yyyy" value="#{NewClass.ts}" immediate = "true" required="true" popup="true" />
In the java bean I have used the variable of java.util.Date type with getter and setter method.
Can Anybody please point me what I am doing wrong.
Solved:-
I forgot to add h:head tag in xhtml page thats why neither richfaces not primefaces was working.
Primefaces calendar width change size tag
<p:calendar size="7" />

JSF 2. How do I force close a popup window before continuing navigation?

I have this piece of code for render a popup, using f:ajax:
<h:commandButton id ="botonAcceso"
value="#{msg['login.enter']}"
styleClass="botonPeque"
action="#{usuarioAuditoriaLogBean.entraAplicacion}">
<f:ajax disabled="true"
render=":login:errorAcceso"/>
</h:commandButton>
<h:panelGroup rendered="#{usuarioAuditoriaLogBean.popup}" id="errorAcceso">
<ui:fragment>
<script>window.open('#{usuarioAuditoriaLogBean.url}');</script>
</ui:fragment>
</h:panelGroup>
I want the person, who is trying to log, must first close the popup if the logging process fails, to try to log again. How can I do that?
Many thanks.
INMO you should not use widnow.open in this scenario... cause you have no control over it after its being opened , instead
1) You can use a third party JSF Components Library like Primefaces , they got Modal Dialog
2)You can use jQuery Modal Dialog , here an example

Resources