Hey guys I have been trying to figure out why my function doesn't call when I put it inside an h:form, please help me with this, im calling the function at commandButton buscar, it works always if it is out of the h:form with id formDialog, I havent really worked alot with javascript so its probably the way im calling it on the script but I cant tell whats the mistake... im working with jsf, primefaces. Im using this geocode example from primefaces https://www.primefaces.org/showcase/ui/data/gmap/geocode.xhtml
heres my html code:
<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"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
template="/WEB-INF/template.xhtml">
<ui:define name="content">
<script
src='https://maps.googleapis.com/maps/api/js?key=AIzaSyA3GbUCWtOq1tGBQHmLfa7_eUvoQM1p624'
type='text/javascript'></script>
<script type="text/javascript">
function geocode() {
PF('geoMap').geocode(document.getElementById('txtDireccion').value);
}
</script>
<h:form id="frm">
<div align="center">
<p:panel id="panelDataTablePuestocomida" >
<p:growl id="men"/>
<p:dataTable value="#{puestocomidaView.data}" var="puestocomida" resizableColumns="false" tableStyle="width:auto"
paginator="true" rows="8">
<p:column headerText="Modificar">
<p:commandButton id="btnEdit" icon="ui-icon-pencil" update=":dialogPuestocomida" actionListener="#{puestocomidaView.action_edit}">
<f:attribute name="selectedPuestocomida" value="#{puestocomida}" />
</p:commandButton>
</p:column>
<f:facet name="header">
Puestos De Comida
</f:facet>
<p:column filterBy="#{puestocomida.pueId}" sortBy="#{puestocomida.pueId}" >
<f:facet name="header">
<h:outputText value="ID"/>
</f:facet>
<h:outputText value="#{puestocomida.pueId}"/>
</p:column>
<p:column filterBy="#{puestocomida.activo}" sortBy="#{puestocomida.activo}" >
<f:facet name="header">
<h:outputText value="Activo"/>
</f:facet>
<h:outputText value="#{puestocomida.activo}"/>
</p:column>
<p:column filterBy="#{puestocomida.nombrepuesto}" sortBy="#{puestocomida.nombrepuesto}" >
<f:facet name="header">
<h:outputText value="Nombre"/>
</f:facet>
<h:outputText value="#{puestocomida.nombrepuesto}"/>
</p:column>
<p:column filterBy="#{puestocomida.descripcion}" sortBy="#{puestocomida.descripcion}" >
<f:facet name="header">
<h:outputText value="Descripcion"/>
</f:facet>
<h:outputText value="#{puestocomida.descripcion}"/>
</p:column>
<p:column filterBy="#{puestocomida.direccion}" sortBy="#{puestocomida.direccion}" >
<f:facet name="header">
<h:outputText value="Direccion"/>
</f:facet>
<h:outputText value="#{puestocomida.direccion}"/>
</p:column>
<p:column filterBy="#{puestocomida.emailUsuario}" sortBy="#{puestocomida.emailUsuario}" >
<f:facet name="header">
<h:outputText value="Usuario"/>
</f:facet>
<h:outputText value="#{puestocomida.emailUsuario}"/>
</p:column>
<p:column filterBy="#{puestocomida.latitud}" sortBy="#{puestocomida.latitud}" >
<f:facet name="header">
<h:outputText value="Latitud"/>
</f:facet>
<h:outputText value="#{puestocomida.latitud}"/>
</p:column>
<p:column filterBy="#{puestocomida.longitud}" sortBy="#{puestocomida.longitud}" >
<f:facet name="header">
<h:outputText value="Longitud"/>
</f:facet>
<h:outputText value="#{puestocomida.longitud}"/>
</p:column>
<p:column filterBy="#{puestocomida.fechacreacion}" sortBy="#{puestocomida.fechacreacion}" >
<f:facet name="header">
<h:outputText value="Fecha Creacion"/>
</f:facet>
<h:outputText value="#{puestocomida.fechacreacion}"/>
</p:column>
<p:column filterBy="#{puestocomida.fechamodificacion}" sortBy="#{puestocomida.fechamodificacion}" >
<f:facet name="header">
<h:outputText value="Fecha Modificacion"/>
</f:facet>
<h:outputText value="#{puestocomida.fechamodificacion}"/>
</p:column>
<p:column filterBy="#{puestocomida.usuariocreador}" sortBy="#{puestocomida.usuariocreador}" >
<f:facet name="header">
<h:outputText value="Usuario Creador"/>
</f:facet>
<h:outputText value="#{puestocomida.usuariocreador}"/>
</p:column>
<p:column filterBy="#{puestocomida.usuariomodificador}" sortBy="#{puestocomida.usuariomodificador}" >
<f:facet name="header">
<h:outputText value="Usuario Modificador"/>
</f:facet>
<h:outputText value="#{puestocomida.usuariomodificador}"/>
</p:column>
</p:dataTable>
</p:panel>
</div>
</h:form>
<p:dialog id="dialogPuestocomida" appendTo="@(body)" draggable="true"
closable="true" visible="#{puestocomidaView.showDialog}" resizable="false"
modal="true" width="500">
<h:form id="formDialog" enctype="multipart/form-data">
<p:messages id="msg" />
<p:panel id="panelPuestocomida" header="Puesto De Comida">
<h:panelGrid columns="2" id="panelGrid" style="width:100%" >
<h:outputText id="msgNombrepuesto" value=" Nombre"/>
<p:inputText id="txtNombrepuesto" disabled="true" binding="#{puestocomidaView.txtNombrepuesto}"/>
<p:outputLabel value="Activo"/>
<p:selectOneMenu id="somActivo" binding="#{puestocomidaView.somActivo}" >
<f:selectItem itemValue="S" itemLabel="SI"/>
<f:selectItem itemValue="N" itemLabel="NO"/>
</p:selectOneMenu>
<h:outputText id="msgDescripcion" value=" Descripcion"/>
<p:inputText id="txtDescripcion" disabled="true" binding="#{puestocomidaView.txtDescripcion}"/>
<h:outputText id="msgDireccion" value=" Direccion"/>
<p:inputText id="txtDireccion" disabled="true" binding="#{puestocomidaView.txtDireccion}"/>
<p:commandButton value="buscar" onclick="geocode();"/>
<p:outputLabel value="Imagen:" />
<p:graphicImage id="imgPuesto" value="#{puestocomidaView.urlImagenPuesto}" binding="#{puestocomidaView.imgPuesto}" width="100%" height="100%" />
<p:fileUpload value="#{puestocomidaView.file}" mode="simple" skinSimple="true" label="Subir Imagen" />
</h:panelGrid>
</p:panel>
<h:panelGrid id="panelGridMap" columns="1" style="width:100%" >
<h:form prependId="false">
<p:gmap id="geoGmap" binding="#{puestocomidaView.map}" widgetVar="geoMap" center="#{puestocomidaView.centerMap}" zoom="11" type="ROADMAP" model="#{puestocomidaView.advancedModel}" style="width:100%;height:400px">
<p:ajax event="geocode" listener="#{puestocomidaView.onGeocode}" update="geoGmap" />
<p:ajax event="pointSelect" listener="#{puestocomidaView.onPointSelect}" update="geoGmap" />
</p:gmap>
</h:form>
</h:panelGrid>
<p:panel id="panelBotones">
<div align="center">
<p:commandButton id="btnSave" binding="#{puestocomidaView.btnSave}" value="Guardar" action="#{puestocomidaView.action_save()}" update=":dialogPuestocomida :frm:panelDataTablePuestocomida" />
<p:commandButton id="btnClear" value="Limpiar" action="#{puestocomidaView.action_clear()}" update=":dialogPuestocomida" />
<p:commandButton id="btnExit" value="Cancelar" action="#{puestocomidaView.action_closeDialog()}" update=":dialogPuestocomida" />
</div>
</p:panel>
</h:form>
</p:dialog>
</ui:define>
