Archivo de la etiqueta: javascript

Validar un solo campo en JQuery Validation

Para validar un único campo de un formulario configurado para ser validado con JQuery Validation tan sólo debes añadir la siguiente linea:

$(_selector_).valid();

donde “_selector_” es el selector JQuery del campo que deseas validar, por ejemplo:

$(“#txt_email”).valid();

Este método, además de poder mostrar/ocultar el error espécifico que hayas configurado en la declaración del método validate(), también devuelve true o false, con lo que podrás determinar además que acciones realizar en función de si la validación se realizó correctamente o no

 

http://jqueryvalidation.org/

Anuncios

jQuery – plugin imgPreview

imgPreview es un plugin para jQuery con el que podremos realizar previsualizaciones de imágenes a modo de tooltip. La forma de uso es sencilla, usamos el tag <a> donde queramos aplicar el tooltip indicando qué imagen aparecerá en el mismo al pasar el ratón por el enlace tooltip:


<a href="https://websenior.wordpress.comg/img/mi-imagen.jpg">tooltip</a>

Disponemos de varias opciones de configuración, como establecer el ancho del tooltip:


$('a').imgPreview({
    imgCSS: {
        width: '200px'
    }
});

En la página oficial podemos documentarnos sobre otras opciones que proporciona el plugin.

Página oficial jQuery imgPreview

Repositorio de código Javascript / AJAX

Ajaxrain es un importante repositorio de código JavaScript, en la mayoría de los casos haciendo uso de AJAX.

Podemos colaborar con nuestros scripts propios si lo deseamos.

Ajaxrain.

Mostrar código fuente en HTML / XHTML

Habremos visto en muchas webs y blogs de wordpress (en este mismo también) que algunas veces se muestran en webs código fuente con un estilo elegante y práctico, puesto que muestra barras de scroll y funcionalidades como copiar al portapapeles, abrir en otra ventana, numeración de líneas, y visualizar mejor o imprimir.

Syntaxhighlighter

Syntaxhighlighter

Hay un código que podremos incluir en nuestros proyectos. Este código se llama Syntaxhighlighter, ha sido creado por Alex Gorbatchev, y es 100% JavaScript.

Desde el siguiente enlace podremos descargarlo y obtener más información:

Syntaxhighlighter.

Abrir enlaces en ventanas nuevas (target=”_blank”) en XHTML

Más de uno se habrá llevado una sorpresa, una amarga sorpresa, al hacer su primer proyecto en XHTML Strict e intentar usar el atributo target en la etiqueta de enlace (target=”_blank”)

<a href="http://www.websenior.es" target="_blank">WebSenior</a>

habrá podido observar como dicho código hace lo que tiene que hacer, abrir el enlace en una nueva ventana, pero si ha intentado validar su web como XHTML Strict el validador le habrá dicho que el atributo target no es válido.

Que no cunda el pánico, usando un poco de Javascript (o muy poco Javascript si usamos un Framework) tendremos solucionado nuestro problema.

Lo primero, evidentemente, es eliminar el target=”_blank” de todo nuestro proyecto, y sustituirlo por rel=”external”.

Lo siguiente es programar en Javascript que queremos el comportamiento de target=”_blank” en las etiquetas a que sean rel=”external”, esto se consigue con el siguiente código, que luego comento.

function linkExternos() {
	if (!document.getElementsByTagName) return;
	var elemsA = document.getElementsByTagName("a");
	for (var i=0; i < elemsA.length; i++) {
		var elemA = elemsA&#91;i&#93;;
		if (elemA.getAttribute("href") && elemA.getAttribute("rel") == "external")
			elemA.target = "_blank";
	}
}
window.onload = linkExternos;
&#91;/sourcecode&#93;

La función <strong>linkExternos </strong>recoge todos los elementos a de nuestro documento XHTML, para cada uno de ellos, se recorre todos sus atributos, en caso de que ese elemento <strong>a</strong> tenga un atributo <strong>href</strong> y otro <strong>rel </strong>con valor <strong>external</strong>, se especifica que su <strong>target</strong> (destino) sea <strong>_blank</strong>. Por último se asigna la función al evento <strong>onload</strong> para que se ejecute cuando el documento sea cargado por el navegador.

Si usamos un framework de Javascript podremos ahorrarnos bastante código. En caso de <strong>jQuery </strong>quedaría así:


$(document).ready(function(){
	$("a[@rel='external']").attr("target", "_blank");
});

Pasar array PHP a JavaScript (JSON)

JSON (JavaScript Object Notation) es un formato de datos con notación JavaScript que últimamente está de moda gracias al auge de las tecnologías AJAX. Digamos que es una alternativa al uso de XML, que libera de peso la respuesta AJAX en algunos casos (no requiere el cierre de etiqueta), hace una mejor representación de estructura de datos y requiere menor coste de procesamiento.

Un caso típico en el que deberíamos usar JSON es la petición de un listado de datos mediante AJAX. Imaginemos que la petición se hace a un archivo PHP (a partir de la versión 5.2  tenemos funcionalidades relacionadas con JSON disponible y activadas por defecto) que genera una estructura datos del listado en la variable $l_a_data con el siguiente formato:

[
Array
(
    [0] => Array
           (
             [nombre] => "Francisco"
             [apellidos] => "Torres"
           )

    [1] => Array
           (
             [nombre] => "Juanma"
             [apellidos] => "Torres"

           )
)

Podríamos fácilmente entonces convertir esta estructura array a una cadena con el formato JSON con la sentencia:


$l_str_json = json_encode($l_a_data);

y enviar esta cadena JSON como response del proceso AJAX. En este caso lo que enviamos es:

[
   {
      "nombre":"Francisco","apellidos":"Torres",
      "nombre":"Juanma","apellidos":"Torres"
   }
]

Para analizar  esta cadena recibida en el código JavaScript simplemente haremos:

var l_a_json = eval('(' + responseJSON + ')');

Con lo que ya tenemos un array en JavaScript con los datos provenientes del response del AJAX invocado que generó los datos de nuestro listado.

Un inconveniente de este método es el uso de eval() en una estructura de datos. Esto nos puede presentar problemas de seguridad, así que sólo deberíamos usarlo en entornos de confianza. Como alternativa y con el objetivo de evitar problemas de seguridad, debemos utilizar algún parseador de JSON de JavaScript, se pueden encontrar en json.org (parte inferior de la página, apartado JavaScript)

Obtrusive Javascript Checker

Plugin para Firefox para localizar la presencia de Javascript Obstrusivo en nuestros desarrollos.

Obtrusive Javascript Checker

En la página de su autor podemos ver su funcionamiento, así como otros soportes de descargas, como en script para GreaseMonkey.