I am new to primefaces and already facing problems with the "selectOneMenu" component. I have implemented a mainMenu.xhtml file, which is visible on all my pages. This mainmenu has a "selectOneMenu" component for language Change. The "selectOneMenu" does not open on the start page and several other pages, but there are also pages where it opens and works as it should. I've searched the net for a couple of days now, and couldn't find any hint or suggestion, that solved my Problem.
Would be very nice to find some help here.
See code below: Identity_Session is a #SessionScoped-bean; The "languageSet" is a HashMap of (String, Integer) pairs.
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
</h:head>
<h:body>
<h:form>
<p:panel>
<h:panelGrid columns="2" cellpadding="5" style="right: 700px; position: absolute; margin-top: -7px;" rendered="#{identity_Session.showMenuLogout()}">
<p:outputLabel for="languageComboBox" value=" #{identity_Session.translate('outputlabel_language')}:" style="font-weight:bold"/>
<p:selectOneMenu id="languageComboBox" value="#{identity_Session.languageID}" style="width:150px">
<p:ajax listener="#{identity_Session.translationAction()}" update="#all" delay="1000"/>
<f:selectItems value="#{identity_Session.getLanguageSet()}" />
</p:selectOneMenu>
</h:panelGrid>
</p:panel>
</h:form>
<br/>
<br/>
</h:body>
</html>
UPDATE!!!
I am using the same selectOneMenu with the same values (as described above) on the same webPage. When I place the selectOneMenu in the "west"-layoutUnit it does not open, but when I place it in the "east"-layoutUnit it opens. Is this actually a "PrimeFaces"-Bug, or am I missing something?
Try to change
</f:panel>
to
</p:panel>
Related
I have copy-pasted the Datepicker example (html + bean) from PrimeFaces showcase (https://www.primefaces.org/showcase/ui/input/datePicker.xhtml), BUT the popup does not show on my application for any of the examples (it shows ok at showcase, so it's not a browser problem).
clicking on p:calendar gives this error :
now, clicking/refreshing around like a madman I somehow managed to get the popups showing...but I found these errors in console :
Do you have any ideas what is going on? Thank you.
Edit1 :
I'm trying to make a date range filter in PrimeFaces p:dataTable using p:datePicker widget.
The problem is - the datePicker popup is hidden behind p:dataTable rows.
source code :
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<p:outputPanel id="test1">
<p:dataTable value="#{myOrdersBean.addresses}" var="address"
widgetVar="addressTable" filteredValue="#{myOrdersBean.filteredAddresses}">
<p:column headerText="Pickup time" sortBy="#{address.pickupTime}"
filterBy="#{address.pickupTime}" filterFunction="#{myOrdersBean.filterByDate}">
<f:facet name="filter">
<p:datePicker selectionMode="range" value="#{myOrdersBean.pickupDateRange}"
readonlyInput="true" pattern="dd.MM.yyyy" onchange="PF('addressTable').filter()"/>
</f:facet>
<p:outputLabel value="#{address.pickupTime}">
<f:convertDateTime pattern="dd.MM.yyyy HH:mm"/>
</p:outputLabel>
</p:column>
</p:dataTable>
</p:outputPanel>
</html>
Question #1: How do I display Datepicker reliably?
Question #2: How do I show the Datepicker popup in front of the Datatable rows?
Thank you
the JQuery errors and datepicker not showing was because my <head> element did not contain datepicker.js.jsf resource
<script type="text/javascript" src="/javax.faces.resource/datepicker/datepicker.js.jsf?ln=primefaces&v=7.0"/>
the datepicker overlay was fixed by adding appendTo="#(body)"
thank you!
Following the instructions given on the PrimeFaces getting-started page, I am seeing an odd rendering from SelectOneMenu. It doesn't look the way I'd expect. Does anyone know why?
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:body>
<h:form>
<p:selectOneMenu id ="selectOneMenuCategorie" value="#{selectOneController.categorieSelected}" >
<f:selectItem itemLabel="Select One" noSelectionOption="true"/>
<f:selectItems value="#{selectOneController.categorieList}"
var = "c" itemLabel="#{c.libelle}" itemValue="#{c}"/>
<f:ajax render="selected_item1"/>
</p:selectOneMenu>
<h:outputText id="selected_item1" value="#{selectOneController.categorieSelected.libelle}"></h:outputText>
</h:form>
</h:body>
</html>
You should add
<h:head>
</h:head>
tag to your xhtml page.
The <h:head> is a JSF component which provides a hook to programmatically include JavaScript and CSS resources in the generated HTML <head>. PrimeFaces uses it to include the necessary JS/CSS code for the Ajax works and fancy look'n'feel.
As a test, create a page with a <h:head> and a PrimeFaces component, open the page in the webbrowser and check the generated HTML source by rightclick - View Source. You'll see that several JSF and PrimeFaces specific JS/CSS files are been added. Now replace <h:head> by <head> and check the generated HTML source once again, you'll see nothing this time.
I´m using JSF2.0 and primefaces 3.4 in my web project
simply.... when I copy the code for p:dialog from show-case of
primefaces to my project, it doesn't work, the dialog window doesn't appear
(the first dialog I put is the real one I want in my page... but actually the problem is...)
It seems like something in my project is not working in the right way... I´m just copying the code from prime-faces show-case to my page, but in my page the commandButtons to show the p:dialogs don´t work, the p:dialog is not showed. This is the web page I tested and not work for me:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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:ui="http://java.sun.com/jsf/facelets">
<ui:composition template="../template/template.xhtml">
<ui:define name="main">
<h:form id="form">
<h:panelGrid columns="1" cellpadding="5">
<p:commandButton id="basic" value="Basic" onclick="dlg1.show();" type="button" />
<p:commandButton id="modalDialogButton" value="Modal" onclick="dlg2.show();" type="button"/>
<p:commandButton id="effectsDialogButton" value="Effects" onclick="dlg3.show();" type="button" />
</h:panelGrid>
<p:dialog id="basicDialog" header="Basic Dialog" widgetVar="dlg1">
<h:outputText value="Resistance to PrimeFaces is futile!" />
</p:dialog>
<p:dialog id="modalDialog" header="Modal Dialog" widgetVar="dlg2" modal="true" height="100">
<h:outputText value="This is a Modal Dialog." />
</p:dialog>
<p:dialog header="Effects" widgetVar="dlg3" showEffect="explode" hideEffect="bounce" height="100">
<h:outputText value="This dialog has nice effects." />
</p:dialog>
</h:form>
</ui:define>
</ui:composition>
</html>
Where's your code showing the dialog? Something similar to
<p:commandButton id="button" value="Open Dialog" oncomplete="PF('dialog').show();"/>
The editor doesn't appears in my IE window while it works correctly in chrome
I have implemented p:layout and in the center layoutunit I am including the template.xhtml using ui:include which is enclosed in a
<h:form id="centercontentpanel">
Kindly guide me with what corrections needs to be done to make it visible in IE 8
Template.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<h:body>
<f:view>
<p:editor id="editor" value="#{editorBean.value}"/>
<h:panelGrid columns="2" style="margin-top:10px">
<p:commandButton id="submitButton" value="Submit" update="display" oncomplete="editordlg.show()"
icon="ui-icon-disk" />
<p:commandButton id="clearButton" type="button" value="Clear" onclick="editor.clear()"
icon="ui-icon-close"/>
</h:panelGrid>
<p:dialog header="Content" widgetVar="editordlg" showEffect="fade" hideEffect="fade" modal="true">
<h:outputText id="display" value="#{editorBean.value}" escape="false" />
</p:dialog>
</f:view>
</h:body>
</html>
For all i know, the IE 8 doesn't support Primefaces Editor, still in IE 11.
Actually i can render it, but nothing works, not even the bold/italic/underline.
I think it's because the way IE process javascript... but i don't know much about technical issues.
(My tests were done on IE 11 and Primefaces 4.0, plain programming, didn't twitch anything)
Only for the RichText i'm using the HTML5 library wysihtml5 (GIT)
EDIT:
I'm sorry, i just stumbled on the answear to my problem (Editing on IE), hope it fixes yours
Just add contentType="text/html" to the <f:view> like this <f:view contentType="text/html">
Here is the post from Optimus (Even though it's a rendering problem for chrome)
I want to create a xhtml page which contains a dataTable for certain entities, to navigate between the entities i though i could use the TabMenu. But after the implementation the tabMenu menuItems are only showed as simpel links and not how the primefaces example:
My code:
<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">
<h:body>
<h:form>
<p:tabMenu activeIndex="0">
<p:menuitem value="Customers" url="customerTableView.xhtml" icon="ui-icon-document"/>
<p:menuitem value="Orders" url="orderTableView.xhtml" icon="ui-icon-document"/> Vie
</p:tabMenu>
</h:form>
</h:body>
Cant find the reason why its not correctly rendered, i also tried diffent browsers.
I simply didn't notice that the "head"-tags are missing. Adding them solved the problem.