I have a dialog to change an equipment type when I select a row from a datatable. This first dialog opens without problem, I can change the equipment normally.
When I click "Save", I open another dialog just to confirm the changes. In this new dialog, the button with id "confirmarSim" should call a backing bean method. The problem is that method is never called, but the oncomplete methods are executed (the two dialogs are closed).
The code is as follows:
<p:dialog header="Editar IP Cadastrado" id="dialog" styleClass="borderless" widgetVar="dlgEditar" modal="true" showEffect="fade" hideEffect="fade" resizable="false" draggable="false" closable="false">
<p:growl id="growlInformacao" sticky="true" />
<p:panelGrid columns="2" rendered="#{not empty cadastrosIPsBean.selectedCadastro}" style="font-size: 14px">
<p:outputLabel value="Equipamento:"/>
<p:selectOneMenu id="selecionadorEquipamento" value="#{cadastrosIPsBean.selectedCadastro.equipamento}" style="width: 92%">
<f:selectItems value="#{cadastrosIPsBean.listaEquipamentosFormatada}"/>
</p:selectOneMenu>
<br/>
<br/>
<f:facet name="footer">
<p:commandButton value="Save" id="btConfirmar" oncomplete="PF('dlgConfirmar').show()" update=":form:tbl" style="width: 125px">
<p:dialog appendTo="#(body)" header="Confirmar alterações" id="confirmar" widgetVar="dlgConfirmar" modal="true" showEffect="fade" hideEffect="fade" resizable="false" draggable="false">
<br/>
<p:outputLabel value="Tem certeza de que deseja salvar as alterações?" style="font-size: 14px"/>
<br/>
<br/>
<f:facet name="footer">
<p:commandButton id="confirmarSim" value="Yes" process="tbl" oncomplete="PF('dlgConfirmar').hide(); PF('dlgEditar').hide()" actionListener="#{cadastrosIPsBean.salvarAlteracoes()}" update=":form:growlInformacao" style="font-size: 14px; width: 100px"/>
<p:spacer width="20"/>
<p:commandButton id="confirmarCancelar" value="Cancel" process="tbl" oncomplete="PF('dlgConfirmar').hide()" actionListener="#{cadastrosIPsBean.atualizaListasUltimosCadastros()}" update=":form:tbl" style="font-size: 14px; width: 100px"/>
</f:facet>
</p:dialog>
</p:commandButton>
<p:spacer width="20"/>
<p:commandButton value="Close" id="btFechar" oncomplete="PF('dlgDescartar').show()" action="#{cadastrosIPsBean.atualizaListasUltimosCadastros()}" update=":form:tbl" style="width: 125px">
<p:dialog appendTo="#(body)" header="Descartar alterações" id="descartar" widgetVar="dlgDescartar" modal="true" showEffect="fade" hideEffect="fade" resizable="false" draggable="false">
<br/>
<p:outputLabel value="Tem certeza de que deseja descartar as alterações?" style="font-size: 14px"/>
<br/>
<br/>
<f:facet name="footer">
<p:commandButton id="fecharSim" value="Sim" process="tbl" oncomplete="PF('dlgDescartar').hide(); PF('dlgEditar').hide()" action="#{cadastrosIPsBean.atualizaListasUltimosCadastros()}" update=":form:tbl" style="font-size: 14px; width: 100px"/>
<p:spacer width="20"/>
<p:commandButton id="fecharCancelar" value="Cancelar" process="tbl" oncomplete="PF('dlgDescartar').hide()" action="#{cadastrosIPsBean.atualizaListasUltimosCadastros()}" update=":form:tbl" style="font-size: 14px; width: 100px"/>
</f:facet>
</p:dialog>
</p:commandButton>
</f:facet>
</p:panelGrid>
</p:dialog>
The rest of the code works well, it's just that button with id="confirmarSim" that does not call the backing bean method "#{cadastrosIPsBean.salvarAlteracoes()}".
Why this method is not called?
You need to put the dialogs out of the main <h:form></h:form> and insert each of the dialogs into others forms.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html>
<h:head>
</h:head>
<h:body>
<h:form id="form">
</h:form>
<p:dialog appendTo="#(body)" header="Header" id="dialog1" widgetVar="dlg1" modal="true" showEffect="fade" hideEffect="fade" resizable="false" draggable="false">
<h:form id="firstDialog">
<br/>
<p:outputLabel value="Some text here?" style="font-size: 14px"/>
<br/>
<br/>
<p:separator/>
<div align="center" style="background-color: #DEDEDE">
<p:commandButton value="Yes" oncomplete="PF('dlg1').hide()" action="#{namedBean.method.execute()}" update=":form:growl, :form:dataList, :form:panelGrid" style="font-size: 14px; width: 100px"/>
<p:spacer width="20"/>
<p:commandButton value="Cancel" oncomplete="PF('dlg1').hide()" action="#{namedBean.method.execute()}" update=":form:growl" style="font-size: 14px; width: 100px"/>
</div>
</h:form>
</p:dialog>
<p:dialog appendTo="#(body)" header="Header" id="dialog2" widgetVar="dlgExcluir" modal="true" showEffect="fade" hideEffect="fade" resizable="false" draggable="false">
<h:form id="secondDialog">
<br/>
<p:outputLabel value="Tem certeza de que deseja excluir o equipamento #{equipamentosBean.selectedEquipamento.nome}?" style="font-size: 14px"/>
<br/>
<br/>
<p:separator/>
<div align="center" style="background-color: #DEDEDE">
<p:commandButton value="Sim" oncomplete="PF('dlg2').hide()" action="#{namedBean.method.execute()}" update=":form:growl, :form:dataList, :form:panelGrid" style="font-size: 14px; width: 100px"/>
<p:spacer width="20"/>
<p:commandButton value="Cancelar" oncomplete="PF('dlg2').hide()" action="#{namedBean.method.execute()}" update=":form:growl" style="font-size: 14px; width: 100px"/>
</div>
</h:form>
</p:dialog>
<p:dialog appendTo="#(body)" header="Header" id="dialog3" widgetVar="dlg3" modal="true" showEffect="fade" hideEffect="fade" resizable="false" draggable="false">
<h:form id="thirdDialog">
<br/>
<p:outputLabel value="Some text here?" style="font-size: 14px"/>
<br/>
<br/>
<p:separator/>
<div align="center" style="background-color: #DEDEDE">
<p:commandButton value="Yes" oncomplete="PF('dlg3').hide()" action="#{namedBean.method.execute()}" update=":form:growl, :form:dataList, :form:panelGrid" style="font-size: 14px; width: 100px"/>
<p:spacer width="20"/>
<p:commandButton value="Cancel" oncomplete="PF('dlg3').hide()" action="#{namedBean.method.execute()}" update=":form:growl" style="font-size: 14px; width: 100px"/>
</div>
</h:form>
</p:dialog>
</h:body>
</html>
Related
Here is before i add any filter
Here after i add a search term
Right after when i delete the search term the datatable stays like that , empty.
On the other hand , i have a perfectly working datatable with search function for another manager class, so i dont really understand the problem.
#ManagedBean(name = "laboratorio")
#SessionScoped
public class Laboratorio implements Serializable {
private static final long serialVersionUID = 1094801825228386322L;
private LaboratorioDAO ldao;
private Integer id;
private String msg;
private String tipoSangre;
private List<Donantevalidar> users;
private List<Donantevalidar> usersFiltrados;
public Integer getId() {
return id;
}
public void setId(Integer pwd) {
this.id = pwd;
}
public List<Donantevalidar> getUsers() {
return users;
}
public void setListavalidar(List<Donantevalidar> users) {
this.users = users;
}
public void setUsersFiltrados(List<Donantevalidar> users) {
this.usersFiltrados = users;
}
public List<Donantevalidar> getUsersFiltrados() {
return usersFiltrados;
}
public String getTipoSangre() {
return tipoSangre;
}
public void setTipoSangre(String pwd) {
this.tipoSangre = pwd;
}
public void listaSangre() {
LaboratorioImpl ldao2 = new LaboratorioImpl();
setListavalidar(ldao2.generarTabla());
}
}
Here is my html 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:head>
<title>Borrar</title>
<link rel="stylesheet" href="borrar.css"></link>
<script src="https://kit.fontawesome.com/22e24bcbd3.js" crossorigin="anonymous"></script>
</h:head>
<div class="container">
<div class="screen">
<div class="screen__content">
<h:body onload="#{laboratorio.listaSangre()}">
<div class="box">
<h:form>
<div class="box2">
<div class="login__field" style="margin-left: 100px; margin-top: 50px">
<br></br>
<h1>
Validar muestras</h1>
</div>
<div class="login__field" style="text-align:center;">
<br></br>
<br></br>
<br></br>
<br></br>
<h2>
Nombre de usuario</h2>
<p:inputText class="login__input" id="username" value="#{laboratorio.id}" ></p:inputText >
<div class="errorMensaje" style="position: absolute; top:200px; z-index: 99999">
<p:messages for="MessageId" showDetail="true" closable="true"></p:messages>
</div>
</div>
<div class="login__field2">
<h:commandLink action="#{login.logout}" value="Logout" styleClass="button2 login__submit2">
<i class="button__icon fas fa-sign-out-alt"></i>
</h:commandLink>
</div>
</div>
<br /><br />
<br /><br />
<br /><br />
<h:message for="username"></h:message>
<br /><br />
<div class="errorMensaje" style="position: absolute; top:-5px;">
<p:messages for="MessageId" showDetail="true" closable="true"></p:messages>
</div>
<div class="login__field">
<p:commandLink class="button login__submit" value="Borrar" type="button" styleClass="button login__submit" style="text-decoration:none;color: #4C489D;;" onclick="PF('deleteDlg').show()">
<i class="button__icon fas fa-user-slash "></i>
</p:commandLink>
<h:commandLink class="button login__submit" action="#{laboratorio.listaSangre()}" value="Actualizar tabla" styleClass="button login__submit">
<i class="button__icon fas fa-sync"></i>
</h:commandLink>
<p:commandLink class="button login__submit" value="Anyadir" type="button" styleClass="button login__submit" style="text-decoration:none;color: #4C489D;;" onclick="PF('validarDlg').show()">
<i class="button__icon fas fa-user-slash "></i>
</p:commandLink>
</div>
</h:form>
</div> <h:form>
<div class="tabla">
<p:dataTable value="#{laboratorio.users}" var="var" lazy="true" filteredValue="#{laboratorio.usersFiltrados}" widgetVar="customersTable" emptyMessage="No hay coincidencias" paginator="true"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
currentPageReportTemplate="{startRecord}-{endRecord} of {totalRecords} records"
rowsPerPageTemplate="5,10,{ShowAll|'All'}" style="table-layout: auto;">
<f:facet name="header">
<h:outputText value="Busqueda global:" />
<p:inputText id="globalFilter" onkeyup="PF('customersTable').filter()" style="width:150px" />
<p:separator />
</f:facet>
<p:column filterBy="#{var.tipo}" headerText="Tipo de sangre" filterMatchMode="contains">
<h:outputText value="#{var.tipo}" />
</p:column>
</p:dataTable>
</div>
</h:form>
</h:body>
</div>
<div class="screen__background"> <span class="screen__background__shape screen__background__shape4"></span>
<span class="screen__background__shape screen__background__shape3"></span>
<span class="screen__background__shape screen__background__shape2"></span>
<span class="screen__background__shape screen__background__shape1"></span></div>
</div>
</div>
</html>
My working datatable is basically the same but with 4 columns and of other object class, have tried cleaning my cache , rebuilding project , etc. The only other thing that could be wrong is that some of the data retrieved from the database are "utfmb4" - charset and collation "utf8mb4_0900_ai_ci" dont know if this could cause it.
(EDIT) Im using primefaces 10.0.0
Solved this problem , i was using THE WRONG FREKING IMPORTS NO WONDER IT DIDNT WORK
I'm trying get a value from a p:inputText is inside a p:dialog but this is returning null to my bean.
The inputText motivoCancelamento needs to be filled with the content of my inputText motivoCancelamentoDialog inside the dialog.
The another ones are ok, like status, protocoloCancelamento and dataCancelamento.
Can anyone help me?
<h:form id="form">
<p:toolbar>
<f:facet name="left">
<p:growl id="messages" showDetail="true"/>
<p:dialog header="Cancelar Nota" widgetVar="cancelamentoDialog" focus="motivoCancelamentoDialog">
<h:panelGrid columns="2" cellpadding="5">
<h:outputLabel for="motivoCancelamentoDialog" value="Motivo Cancelamento:" />
<p:inputText id="motivoCancelamentoDialog" value="#{notaProdutoBean.notaProduto.motivoCancelamento}" />
<p:commandButton value="Cancelar" actionListener="#{notaProdutoBean.cancelarNota()}" update="status motivoCancelamento protocoloCancelamento dataCancelamento messages form"/>
</h:panelGrid>
</p:dialog>
<p:confirmDialog global="true" showEffect="fade" hideEffect="fade">
<p:commandButton value="Sim" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
<p:commandButton value="Não" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
</p:confirmDialog>
</p:toolbar>
<p:fieldset id='panelNotaFiscal' legend="NotaFiscal" >
<p:panelGrid columns="6" columnClasses="centered">
<p:outputLabel for='status' value='Status'/>
<p:inputText id="status" value="#{notaProdutoBean.notaProduto.status}" required="true" requiredMessage="O campo Status é obrigatório">
<p:message for="status"/>
</p:inputText>
<p:outputLabel for="motivoCancelamento" value="Motivo Cancelamento"/>
<p:inputText id="motivoCancelamento" size="25" value="#{notaProdutoBean.notaProduto.motivoCancelamento}">
<p:message for="motivoCancelamento"/>
</p:inputText>
<p:outputLabel for="protocoloCancelamento" value="Protocolo Cancelamento"/>
<p:inputText id="protocoloCancelamento" size="15" value="#{notaProdutoBean.notaProduto.protocoloCancelamento}">
<p:message for="protocoloCancelamento"/>
</p:inputText>
<p:outputLabel for="dataCancelamento" value="Data Cancelamento"/>
<p:calendar id="dataCancelamento" value="#{notaProdutoBean.notaProduto.dataCancelamento}" pattern="dd/MM/yyyy HH:mm:ss">
<p:message for='dataCancelamento'/>
</p:calendar>
</p:panelGrid>
</p:fieldset>
public void cancelarNota(){
try{
if(getNotaProduto().getStatus().equals("Autorizada")){
getNotaProduto().setStatus("Cancelada");
System.out.println("Motivo " + getNotaProduto().getMotivoCancelamento());
getNotaProduto().setProtocoloCancelamento("22222222222222");
getNotaProduto().setDataCancelamento(new Date());
new BaseBean().salvar(getNotaProduto());
RequestContext.getCurrentInstance().execute("PF('cancelamentoDialog').hide();");
}
else{
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO ,"Mensagem: ", "A nota não está autorizada portanto não pode ser cancelada"));
}
}
catch(Exception e){
new Log().salvaErroLog(e);
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_ERROR ,"Mensagem: ", "Um erro ocorreu, entre em conto com o adminstrador"));
}
}
You have 2 inputs for the same field in the same form:
<p:inputText id="motivoCancelamentoDialog" value="#{notaProdutoBean.notaProduto.motivoCancelamento}" />
<p:inputText id="motivoCancelamento" size="25" value="#{notaProdutoBean.notaProduto.motivoCancelamento}">
<p:message for="motivoCancelamento"/>
</p:inputText>
you should put the dialog in a separate form so it doesnt post the second input.
also you can specify the elements to process in the "cancelar" button
<p:inputText id="motivoCancelamentoDialog" value="# notaProdutoBean.notaProduto.motivoCancelamento}" />
<p:commandButton value="Cancelar" actionListener="#{notaProdutoBean.cancelarNota()}" update="status motivoCancelamento protocoloCancelamento dataCancelamento messages form" process="#this, motivoCancelamentoDialog"/>
your input tag is actually empty tag
<p:inputText id="motivoCancelamentoDialog" value="#{notaProdutoBean.notaProduto.motivoCancelamento}" />
try using something like below to see if it works.
<p:inputText id="motivoCancelamentoDialog" value="#{notaProdutoBean.notaProduto.motivoCancelamento}">abc</p:inputText>
I have problem with "" component in my application. I have a datatable with 2 fields editable first is an inputtext and second field is a dateInput.
Inside fields I put to update value in list but when submit it to bean not updated the values.
Below is my page.xhtml and bean.
<p:dialog id="modalNovosParametrosRecesso" header="Salvar Novos Parâmetros de Estagiário"
widgetVar="widgetvarNovoParametro"
draggable="true" resizable="false"
closable="false" modal="true" width="630">
<h:outputText styleClass="modalRecessoAuto" value="#{msg.MN064}" escape="false" />
<br />
<h:panelGroup>
<br />
<p:dataTable id="tableRegRecessoAuto" var="recessoAuto"
value="#{parametroEstagiarioMB.visao.listaOcorrenciaRegistroRecesso}"
styleClass="hide-column-names" rowIndexVar="rowIndex" >
<p:column style="width:98px;">
<h:outputLabel value="#{rowIndex+1}º Recesso de " style="color: #0039BA" />
<p:inputText value="#{recessoAuto.diasRecesso}" size="2">
<p:ajax event="blur" update=":frmFiltro:tableRegRecessoAuto" ignoreAutoUpdate="true" global="false" />
</p:inputText>
<h:outputLabel value="dia(s) começando em " style="color: #0039BA" />
<p:inputMask value="#{recessoAuto.dtInicioOcorrencia}" mask="99/99/9999" size="10">
<f:convertDateTime pattern="dd/MM/yyyy" locale="pt_BR" />
<p:ajax event="blur" update=":frmFiltro:tableRegRecessoAuto" ignoreAutoUpdate="true" global="false"/>
</p:inputMask>
<h:outputLabel value=" e finalizando em " style="color: #0039BA; margin-left: 5px;"/>
<h:outputLabel id="dtLbl1" value="#{recessoAuto.dtFimOcorrencia}" style="color: #0039BA; margin-left: 5px;" >
<f:convertDateTime for="dtLbl1" pattern="dd/MM/yyyy" locale="pt_BR"/>
</h:outputLabel>
</p:column>
-->
<div style="padding-left: 170px;">
<p:commandLink styleClass="btnLaranja marginTop"
ignoreAutoUpdate="true" global="false" ajax="false" action="#{parametroEstagiarioMB.salvarRecessoPrimeiraParametrizacao()}"
update=":frmFiltro:tableRegRecessoAuto">
<span>Confirmar</span>
</p:commandLink>
<p:commandLink styleClass="btnLaranja marginTop"
id="btnCancelarRecessoAuto"
oncomplete="PF('widgetvarNovoParametro').hide();"
ignoreAutoUpdate="true" global="false" actionListener="#{parametroEstagiarioMB.cancelar}">
<f:setPropertyActionListener
target="#{parametroEstagiarioMB.visao.exibirModal}"
value="#{false}" />
<span>Cancelar</span>
</p:commandLink>
<p:commandLink styleClass="btnLaranja marginTop"
id="btnVerRegrasAuto"
oncomplete="PF('widgetvarModalRegras').show();"
ignoreAutoUpdate="true" global="false">
<span>Regras</span>
</p:commandLink>
</div>
</p:dialog>
My Bean:
public void salvarRecessoPrimeiraParametrizacao(){
int count = 0;
final DataTable dataTable = (DataTable) FacesContext.getCurrentInstance().getViewRoot()
.findComponent(":frmFiltro:tableRegRecessoAuto");
List<OcorrenciaPonto> teste = new ArrayList<OcorrenciaPonto>();
for(OcorrenciaPonto c : (List<OcorrenciaPonto>) dataTable.getValue()){
teste.add(c);
count+=1;
}}
datatable.getValues() not get new values and yes old values that displayed in screen.
Are you using getters and setters correctly?
Have you tried to use immediate="true" on input fields?
I saw you are using <p:ajax> . I had some troubles with this. Maybe, if you change to **<f:ajax>** this must works so well.
I'm working with Primefaces 3.4, Apache Tomcat 7 and Java EE. I read the GoogleMaps API but I can't get this feature to work.
I have a PrimeFaces input box, and when i write an address on it, i want to suggest other addresses provided by GoogleMaps library.
Nothing happens when a put the JavaScript code on my XHTML. I have the library of GoogleMaps too.
This is my XHTML:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initia(domicilioDesde, domicilioHasta) {
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var oldDirections = [];
var currentDirections = null;
var cordoba = " ,Cordoba, Argentina";
var direccion = domicilioDesde; /* '#{busquedaplayaMB.direccionDesde}'; */
var start = direccion.concat(cordoba);
var fin = domicilioHasta; /*'#{busquedaplayaMB.playaselected.domicilio}';*/
var end = fin.concat(cordoba);
var request = {
origin : start,
destination : end,
travelMode : google.maps.DirectionsTravelMode.DRIVING
}
var myOptions = {
zoom : 13,
center : new google.maps.LatLng(#{busquedaplayaMB.latitudCentro},#{busquedaplayaMB.longitudCentro}),
mapTypeId : google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
directionsDisplay = new google.maps.DirectionsRenderer({
'map' : map,
'preserveViewport' : true,
'draggable' : true
});
directionsDisplay.setPanel(document
.getElementById("directions_panel"));
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
dlg2.show();
}
function undo() {
currentDirections = null;
directionsDisplay.setDirections(oldDirections.pop());
if (!oldDirections.length) {
setUndoDisabled(true);
}
}
function setUndoDisabled(value) {
document.getElementById("undo").disabled = value;
}
</script>
<h:form id="form">
<p:growl id="messages" showSummary="false" autoUpdate="true"
globalOnly="true" />
<div align="left" style="margin: 10px 0 10px 0;">
<p:panel>
<h:panelGrid columns="1" width="100%" cellspacing="5"
cellpadding="5">
<h:panelGrid columns="2" width="80%">
<p:column style="vertical-align:text-center;">
<h:panelGrid columns="2">
<p:column>
<p:watermark for="direccionBusqueda"
value="Dirección de búsqueda" />
<p:inputText id="direccionBusqueda"
value="#{busquedaplayaMB.direccionBusqueda}" required="true"
requiredMessage="Campo dirección de búsqueda obligatorio"
style="width:250px;">
<p:ajax event="blur" update="direccionBusquedaMsg" />
</p:inputText>
</p:column>
<p:column>
<p:message id="direccionBusquedaMsg" display="icon"
for="direccionBusqueda" />
</p:column>
</h:panelGrid>
</p:column>
<p:column>
<div align="center">
<h:outputLabel value="N° de cuadras: " />
<h:outputLabel id="nroCuadras"
value="#{busquedaplayaMB.distancia}" />
<h:inputHidden id="distancia"
value="#{busquedaplayaMB.distancia}" />
<p:slider for="distancia" minValue="1" maxValue="50"
style="width:100px;" update="nroCuadras" display="nroCuadras" />
</div>
</p:column>
</h:panelGrid>
<h:panelGrid columns="5" cellspacing="5" cellpadding="5"
width="100%">
<p:column style="vertical-align:text-center;">
<p:selectOneMenu value="#{busquedaplayaMB.categoriaParameter}"
effect="fade" style="width:160px;height:25px;line-height:17px;">
<f:selectItem itemLabel="Todas las categorías"
itemValue="#{null}" />
<f:selectItems
value="#{categoriaVehiculoMB.categoriaVehiculoList}"
var="categoria" itemValue="#{categoria}"
itemLabel="#{categoria.nombre}" />
<f:converter converterId="categoriaVehiculoConverter" />
</p:selectOneMenu>
</p:column>
<p:column style="vertical-align:text-center;">
<p:selectOneMenu value="#{busquedaplayaMB.tipoEstadiaParameter}"
effect="fade" style="width:160px;height:25px;line-height:17px;">
<f:selectItem itemLabel="Todas los tipos estadías"
itemValue="#{null}" />
<f:selectItems value="#{tipoEstadiaMB.tipoEstadiaList}"
var="tipoEstadia" itemValue="#{tipoEstadia}"
itemLabel="#{tipoEstadia.nombre}" />
<f:converter converterId="tipoEstadiaConverter" />
</p:selectOneMenu>
</p:column>
<p:column style="vertical-align:text-center;">
<div align="right">
<h:panelGrid columns="2">
<p:selectBooleanCheckbox id="check"
value="#{busquedaplayaMB.checkPromociones}" />
<p:outputLabel for="check" value="Sólo con promociones" />
</h:panelGrid>
</div>
</p:column>
<p:column>
<div align="right">
<p:commandButton id="btnBuscarAvanzado" update="playas,mapa"
value="Buscar" action="#{busquedaplayaMB.busquedaAvanzada}"
ajax="false" icon="ui-icon-search" style="width:85px;" />
</div>
</p:column>
</h:panelGrid>
</h:panelGrid>
</p:panel>
</div>
<div>
<p:panel>
<f:view contentType="text/html">
<!-- <h1>Playas encontradas:</h1> -->
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<p:gmap center="#{busquedaplayaMB.coordenadas}" zoom="14"
type="ROADMAP" model="#{busquedaplayaMB.advancedModel}"
style="width:99,5%; height:350px;">
<p:ajax event="overlaySelect"
listener="#{busquedaplayaMB.onMarkerSelect}" />
<p:gmapInfoWindow>
<ui:fragment
rendered="#{busquedaplayaMB.marker.data.playa == null}">
<div align="center">
<ui:fragment rendered="#{busquedaplayaMB.usuario == null}">
<h:outputText style="font-weight:bold;" value="¡Usted está aquí!" />
</ui:fragment>
<ui:fragment rendered="#{busquedaplayaMB.usuario != null}">
<h:panelGrid column="1" style="text-align:center;"
cellspacing="0px" cellpadding="0px">
<p:column>
<h:graphicImage library="fotos_perfil_usuarios"
name="sinfoto.jpg"
styleClass="bordes-foto-perfil-comentario"
rendered="#{busquedaplayaMB.usuario.fotoUsuario == null}" />
<h:graphicImage library="fotos_perfil_usuarios"
name="#{busquedaplayaMB.usuario.nombreUser}.jpg"
styleClass="bordes-foto-perfil-comentario"
rendered="#{busquedaplayaMB.usuario.fotoUsuario != null}" />
</p:column>
<p:column>
<h:outputText style="font-weight:bold;"
value="#{busquedaplayaMB.usuario.nombre} #{busquedaplayaMB.usuario.apellido}" />
</p:column>
<p:column>
<h:link id="linkUsuario" tittle="Ir a mi perfil"
value="Ir a mi perfil" outcome="/cliente/perfilcliente" />
</p:column>
</h:panelGrid>
</ui:fragment>
</div>
</ui:fragment>
<ui:fragment
rendered="#{busquedaplayaMB.marker.data.playa != null}">
<div align="center">
<h:panelGrid column="1" style="text-align:center;"
cellspacing="0px" cellpadding="0px">
<p:column>
<h:graphicImage library="fotos_perfil_playas"
name="#{busquedaplayaMB.marker.data.id}_#{busquedaplayaMB.marker.data.nombreFoto}"
styleClass="bordes-foto-perfil-comentario"
rendered="#{busquedaplayaMB.marker.data.nombreFoto != null}" />
<h:graphicImage library="fotos_perfil_playas"
name="sinfoto.jpg"
styleClass="bordes-foto-perfil-comentario"
rendered="#{busquedaplayaMB.marker.data.nombreFoto == null}" />
</p:column>
<h:outputText style="font-weight:bold;"
value="#{busquedaplayaMB.marker.data.playa.nombreComercial}" />
<h:outputText
value="#{busquedaplayaMB.marker.data.playa.domicilio} - #{busquedaplayaMB.marker.data.playa.barrio.nombre}" />
<h:link id="link" tittle="Ir a playa" value="Ver información"
outcome="/viewperfilplaya.html?id=#{busquedaplayaMB.marker.data.playa.id}" />
</h:panelGrid>
</div>
</ui:fragment>
</p:gmapInfoWindow>
</p:gmap>
</f:view>
</p:panel>
</div>
<div style="margin: 5px;">
<p:dataTable id="playas" var="playa" paginator="true"
paginatorPosition="bottom" rows="5"
emptyMessage="¡No existen playas!"
value="#{busquedaplayaMB.playaResultadoBusqueda}">
<p:column headerText="Nombre Comercial" styleClass="column-font">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{playa.nombreComercial}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{playa.nombreComercial}"
styleClass="input-font" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Barrio" styleClass="column-font">
<h:outputText value="#{playa.barrio.nombre}" />
</p:column>
<p:column headerText="Domicilio" styleClass="column-font">
<h:outputText value="#{playa.domicilio}" />
</p:column>
<p:column headerText="Perfil" style="text-align:center; width:50px;">
<h:link id="verPerfil" title="Ver perfil"
outcome="/viewperfilplaya.html?id=#{playa.id}">
<h:graphicImage library="images/icons" name="go.png" />
</h:link>
</p:column>
<p:column headerText="Ruta" style="text-align:center; width:50px;">
<p:commandLink id="view2" oncomplete="dlgOrigen.show();"
title="¿Cómo llegar a esta playa?" update=":dlgO" process="#this">
<f:setPropertyActionListener value="#{playa}"
target="#{busquedaplayaMB.playaselected}" />
<h:graphicImage library="images/icons" name="search-map.png"
style="height:40px; width:40px" />
</p:commandLink>
</p:column>
</p:dataTable>
</div>
<!-- </h:form> -->
<p:dialog widgetVar="dlg2" width="800" height="400" modal="true"
id="dialog" draggable="false" closable="true">
<!-- <h:form id="frmComoLlegar"> -->
<f:facet name="header">
<h:outputText value="¿Cómo llegar a la playa?" />
</f:facet>
<div id="map_canvas" style="float: left; width: 65%; height: 100%"></div>
<div style="float: right; width: 35%; height: 100%; overflow: auto">
<div id="directions_panel" style="width: 100%"></div>
</div>
<f:facet name="footer" style="text-align=right;">
<p:commandButton id="undo" value="Volver"
style="float:right; width:274px; height: 42px" onclick="undo();"></p:commandButton>
</f:facet>
</p:dialog>
</h:form>
<p:dialog header="Dirección de origen" id="dlgO" widgetVar="dlgOrigen"
resizable="false" closable="true">
<h:form id="frmComoLlegar">
<h:panelGrid columns="2" cellspacing="10" cellpadding="10">
<h:outputLabel for="dirOrigen" value="Dirección de origen: " />
<p:inputText id="dirOrigen" required="true"
value="#{busquedaplayaMB.direccionDesde}"
onkeyup="if (event.keyCode == 13) { document.getElementById(':frmComoLlegar:siguiente').click(); return false; }" />
<p:column />
<p:column>
<div align="right">
<p:commandButton id="siguiente" value="Siguiente" ajax="true"
onclick="initia(jQuery('#frmComoLlegar\\:dirOrigen').val(), '#{busquedaplayaMB.playaselected}');"
update=":dialog" process="#this"
action="#{busquedaplayaMB.tomarDomicilioDesde}" />
</div>
</p:column>
</h:panelGrid>
</h:form>
</p:dialog>
I have implemented this feature using GMap3 jQuery Plugin (also in combination with JSF + Primefaces). See this for an example: https://github.com/jbdemonte/gmap3/blob/master/examples/autocomplete/autocomplete.html
I have a JSF datatable. I want to highlight the row when I select the the corresponding check box . How I must edit the JavaScript code to achieve this effect?
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<ui:insert name="header">
<ui:include src="header.xhtml"/>
</ui:insert>
<script type="text/javascript" src="resources/js/jquery-1.7.2.min.js"></script>
</h:head>
<h:body>
<h1><img src="resources/css/images/icon.png" alt="NVIDIA.com" /> History Center</h1>
<!-- layer for black background of the buttons -->
<div id="toolbar" style="margin: 0 auto; width:1180px; height:30px; position:relative; background-color:black">
<!-- Include page Navigation -->
<ui:insert name="Navigation">
<ui:include src="Navigation.xhtml"/>
</ui:insert>
</div>
<div id="greenBand" class="ui-state-default ui-corner-allh" style="position:relative; top:35px; left:0px;">
<h:graphicImage alt="Dashboard" style="position:relative; top:-20px; left:9px;" value="resources/images/logo_sessions.png" />
</div>
<div id="main" style="margin: 0 auto; width:1190px; height:700px; position:absolute; background-color:transparent; top:105px">
<div id="mainpage" style="margin: 0 auto; width:1190px; height:500px; position:absolute; background-color:transparent; top:80px">
<div id="settingsHashMap" style="width:750px; height:400px; position:absolute; background-color:r; top:20px; left:1px">
<h:form id="form">
<!-- The sortable data table -->
<h:dataTable id="dataTable" value="#{SessionsController.dataList}" var="item">
<h:column>
<f:facet name="header">
<h:commandLink value="Account Session ID" actionListener="#{SessionsController.sort}">
<f:attribute name="sortField" value="Account Session ID" />
</h:commandLink>
</f:facet>
<h:outputText value="#{item.aSessionID}" />
</h:column>
<h:column>
<f:facet name="header">
<h:commandLink value="User ID" actionListener="#{SessionsController.sort}">
<f:attribute name="sortField" value="User ID" />
</h:commandLink>
</f:facet>
<h:outputText value="#{item.userID}" />
</h:column>
<h:column>
<f:facet name="header">
<h:commandLink value="Activity Start Time" actionListener="#{SessionsController.sort}">
<f:attribute name="sortField" value="Activity Start Time" />
</h:commandLink>
</f:facet>
<h:outputText value="#{item.activityStart}" />
</h:column>
<h:column>
<f:facet name="header">
<h:commandLink value="Activity End Time" actionListener="#{SessionsController.sort}">
<f:attribute name="sortField" value="Activity End Time" />
</h:commandLink>
</f:facet>
<h:outputText value="#{item.activityEnd}" />
</h:column>
<h:column>
<f:facet name="header">
<h:commandLink value="Activity" actionListener="#{SessionsController.sort}">
<f:attribute name="sortField" value="Activity" />
</h:commandLink>
</f:facet>
<h:outputText value="#{item.activity}" />
</h:column>
</h:dataTable>
<!-- The paging buttons -->
<h:commandButton value="first" action="#{SessionsController.pageFirst}"
disabled="#{SessionsController.firstRow == 0}" />
<h:commandButton value="prev" action="#{SessionsController.pagePrevious}"
disabled="#{SessionsController.firstRow == 0}" />
<h:commandButton value="next" action="#{SessionsController.pageNext}"
disabled="#{SessionsController.firstRow + SessionsController.rowsPerPage >= SessionsController.totalRows}" />
<h:commandButton value="last" action="#{SessionsController.pageLast}"
disabled="#{SessionsController.firstRow + SessionsController.rowsPerPage >= SessionsController.totalRows}" />
<h:outputText value="Page #{SessionsController.currentPage} / #{SessionsController.totalPages}" />
<br />
<!-- The paging links -->
<ui:repeat value="#{SessionsController.pages}" var="page">
<h:commandLink value="#{page}" actionListener="#{SessionsController.page}"
rendered="#{page != SessionsController.currentPage}" />
<h:outputText value="#{page}" escape="false"
rendered="#{page == SessionsController.currentPage}" />
</ui:repeat>
<br />
<!-- Set rows per page -->
<h:outputLabel for="rowsPerPage" value="Rows per page" />
<h:inputText id="rowsPerPage" value="#{SessionsController.rowsPerPage}" size="3" maxlength="3" />
<h:commandButton value="Set" action="#{SessionsController.pageFirst}" />
<h:message for="rowsPerPage" errorStyle="color: red;" />
</h:form>
</div>
<div id="settingsdivb" style="width:350px; height:400px; position:absolute; background-color:transparent; top:20px; left:800px">
</div>
</div>
</div>
<script type="text/javascript">
$("tr").not(':first').hover(
function () {
$(this).css("background","#787878");
},
function () {
$(this).css("background","");
}
);
</script>
</h:body>
</html>
I can't really tell where your checkboxes are or what their names are but, I did notice you are using jQuery in your script. I created a quick little jsFiddle demo to show you what you can do with jQuery. In my example, I created a .highlight class where I set the background-color to the color I want. In jQuery, I group all of the checkboxes and attach a .change() handler to them where I toggle the highlight class on/off every click.
Check out the jsFiddle demo
HTML:
<div id="row-1"><input type="checkbox" id="chk-1" />Row 1</div>
<div id="row-2"><input type="checkbox" id="chk-2" />Row 2</div>
<div id="row-3"><input type="checkbox" id="chk-3" />Row 3</div>
<div id="row-4"><input type="checkbox" id="chk-4" />Row 4</div>
CSS:
div
{
display: block;
height: 20px;
padding: 20px;
border-bottom: dashed 1px #000;
}
input
{
margin-right: 10px;
}
.highlight
{
background-color: yellow;
}
jQuery:
$("input[type=checkbox]").on("change", function() {
var $chk = $(this),
num = $chk.attr("id").substring(4),
$row = $("#row-" + num);
$row.toggleClass("highlight");
});
Output:
Well my approach with jQuery is this :
<p:column >
<h:selectBooleanCheckbox onclick="highlight(this)" />
</p:column>
Create .highlighted class in your CSS file:
.highlighted {
background-color: red;
}
And finally actual function:
function highlight(param) {
var row = jQuery(param).parent().parent(); //children() available as well
row.toggleClass('highlighted');
}
You just get the row of the clicked checkbox and handle assigning of the CSS class. Straight and simple.
EDIT: Of course number of .parent() depends on your html elements composition. Edited the function to fit on your case, I've tried it with different composition of elements.
Here is an example of what I've done for getting Javascript to change background colors when checkboxes are checked:
<html>
<body>
<table>
<tr id="changeme1">
<td><input type="checkbox" onclick="highlight('changeme1');" /></td>
<td>Test Box</td>
</tr>
<tr id="changeme2">
<td><input type="checkbox" onclick="highlight('changeme2');" /></td>
<td>Test2</td>
</tr>
</table>
<script>
function highlight(id)
{
object = document.getElementById(id).style.backgroundColor;
if(object == "yellow")
{
document.getElementById(id).style.backgroundColor = "white";
}else{
document.getElementById(id).style.backgroundColor = "yellow";
}
}
</script>
</body>
</html>