Archivo de la etiqueta: language html

Acceder a datos JSON con jQuery – jQuery Tips

Una de las maneras para rellenar un formulario dinámicamente en base a una petición AJAX es por medio de JSON.

Supongamos el siguiente escenario. Tenemos un formulario que se tiene que autorellenar en base a una petición AJAX, por ejemplo, le pasamos el código de una persona y nos tiene que mostrar los datos.


// Fichero datos.php

$datos = array(

1 => array('nombre' => 'Yo', 'apellidos' => 'mismo'),

2 => array('nombre' => 'Tu', 'apellidos' => 'aquel'),

);

$codigo = filter_input(INPUT_POST, 'codigo', FILTER_SANITIZE_NUMBER_INT);

foreach ($datos as &$dato) {
 $dato = utf8_encode($dato);
 }
 echo json_encode($datos[$codigo]);


<!-- Fichero formulario.html -->

<form id='formulario'>
 <input type='text' id='codigo'>
 <button type='button' id='buscar'>Buscar Registro</button>
 <input type='text' id='nombre'>
 <input type='text' id='apellidos'>
</form>
<script>
$('#buscar').click(function(){
 $.post('datos.php', {codigo:$('#codigo').val()}, function(data){
 data = JSON.parse(data);
 $('#nombre').val(data.nombre);
 $('#apellidos').val(data.apellidos);
 });
 return false;
});
</script>

En este ejemplo los datos están almacenados dentro de un array, lo normal es que fueran resultado de una consulta SQL.

En el formulario pongo, por ejemplo, el 1 para obtener los datos, estos se mandan vía post al fichero de datos, antes de devolverlos los codifico con utf8_encode para que no de ningún error, luego les damos formato con json_encode, y una vez que lo recibimos los tenemos que tratar con JSON.parse para poder acceder a ellos como si fueran un objeto.

Anuncios

¿Por que el botón reset no vacia los campos hidden? – HTML Tips

Hoy mientras desarrollaba un formulario y comprobaba los datos que enviaba me he dado cuenta de algo que en todos los años que llevo programando no me había dado cuenta, o quizá no me había visto en esa situación. Explico el escenario, tengo un formulario en el cual pongo un rango de fechas y luego en otro campo tengo un autocompletar el cual cuando marco la selección, se queda el nombre en el campo visible y el id en un campo hidden. Al darle a buscar pues me busca los datos relacionados de ese id en ese rango de fechas. Pues bien, a la vez del botón enviar, he puesto un botón reset para limpiar el formulario, y me he dado cuenta que si por ejemplo buscaba solo entre rangos de fechas, sin buscar nada en el autocompletar, me buscaba filtrando por los datos anteriores.

Depurando he visto que si no ponía nada en el campo autocompletar ( el cual al cambiar establecía el valor en el campo hidden) este se mantenía con el valor establecido en la búsqueda anterior.

A esto uno se pregunta ¿el reset no lo borraba todos los datos de un formulario?, pues la respuesta es si y no.

Vamos en la documentación de la w3.org que nos dice acerca del estado hidden en los inputs

“El estado hidden representa un valor el cual no esta permitido que el usuario lo examine o lo manipule”.

Y la definición de reset dice “El estado reset de un button representa un button que cuando se activa restablece el formulario”.

Con estas definiciones, de primeras pensaríamos que no tiene sentido que al pulsar el reset  no se restablezcan los valores de un hidden, pero reflexionemos un momento y hagamosnos una pregunta ¿quien establece el valor del campo hidden? ¿el usuario? ¿o nosotros con una programación? La respuesta es la segunda, el usuario no establece el valor del campo hidden ni lo puede modificar, y la acción del reset la efectúa el usuario, por lo tanto, no puede modificar el valor del hidden.

Para solucionar esto, si estamos usando jQuery podemos hacerlo de una manera muy sencilla

$('button[type=reset]').click(function(){
    $('#idCampoHidden').val('');
});

En este ejemplo estoy usando button, y serviria igual poniendo input[type=reset] y luego en el nombre del campo, donde pone #idCampoHidden, lo sustituiremos por #nuestrocampohidden.
El estado hidden http://www.w3.org/community/webed/wiki/HTML/Elements/input/hidden

El estado reset http://www.w3.org/community/webed/wiki/HTML/Elements/input/reset

HTML5 en versiones anteriores de Internet Explorer 9 – HTML5 Tips

Uno de los problemas que nos encontramos a la hora de diseñar paginas con HTML5 es la compatibilidad con navegadores antiguos. Hay muchos usuarios que usan versiones anteriores a Internet Explorer 9, y en esas versiones, no reconocen los nuevos elementos de HTML5. Una de las maneras de solucionar esto es incluyendo el script HTML5 shiv en la cabecera dentro de un condicional, para que cuando el navegador sea menor que esa versión lo cargue y así pueda leer los elementos HTML5.


<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

El atributo Charset – HTML5 Tips

Uno de los atributos que debemos especificar en toda pagina web es el atributo Charset, este va a definir que tipo de caracteres vamos a utilizar en la web, para que el navegador lo detecte y lo visualice correctamente.

Este atributo, en HTML4 lo definimos de la siguiente manera


<meta http-equiv="content-type" content="text/html; charset=UTF-8">

Con HTML5 definir se ha introducido el atributo charset el y es mas sencillo


<meta class="charset="UTF-8">

Para asegurarnos que todos los navegadores leen la propiedad de codificación de caracteres, la declaración de este debe ser incluida en los primeros 512 caracteres de nuestro documento, es decir, para evitar problemas, debería definirse inmediatamente después de la etiqueta head.

W3schools HTML meta tag

Enhanced by Zemanta