Obtener valores de formulario en JSF con JQUERY


En esta entrada explicare un poco el conflicto que tiene JQuery con JSF,  todos sabemos obtener el valor de un elemento del DOM con javascript. Por ejemplo de un input llamado nombre:

<input type="text" id="nombre" />

Suponiendo que el codigo anterior es html puro y esta bajo un formulario cualquiera, vamos a obtener el valor a través de javascript.


function obtenerValor(){

var valor = document.getElementById("nombre").value;

alert(valor);

}

Ahora vamos a lo mismo, pero con JQUERY

$(document).ready(function(){
var nombre =$("#nombre").value;
alert(nombre);
});

Ahora veremos lo mismo pero con JSF.

Formulario JSF:

<h:form id="formulario">

<h:inputText id="nombre" value="#{managedBean.nombre}" />

</h:form>

Ahora obtenderemos el valor de JSF con javascript:

function obtenerValor(){
var nombre = document.getElementById("formulario:nombre").value;
alert(nombre);
}

Se dan cuenta la diferencia entre JSF y HTML? en javascript debemos tener el valor del id del formulario mas el id del input, de esta forma obtendremos el valor del input en jsf, ahora veremos la gran diferencia entre JQUERY y javascript a la hora de hablar sobre JSF con el mismo formulario anterior; en JQUERY se obtiene de esta forma:

$(document).ready(function(){
var nombre = $("#formulario\\:nombre").value;
alert(nombre);
});

La razón del conflicto es por los dos puntos, por alguna razón JQuery tiene problemas al procesar los dos puntos y debemos aplicar el doble back slash, para que tome los dos puntos como literales.
De esta forma podremos obtener el valor de un elemento JSF con JQuery, cualquier consulta me la pueden hacer en los comentarios, saludos!.

Acerca de Pablo Videla

Estudiante de ingeniería informática DuocUC, actualmente trabajando como Ingeniero de Software.

Publicado el febrero 17, 2012 en Programación y etiquetado en , , , , , , . Guarda el enlace permanente. 4 comentarios.

  1. estebanfuentealba

    $(function(){
    $(“#formulario”).submit(function(){
    alert($(this).serialize());
    return false;
    });
    });

    Saludos choro!

  2. Wena Koala, a la otra explicanos el codigo xD

    http://api.jquery.com/serialize/ para los que pasen por acá

    Explicación: Después de hacer el submit al formulario, envía un alert con todos los datos de éste.

  3. Me podrían cómo utilizar jquery co el plugin de validate.jquery.js dentro de jsf2, porque no puedo hacer ningún tipo de validación

    • Me puedes dar unos ejemplos, no he usado ese plugin, pero te debo recordar que en JSF si no le colocas la propiedad prependId=”false” al formulario, los elementos del formulario siempre llevaran el id del formulario + el id del elemento.

      Supongamos que tienes
      (lo dejare como pseudocodigo, wordpress me borro las etiquetas jsf)
      formulario id=”formulario”
      input=”elemento”
      formulario/>

      Esto en jquery se debe llamar asi $("#formulario\\:elemento");

      Comprueba los errores javascript que te deben aparecer en la consola de errores en el navegador, mientras mas informacion me des, mas completa será mi respuesta, saludos.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: