Hey trying to disable/enable inputText based on a change event when a selectBooleanCheckbox is selected/unselected. Currently though, regardless of what whether or not the checkbox is selected, the inputText will always be disabled. Do I need to instead attach a listener to the checkbox? It seems in this case the inputText is never getting re-rendered.
HTML:
<div>
<p:outputLabel for="#next" value="Additional Time: " />
<p:selectBooleanCheckbox value="#{dialogView.additionalTime}" ajax="true" event="change" update="hour"/>
</div>
<div>
<p:outputLabel for="hour" value="Hour:" />
<p:inputText id="hour" value="#{dialogView.hour}" disabled="#{!dialogView.additionalTime}" label="Hour" />
</div>
Tested on PrimFaces 6.0,6.1 and 6.2
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:fn="http://java.sun.com/jsp/jstl/functions">
<h:head>
<title>PrimeFaces Test</title>
</h:head>
<h:body>
<h:form>
<div>
<p:outputLabel for="#next" value="Additional Time: " />
<p:selectBooleanCheckbox value="#{dialogView.additionalTime}">
<p:ajax update="hour"></p:ajax>
</p:selectBooleanCheckbox>
</div>
<div>
<p:outputLabel for="hour" value="Hour:" />
<p:inputText id="hour" value="#{dialogView.hour}" disabled="#{!dialogView.additionalTime}" label="Hour" />
</div>
</h:form>
</h:body>
</html>
Related
i'm using jsf 2.2 primefaces 6.0 and i'm trying to add "pt:data-tooltip" on my commandButton but it seems that this attribute is unknown.I need help to make it acceptable.
Here the xhtml code of all the xhtml page:
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<ui:composition template="/facelets/template.xhtml">
<ui:define name="content">
<ul class="breadcrumb">
<li><i class="ace-icon fa fa-home home-icon"></i> Acceuil</li>
<li class="active">espace Administrateur</li>
</ul>
<!-- /.breadcrumb -->
</ui:define>
<ui:define name="pageContent">
<h:form id="form">
<p:panel header="ajouter Acte Médical">
<p:messages />
<p:panelGrid id="pan" columns="3">
<p:outputLabel value="Type acte medical *:" />
<p:inputText value="#{acteBean.acteMedical.typeActe}" id="input1"
placeholder="Type de l'acte médical" required="true"
requiredMessage="indiquez une valeur">
<f:validator validatorId="av" />
<p:ajax event="blur" update="button" process="#form"/>
</p:inputText>
<p:message id="m1" for="input1" />
<p:outputLabel value="Plafond *:" />
<p:inputNumber id="i1" value="#{acteBean.acteMedical.plafond}"
symbol=" DT" symbolPosition="s" placeholder="Plafond total"
decimalSeparator="," thousandSeparator="."
disabled="#{not empty acteBean.acteMedical.pourcentage}">
<f:ajax event="keyup" render="i2" />
</p:inputNumber>
<p:message id="m2" for="i1" />
<p:outputLabel value="Pourcentage des frais de remboursement *:" />
<p:inputNumber id="i2" value="#{acteBean.acteMedical.pourcentage}"
placeholder="% des frais de remboursements" symbolPosition="s"
symbol="%" disabled="#{not empty acteBean.acteMedical.plafond}">
<f:ajax event="keyup" render="i1" />
</p:inputNumber>
<p:message id="m3" for="i2" />
<p:commandButton value="Sauvegarder" id="button" disabled="#{not facesContext.postback or facesContext.validationFailed}"
style="background:#6FDC6F;color: #FFFFFF"
styleClass="customStyleButton" action="#{acteBean.doAddActe()}"
update="#form:pan">
<p:confirm header="Confirmation" message="Êtes-vous sûr?"
icon="ui-icon-alert" />
</p:commandButton>
<p:commandButton value="Actualiser" action="#{acteBean.reset()}"
style="background:#FF0000; color: #FFFFFF"
styleClass="customStyleButton" update="#form:pan" />
<p:confirmDialog global="true" showEffect="fade" hideEffect="fade">
<p:commandButton value="Oui" type="button"
styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
<p:commandButton value="Non" type="button"
styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
</p:confirmDialog>
</p:panelGrid>
</p:panel>
</h:form>
</ui:define>
</ui:composition>
</html>
You forgot to add the 'pt' namespace declaration
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
And you are not using the jsf 2.2 namespace declarations for the jsf components either but the older ones
PrimeFaces is not rendering. I have configured everything correctly (hope so).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:mp="http://primefaces.org/ui/material">
<head>
<title>Welcome Page</title>
</head>
<body>
<h:head>
<h:form>
<h:panelGrid columns="4" cellpadding="5">
<h:outputLabel for="name" value="Name:" style="font-weight:bold" />
<p:inputText id="name" value="#{basicView.text}" />
<p:commandButton value="Submit" update="display"
icon="ui-icon-check" />
<h:outputText id="display" value="#{basicView.text}" />
</h:panelGrid>
</h:form>
</h:head>
</body>
</ui:composition>
public class BasicView {
private String text;
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
}
I have included all the annotations and lib.
Here is the Index.xhtml output
You messed up the head and body tags. Also you need to put your form in the body.
<!DOCTYPE html>
<h:html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:mp="http://primefaces.org/ui/material">
<h:head>
<title>Welcome Page</title>
</h:head>
<h:body>
<h:form>
<h:panelGrid columns="4" cellpadding="5">
<h:outputLabel for="name" value="Name:" style="font-weight:bold" />
<p:inputText id="name" value="#{basicView.text}" />
<p:commandButton value="Submit" update="display"
icon="ui-icon-check" />
<h:outputText id="display" value="#{basicView.text}" />
</h:panelGrid>
</h:form>
</h:body>
</h:html>
I wanted to use OneMenu inside a carousel to set a properties in managedBean, but its not working.
i test the OneMenu without Carousel and it work good , so i think that the problem is inside the carousel .
Any ideas as to what is going on here? plz help .
this is my xhtm page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
template="/template/template.xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<ui:define name="pageContent">
<h:form id="form1">
<br />
<br />
<br />
<p:carousel value="#{homeBean.doInstances()}" headerText="Bootstrap VM " var="vm" itemStyle="text-align:center" responsive="true">
<p:panelGrid columns="2" columnClasses="label,value" layout="grid" style="margin: 0 auto;" styleClass="ui-panelgrid-blank">
<f:facet name="header"><p:graphicImage name="images/instance.jpg" /></f:facet>
<p:panelGrid columns="2" style="margin: 0 auto;">
<h:outputText value="name" />
<h:outputText value="#{vm.name}" />
<h:outputLabel value="ip" />
<h:outputLabel value="#{vm.url}" />
<p:outputLabel value="Configuration" />
<p:selectOneMenu id="recepie3" value="#{bootstrapBean.recipeSelected}">
<f:selectItem itemLabel="Select One Recipie " itemValue="" />
<f:selectItems value="#{bootstrapBean.selectItems}" />
</p:selectOneMenu>
<p:commandButton value="Bootstrap" ajax="false" validateClient="true" actionListener="#{bootstrapBean.bootstrapSelectedVm(vm.url)}" />
</p:panelGrid>
</p:panelGrid>
<f:facet name="footer" style="margin: 0 auto;">
<p:panelGrid columns="3" columnClasses="label,value" layout="grid" style="margin: 0 auto;" styleClass="ui-panelgrid-blank">
<h:outputLabel>Bootstrap All VMs :</h:outputLabel>
<p:selectOneMenu id="recepie2" value="#{bootstrapBean.recipeSelected}">
<f:selectItem itemLabel="Select One Recipie " itemValue="" />
<f:selectItems value="#{bootstrapBean.recipies}" />
</p:selectOneMenu>
<p:commandButton value="Bootstrap" ajax="false" validateClient="true" actionListener="#{bootstrapBean.bootstrapAllVMs()}" />
</p:panelGrid>
</f:facet>
</p:carousel>
</h:form>
</ui:define>
</ui:composition>
Tag library initialized incorrectly, please correct it and its work.
What I want is to display a lightbox right after the page is loaded. I mean, when the user receives the page, the lightbox automatically shows and stays on untill it is closed. How can I do this?
<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<ui:composition template="/WEB-INF/include/template.xhtml">
<ui:define name="title">
<h:outputText value="#{jorBundle.AppName}"></h:outputText>
</ui:define>
<ui:define name="body">
<p:lightBox width="20%" height="80%" >
<h:outputLink value="#" title="Marcel Vieira" >
<h:outputText value="some description here"/>
</h:outputLink>
<f:facet name="inline">
<h:panelGrid columns="2">
<p:graphicImage value="/resources/images/ich.jpg" />
<h:outputText style="color:#FFFFFF" value="some text in here...." />
</h:panelGrid>
</f:facet>
</p:lightBox>
<p:panel header="#{jorBundle.Welcome}">
<p><h:outputText value="#{jorBundle.WelcomeMessage}"></h:outputText></p>
</p:panel>
<p:panel header="Gráfico Divisões UPB" menuTitle="menu" collapsed="true" >
<p><h:outputText value="Gráfico"></h:outputText></p>
</p:panel>
</ui:define>
</ui:composition>
</html>
Thanks in advance.
You could use the primefaces javascript, which requires an ID on the lightbox.
Component:
<p:lightBox width="20%" height="80%" id='myLightBox'>
<h:outputLink value="#" title="Marcel Vieira" >
<h:outputText value="some description here"/>
</h:outputLink>
<f:facet name="inline">
<h:panelGrid columns="2">
<p:graphicImage value="/resources/images/ich.jpg" />
<h:outputText style="color:#FFFFFF" value="some text in here...." />
</h:panelGrid>
</f:facet>
</p:lightBox>
Javascript:
<script>
document.addEventListener("DOMContentLoaded", function() {
PF('myLightBox').show();
});
</script>
A simple solution is to set the visible attribute to true:
<p:lightBox width="20%" height="80%" visible="true">
<h:outputLink value="#" title="Marcel Vieira" >
<h:outputText value="some description here"/>
</h:outputLink>
<f:facet name="inline">
<h:panelGrid columns="2">
<p:graphicImage value="/resources/images/ich.jpg" />
<h:outputText style="color:#FFFFFF" value="some text in here...." />
</h:panelGrid>
</f:facet>
</p:lightBox>
I've discovered I can play a commandbutton in the options facet (right side of menubar), however I can't seem to add a submenu in the same way. I want an actual menu dropdown aligned to the right, not a button.
Any ideas?
<html lang="en" 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">
<h:head title="Primefaces Test">
<style>
.ui-layout-north {
z-index: 20 !important;
overflow: visible !important;
}
.ui-layout-north .ui-layout-unit-content {
overflow: visible !important;
}
</style>
</h:head>
<h:body>
<h:form>
<p:layout fullPage="true">
<p:layoutUnit position="north">
<p:menubar>
<p:submenu label="Mail">
<p:menuitem value="Gmail" url="http://www.google.com" />
<p:menuitem value="Hotmail" url="http://www.hotmail.com" />
<p:menuitem value="Yahoo Mail" url="http://mail.yahoo.com" />
</p:submenu>
<p:submenu label="Videos">
<p:menuitem value="Youtube" url="http://www.youtube.com" />
<p:menuitem value="Break" url="http://www.break.com" />
</p:submenu>
<f:facet name="options">
<p:commandButton value="logout" />
<p:submenu label="Videos">
<p:menuitem value="Youtube" url="http://www.youtube.com" />
<p:menuitem value="Break" url="http://www.break.com" />
</p:submenu>
</f:facet>
</p:menubar>
</p:layoutUnit>
<p:layoutUnit position="center">
<h:outputText value="Hello, world." />
</p:layoutUnit>
</p:layout>
</h:form>
</h:body>
</html>
-- Shane
I solve it using something like this:
style="position: absolute; right: 6px;"
Just try it.
I ended up just forgetting the whole "options" facet and used css float instead, I hope this helps someone:
<h:body>
<h:form>
<p:layout fullPage="true">
<p:layoutUnit position="north">
<p:menubar>
<p:submenu label="Mail">
<p:menuitem value="Gmail" url="http://www.google.com" />
<p:menuitem value="Hotmail" url="http://www.hotmail.com" />
<p:menuitem value="Yahoo Mail" url="http://mail.yahoo.com" />
</p:submenu>
<p:submenu label="Videos">
<p:menuitem value="Youtube" url="http://www.youtube.com" />
<p:menuitem value="Break" url="http://www.break.com" />
</p:submenu>
<p:submenu label="Videos2" style="float:right">
<p:menuitem value="Youtube" url="http://www.youtube.com" />
<p:menuitem value="Break" url="http://www.break.com" />
</p:submenu>
</p:menubar>
</p:layoutUnit>
<p:layoutUnit position="center">
<h:outputText value="Hello, world." />
</p:layoutUnit>
</p:layout>
</h:form>
</h:body>
--Shane
If you are using bootstrap the you can just use the built in flexbox classes
NOTE: This is a primeng (angular) example and will align ALL items right.
<p-menubar [model]="items" styleClass="d-flex justify-content-end"></p-menubar>