Mostrando entradas con la etiqueta Front. Mostrar todas las entradas
Mostrando entradas con la etiqueta Front. Mostrar todas las entradas

domingo, 8 de abril de 2018

Jquery Validation Error: Cannot read property 'apply' of undefined. Exception occurred when checking element XXX, check the 'remote' method.

Este fallo me lo he encontrado tratando de hacer una validación a través de JQuery y el plugin validation, del cual intentaré hablar más adelante porque es verdaderamente interesante.

Pero para empezar vamos a hablar de como solucionar este error que da título al post y de paso a indicar la forma correcta de configurarlo.

Cannot read property 'apply' of undefined.  Exception occurred when checking element email, check the 'remote' method.

Al intentar realizar una llamada de este tipo:


$("#profileForm").validate({
 rules : {
  email : {
   required : true,
   email : true,
   remote : {
    type : 'post',
    url : config.contextPath + '/form/validate/email/exists',
    data : {
     email : $('#email').val(),
     userId : $('#userId').val(),
     _csrf : $('#csrfToken').val()
    }
   }
  }
 }
});

El problema paso tuvo diferentes estados hasta su final resolución. Esta era la configuración inicial:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>

A esta configuración le falta la importación del script 'additional-methods.js', que es el que nos da soporte para el método 'remote' que estabamos intentando usar.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.js"></script>

Tras añadir el último script, aún así, no funcionaba y nos indicaba el mismo error.  En este caso el problema era en la versión de los scripts que estabamos usando. Por lo que debemos dejar de usar las versiones 'slim' y utilizar las normales. Quedando la cosa:

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.js"></script>

El post como vemos no es gran cosa, pero no esta de más puesto que no hay mucha información sobre dicho error y además no indica mucho por donde pueden ir los tiros.

sábado, 16 de julio de 2016

Como hacer una ventana 'Cargando' con Primefaces

Como de Java no solo vive el hombre, aquí traigo esta semana algo diferente. Como realizar una ventana tipo 'En proceso' o 'Cargando' a través de las etiquetas de Primefaces.

Es muy sencillo.Vamos a hacerlo en tres sencillos pasos. El primero es añadir la etiqueta 'ajaxStatus' que nos permite un determinado control sobre las llamadas Ajax. En el indicaremos que cuando se comience una llamada Ajax, se muestre la ventana 'cargando' y cuando se complete dicha llamada, se oculta la ventana:


1
<p:ajaxStatus onstart="cargando.show();" oncomplete="cargando.hide();" />


Por otro lado colocaremos la llamada a dicho control de llamadas Ajax. La mejor forma es añadirlo al template principal de las páginas de la aplicación. Así evitamos tener que repetir la llamada en cada pantalla.

Y por último creamos la ventana 'cargando', la cual se debe de mostrar oculta por defecto y es muy básica, conteniendo unicamente un texto y/o una imagen de carga en proceso


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<p:ajaxStatus onstart="cargando.show();" oncomplete="cargando.hide();" />
<h:panelGroup id="layout" layout="block">
    <h:panelGroup id="header" layout="block">
        <ui:include src="cabecera.xhtml" />
    </h:panelGroup>
    <h:panelGroup id="menuYContenido" layout="block">
        <h:panelGroup id="menuSuperior" layout="block">
            <ui:include src="menuSuperior.xhtml" />
        </h:panelGroup>
     </h:panelGroup>

<p:dialog showHeader="false" widgetVar="cargando" modal="true" height="50" width="200" resizable="false">
    <h:panelGrid columns="1" style="width:100%">
        <h:graphicImage value="/images/ajax-loader.gif" />
        <h:outputText value="#{msg.cargando}"></h:outputText>
    </h:panelGrid>
</p:dialog>