Tag Archive for: JQuery

28May 2010 5 Comments */?>

Que necesitan ?

Categories: Recursos - Tags: , , ,

Hola a todos!! En este post no voy a explicar ningun plugin , ni hablar de JQuery , ni juegos , ni nada. Tan solo les quiero preguntar a ustedes, mis lectores ¿Que necesitan?

Si hace tiempo que buscan algun tutorial o tienen visto alguno que no deja de todo claro las cosas. Encontraron un plugin raro de JQuery y no le sacan la vuelta a como usarlo. No entienden bien algun tema de PHP o Mysql. Hoy están de suerte, dejen en los comentarios que necesitan y si puedo los iré ayudando.

Eso es todo , un saludo!!!

24May 2010 2 Comments */?>

Como crear un script para GreaseMonkey con JQuery

Categories: Tutoriales - Tags: ,

En mi post anterior prometí que iba a explicar un poco de que trata GreaseMonkey y como lo prometido es deuda aca estamos.

Como bien dice la wikipedia Greasemonkey es una extensión para el navegador Mozilla Firefox e Iceweasel que permite, por medio de pequeñas porciones de código creadas por usuarios, modificar el comportamiento de páginas web específicas. Con esta extensión es posible mejorar la experiencia de lectura de un sitio web, hacerlo más usable, añadir nuevas funciones a las páginas web, corregir errores, mejorar servicios de búsquedas y muchas otras cosas más.

Estas pequeñas o no tan pequeñas porciones de código estan creadas por diversos usuarios de internet en lenguaje javascript y se les llama user scripts. Los nombres de dichos script tienen el formato xxxxxx.user.js , donde xxxxxx es el nombre que querramos ponerle.

Ahora veamos como es un user script por dentro empezando por la cabezera y sus @

1
2
3
4
5
6
7
// ==UserScript==
// @name          eMessages Timersys  
// @namespace  http://masquewordpress.com 
// @description   eMessages tool to display messages in eRepublik 
// @require        http://direccionweb.com/jquery.js  
// @include        http://ww*.erepublik.com/*
// ==/UserScript==
  • @name :nombre del programa
  • @namespace :web del autor o otra dirección de interes
  • @description :descripción del programa
  • @include : Página web en la cual nuestro script funcionará
  • @require : A diferencia del resto esta no es obligataria y tan solo la debemos usar cuando querramos cargar uno o más archivos externos. En este caso lo voy a usar para cargar JQuery

A partir de la cabezera todo lo que sigue es código Javascript. En nuestro caso podemos usar JQueryya que hemos incluido el archivo en la cabezera metadata.

Además Greasemonkey dispone de su propia API. Con la cual por ejemplo podemos hacer llamada AJAX de forma similar a como lo hacemos con JQuery.

1
2
3
4
5
6
7
8
9
10
jQuery(document).ready(function(){
				GM_xmlhttpRequest({
	method: 'GET',
      url: 'http://masquewordpress.com/erepublik/ajax_progreso.php?usuario=12',
 
	onload:function(response){
			  $('.column:first').prepend( response.responseText);
 
    }	
	});

Con esta explicación se pueden dar un pequeña idea de como funciona GreaseMonkey. La mayor base de datos de user scripts está en userscripts.org
.
En taringa hay 2 buenos tutoriales para los que quieran empezar: Parte I + Parte II
Documentación de GreaseMonkey (en ingles)

01May 2010 3 Comments */?>

JQuery nightMode Plugin

Categories: JQuery, Plugins jQuery - Tags: , ,

Download JQuery nightMode Plugin

/////////////////////////ESPAÑOL //////////////////////

Anoche estaba aburrido y me puse a trabajar en un plugin para JQuery ya que nunca habia echo ninguno . Así nacio nightMode Plugin que es simplemente un script chiquitito que cambia el color de las letras y el fondo de pantalla. Con eso logramos ahorrar un poco de energia apagando algunos pixeles de nuestra pantalla y además nos facilita la lectura. Espero que les guste!!

El color tanto de las letras o el fondo se puede cambiar pasando opciones.

Uso:

1
 <a id="nightmode">Turn nightmode On/off</a>
1
2
3
4
5
6
 $(document).ready(function(){
 
               $('#nightmode').click(function(){
                           $('body').nightMode();
                });
 });

Tan solo cambiar body por cualquier selector válido

También se puede ejecutar con opciones

1
2
3
4
5
 var options={
      color: '#ffffff',
     background:'#ccc'
 }
 $('body').nightMode(options);

Pueden probar como funciona haciendo click en la lamparita que aparece en la parte superior derecha de mi blog 😀

Descargar JQuery nightMode Plugin

////////////////////////ENGLISH/////////////////////////////

JQuery nightMode Plugin
its a funny tiny plugin that will allow you to change your background and letter colors for a night mode. Saving energy turning off pixels of your screen and allowing you to have a confortable read .

Letter colors and background can be moddified by options

Ussage:

1
 <a id="nightmode">Turn nightmode On/off</a>
1
2
3
4
5
6
 $(document).ready(function(){
 
               $('#nightmode').click(function(){
                           $('body').nightMode();
                });
 });

Just change body to any valid selector you wish

Can also be called with options:

1
2
3
4
5
 var options={
      color: '#ffffff',
      background:'#ccc'
 }
 $('body').nightMode(options);

You can try how it works by clicking on the light bulb on the top right corner of my blog 😀
Download JQuery nightMode Plugin

06Abr 2010 34 Comments */?>

Acentos y caracteres especiales con Ajax y JQuery II parte

Categories: JQuery - Tags: ,

Hace un tiempo escribí un post acerca de los acentos y caracteres especiales con AJAX y JQuery que explicaba como salvar este problema en los formularios enviados por AJAX.

El problema es que esta solución no abarca cuando con JQuery hacemos un .load() de información con AJAX y para variar nos salen cuadraditos o rombos negros con un signo de interrogación adentro. con caracteres como á, é, í, ó, ú ,Á, É, Í, Ó, Ú, ñ, Ñ ,º ,ö, Ö, ü, Ü, etc

Para salvar esto tan solo tenemos que configurar JQuery.ajax() de la siguiente forma:

1
2
3
4
5
6
 
$.ajaxSetup({
'beforeSend' : function(xhr) {
xhr.overrideMimeType('text/html; charset=iso-8859-1');
}
});

Con esa opción forzamos que el encabezado de respuesta sea iso-8859-1 y no UTF-8.

UPDATE:

Este método solo funciona con FF ya que IE no soporta xhr.overrideMimeType como bien comento Ignacio en los comentarios. Una forma de solucionar esto es hacer lo siguiente:
Modificar el codigo inicial

1
2
3
4
5
6
7
8
9
10
$.ajaxSetup({
'beforeSend' : function(xhr) {
try{
xhr.overrideMimeType('text/html; charset=iso-8859-1');
}
catch(e){
 
 
}
}});

Y luego hay que agregar en nuestro archivo PHP

1
<?php header( 'Content-type: text/html; charset=iso-8859-1' );?>

Mandando el encabezado con PHP lograremos que funcione en IE. Un saludo , hagan pruebas y comenten que yo no tuve mucho tiempo.

UPDATE II:
Ignacio comenta que para ASP habria que usar el metodo :
Response.ContentType=”text/html; charset=iso-8859-1?

Un saludo espero que les haya servido de ayuda.

05Jul 2009 20 Comments */?>

Como enviar un formulario via AJAX con JQuery

Categories: JQuery, Tutoriales - Tags: , , ,

Hoy en dia y gracias a JQuery cualquiera puede implementar AJAX en sus webs para hacerlas más dinámicas. Hoy debido a todo el tema de la fiebre porcina cierran los boliches así que ya que me quedo en casa aprovecho y les cuento como poder usar el plugin jquery.forms para enviar un formulario mediante AJAX de una forma super sencilla.

Para empezar necesitamos un formulario. Vamos a usar de ejemplo un formulario de contácto sencillo:

1
2
3
4
5
<form id="myForm" action="contacto.php" method="post" style="height:200px;"> 
    <label>Nombre:</label> <input type="text" name="name" /> 
    <label>Mensaje:</label> <textarea name="mensaje"></textarea> 
    <input type="submit" value="Enviar" /> <div id="ajax_loader"><img id="loader_gif" src="loader.gif" style=" display:none;"/></div>
</form>

Una vez tengamos el codigo HTML del formulario tan solo debemos añadir el plugin y ejecutarlo una vez el DOM este cargado añadiendo las opciones que creamos convenientes.
Hay diferentes gif animados para ajax, si quieren alguno diferente echen un vistazo al último artículo que escribí.
Para consultar las diferente opciones de jquery.form visiten su web.

index.php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script src="js/jquery-latest.js" type="text/javascript"></script>
 <script src="js/jquery.form.js" type="text/javascript"></script> 
 
<script type="text/javascript">
 
        // esperamos que el DOM cargue
        $(document).ready(function() { 
            // definimos las opciones del plugin AJAX FORM
            var opciones= {
                               beforeSubmit: mostrarLoader, //funcion que se ejecuta antes de enviar el form
                               success: mostrarRespuesta //funcion que se ejecuta una vez enviado el formulario
            };
             //asignamos el plugin ajaxForm al formulario myForm y le pasamos las opciones
            $('#myForm').ajaxForm(opciones) ; 
 
             //lugar donde defino las funciones que utilizo dentro de "opciones"
             function mostrarLoader(){
                          $(#loader_gif).fadeIn("slow"); //muestro el loader de ajax
             };
             function mostrarRespuesta (responseText){
                           alert("Mensaje enviado: "+responseText);  //responseText es lo que devuelve la página contacto.php. Si en contacto.php hacemos echo "Hola" , la variable responseText = "Hola" . Aca hago un alert con el valor de response text
                          $("#loader_gif").fadeOut("slow"); // Hago desaparecer el loader de ajax
                          $("#ajax_loader").append("<br>Mensaje: "+responseText); // Aca utilizo la función append de JQuery para añadir el responseText  dentro del div "ajax_loader"
             };
 
        }); 
 
</script>

Este ejemplo es muy simple. El action del formulario apunta a contacto.php y es ahi donde hay que poner las funciones que queramos, como por ejemplo que nos envie un mail con el mensaje y nombre que aparece en el formulario. Si no estuvieramos usando JQuery y el plugin de jquery.form, al hacer click en “Enviar” nuestro navegador cargaria la página contacto.php como suele pasar normalmente. En este caso gracias al AJAX el contenido del formulario se enviara mediante la variable $_POST a la página contacto.php de una forma invisible al usuario y una vez que se envie correctamente se va a ejecutar este simple código:

contacto.php:

1
2
3
4
5
<?php
if($_POST['mensaje'] != ''){
	echo $_POST['mensaje'];
}
?>

Lo que hacemos aca es un echo del mensaje enviado que aunque para el usuario pasa inadvertido , podremos mostrarlo con “responseText”.

Ver ejemplo
Descargar código

Si quieren ver un ejemplo de un formulario de contacto con AJAX, pueden probar este.

Espero que haya servido de ayuda. Un saludo a todos!!!

10Jun 2009 61 Comments */?>

Añadir campos a un formulario dinámicamente con JQuery

Categories: JQuery, Tutoriales - Tags: ,

formulario_dinamico

En uno de mis ultimos proyectos tuve la necesidad de crear un formulario donde el cliente pudiera añadir campos de texto a medida que lo fuera necesitando, y a su vez quitarlos si ya no le eran necesarios.

Esto se puede realizar de una forma muy sencilla con JQuery. Suponiendo que tenemos el siguiente código HTML

<div id="stylized" class="myform" style="margin:20px auto;">
<form id="form" name="form" method="post" action="index.php">
 
<div id="material_comprado"  > </div>  
 
<h1>Compra de material</h1>
<p>Si es necesario a&ntilde;ade el material a comprar</p>
<div id="div_1">
<label>Material de compra
<span class="small">A&ntilde;ade los materiales</span>
</label>
 
    <input  type="text"  name="materiales[]" id="materiales1" style="width:200px;" /> <span style="float:left;padding: 8px 0px 8px 8px;">Cantidad:</span> <input type="text"   name="cantidadmateriales[]"  style="width:40px;" /><input class="bt_plus" id="1" type="button" value="+" /><div class="error_form"></div>
</div>
 
 
 
 
<button type="submit" class="boton">Save</button>
<div class="spacer"></div>
</form>
</div>

Con este código y añadiendole un poco de estilo tendriamos un pequeño formulario como el que muestra la imagen.

Ahora solo queda añadir unas cuantas lineas de JQuery para que funciones:

$(document).ready(function() {
	//ACA le asigno el evento click a cada boton de la clase bt_plus y llamo a la funcion addField
		$(".bt_plus").each(function (el){
			$(this).bind("click",addField);
									 });
							});
 
 
function addField(){
// ID del elemento div quitandole la palabra "div_" de delante. Pasi asi poder aumentar el número. Esta parte no es necesaria pero yo la utilizaba ya que cada campo de mi formulario tenia un autosuggest , así que dejo como seria por si a alguien le hace falta.
 
var clickID = parseInt($(this).parent('div').attr('id').replace('div_',''));
 
// Genero el nuevo numero id
var newID = (clickID+1);
 
// Creo un clon del elemento div que contiene los campos de texto
$newClone = $('#div_'+clickID).clone(true);
 
//Le asigno el nuevo numero id
$newClone.attr("id",'div_'+newID);
 
//Asigno nuevo id al primer campo input dentro del div y le borro cualquier valor que tenga asi no copia lo ultimo que hayas escrito.(igual que antes no es necesario tener un id)
$newClone.children("input").eq(0).attr("id",'materiales'+newID).val('');
 
//Borro el valor del segundo campo input(este caso es el campo de cantidad)
$newClone.children("input").eq(1).val('');
 
//Asigno nuevo id al boton
$newClone.children("input").eq(2).attr("id",newID)
 
//Inserto el div clonado y modificado despues del div original
$newClone.insertAfter($('#div_'+clickID));
 
//Cambio el signo "+" por el signo "-" y le quito el evento addfield
$("#"+clickID).val('-').unbind("click",addField);
 
//Ahora le asigno el evento delRow para que borre la fial en caso de hacer click
$("#"+clickID).bind("click",delRow);					
 
}
 
 
function delRow() {
// Funcion que destruye el elemento actual una vez echo el click
$(this).parent('div').remove();
 
}

Como siempre debemos añadir la ultima version de JQuery y luego nuestro script.

<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" src="jquery.addfield.js"></script>

Este mismo ejemplo se puede aplicar en cualquier otro lado, solo es cuestion de jugar un poco. Espero que les haya gustado. Saludoss

Ejemplo Online
Descargar Ejemplo

26May 2009 27 Comments */?>

Acentos y caracteres especiales con Ajax y JQuery

Categories: JQuery - Tags: ,

Unos de mis primeros problemas al usar jquery.forms o $.Ajax era que los acentos ,la ñ , etc no eran ingresados correctamente en la base de datos y por lo tanto no se mostraban correctamente en mis programas y por lo general aparecian como cuadraditos o rombos negros con un signo de interrogación adentro.
Algunos de los caracteres afectados:

á, é, í, ó, ú ,Á, É, Í, Ó, Ú, ñ, Ñ ,º ,ö, Ö, ü, Ü

Una forma simple para solucionar esto es hacer lo siguiente:

En el formulario agregar accept-charset=”utf-8

1
2
3
<form id="formulario" action="index.php" accept-charset="utf-8" method="post">
<input type="input" name="nombre"/>
</form>

Y a la hora de recibir el dato ya sea mediante $_POST o $_GET tenemos que hacer un utf8_decode() y ya estará listo el valor para ingresar en la base de datos.

1
$usuario=utf8_decode($_POST['nombre`]);

Con este método JQuery ya no me da problemas con los caracteres especiales. Saludos!!!

UPDATE: SEGUNDA PARTE