为什么在h：form中时没有调用我的地址解析功能？

Question

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>

Answer 1

Ok after weeks of searching... just after I made this question I found a post that explain me what was wrong... Retrieve values from JSP to Javascript

I needed to add prependId="false" on the form, still not sure what that attribute does, I guess it lets me go inside the form to grab hes objects? I still appreciate answers and tips :)