Archivo de la etiqueta: Javascript

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

Conocer la longitud y latitud en Google Maps

Si habéis trabajado o trabajáis, os pensáis trabajar con el API de Google Maps, esta web os va a ser de mucha utilidad http://universimmedia.pagesperso-orange.fr/geo/loc.htm ya que poniéndole la dirección del lugar que buscáis o moviendo el marcador os va a devolver la latitud y longitud, y nos va a venir muy bien para poder diseñar nuestros propios mapas con el API de Google Maps.

Web de la API v3 de Google Maps https://developers.google.com/maps/documentation/javascript/?hl=es

Funciones anonimas en PHP – PHP Tips

El otro día en la entrada cargando clases php automaticamente en el ultimo ejemplo usaba una función anomima o clausura para lanzar la función spl.

La definición que nos da la documentación es:

Las funciones anónimas, también conocidas como clausuras (closures), permiten la creación de funciones que no tienen un nombre especificado.
 

Estas funciones fueron introducidas en PHP 5.3 y su uso es prácticamente igual que cuando definimos funciones en Javascript.


//Ejemplo de definición de función en Javascript

var miFuncion = function (nombre) {

document.write('Tu nombre es ' + nombre);

};

miFuncion('Ruben'); // Escribe 'Tu nombre es Ruben'


// Ejemplo de definición de función anónima en PHP

$miFuncion = function ($nombre) {

echo 'Tu nombre es '. $nombre;

}

$miFuncion('Ruben'); //Escribe 'Tu nombre es Ruben'

Se puede ver en los dos ejemplos que el uso y definición de ambas es prácticamente igual. Otro de los usos para estas funciones es como callback en funciones tengan esa opción.


echo preg_replace_callback('~-([a-z])~', function ($coincidencia) {
return strtoupper($coincidencia[1]);
}, 'hola-mundo');
// Devuelve holaMundo

Para mas información sobre las funciones anónimas http://www.php.net/manual/es/functions.anonymous.php

Enhanced by Zemanta

Obtener el valor seleccionado en un Select con jQuery – jQuery Tips

JQueryUIImaginemos que queremos conocer que valor hay seleccionado en un campo select, para comprobar su valor o lo que necesitemos. Para hacer esto utilizaremos val().


<select id='ciudades' name='ciudades'>

<option value='BAR'>Barcelona</option>

<option value='MAD'>Madrid</option>

<option value='ZGZ'>Zaragoza</option>

</select>

<script>

$('#ciudades').change(function(){

var ciudad = $(this).val()

alert('Has seleccionado ' + ciudad);

});
</script>

En este ejemplo nos aparece un select en el cual nos da la opción de seleccionar entre tres ciudades, cuando cambiemos el valor nos mostrara un mensaje en pantalla en el cual nos mostrara el valor del value de la ciudad seleccionada.

Enhanced by Zemanta

Input autocompletable sin Javascript – HTML Tips

El elemento datalist

Otro de los nuevos elementos que trae el HTML5 es el elemento datalist.  La documentación acerca de este elemento nos dice lo siguiente:

The datalist element represents a set of option elements that represent predefined options for other controls. In the rendering, the datalist element represents nothing and it, along with its children, should be hidden.
 

Es decir, el elemento datalist representa un conjunto de opciones que nos muestran opciones predefinidas para otros controles. En la visualización el elemento y sus hijos están ocultos.

¿Como podemos utilizarlo?

A la hora de incluirlo dentro de nuestro código definimos el elemento y su conjunto de opciones, este elemento lo vincularemos por ejemplo con un campo input


<label>Airport: <input type="text" list="airports" name="to" />
<datalist id="<span class=&quot;hiddenSpellError&quot; pre=&quot;&quot;>airports</span>"></datalist>
value='ATL' label="Atlanta">
value='MEM' label="Memphis">
value='LHR' label="London Heathrow">
value='LAX' label="Los Angeles">
value='FRA' label="Frankfurt">
 </datalist>

Al pulsar la tecla L se muestra los aeropuertos que empiezan con L
Al pulsar la tecla L se muestra los aeropuertos que empiezan con L

Como se ve en la imagen, nos aparece el value en negrita y  el valor de label un poco mas claro, y una vez seleccionado el valor, en el campo de texto se queda el valor del value.

Estos elementos pueden ser reutilizados dentro de una pagina web, por ejemplo si quisiéramos poner una lista de aeropuertos de origen y destino, nos podría valer con el mismo datalist.

Este elemento esta soportado por todos los navegadores a excepción de Safari.

Mas información:

http://www.w3.org/TR/html5/forms.html#the-datalist-element

http://www.w3schools.com/tags/tag_datalist.asp

Enhanced by Zemanta

Integrar Google Translator en nuestra web – Google Tips

Hoy he vuelto a revisitar el complemento de Google para traducir una pagina web a cualquier idioma. En lineas generales lo ha hecho bastante bien, aunque, hay me he encontrado unos cuantos inconvenientes.

No voy a explicar aquí como integrarlo ya la web que genera el código a integrar esta muy clara y nos lo explica muy bien http://translate.google.com/translate_tools.

El primero es muy visual, ya que en la web que he traducido, estoy usando bootstrap y la barra de traducción de Google me tapa todo el menú.

El segundo ha sido, vamos a calificarlo como gracioso, ya que en la web que he traducido, hay palabras sueltas en inglés y cuando traduces la pagina al inglés, te traduce los términos ingleses al castellano.

Este segundo problema, mirando la documentación para webmasters he encontrado la manera de solucionarlo, y es establecer la clase “notranslate” a las palabras o frases que no quieres que traduzca. Por ejemplo


<p>La etiqueta <span class='notranslate'>form</span> se utiliza para crear formularios web</p>

Otra de las cosas a tener en cuenta a la hora de realizar traducciones de paginas web, sobre todo a la hora de posicionamiento es que, la web traducida no sera indexada en el directorio de Google. Lo dice clarito en la documentación

Search engine indexing
The automatically translated version of your web page will not be indexed by search engines.

Mas información: https://support.google.com/translate/#2641276

Enhanced by Zemanta

¿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