Posted on July 5, 2009 by Damian
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:
<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:
<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:
<?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!!!
Posted on June 10, 2009 by Damian
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ñade el material a comprar</p>
<div id="div_1">
<label>Material de compra
<span class="small">Añ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
Posted on May 26, 2009 by Damian
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“
<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.
$usuario=utf8_decode($_POST['nombre`]);
Con este método JQuery ya no me da problemas con los caracteres especiales. Saludos!!!
UPDATE: SEGUNDA PARTE
Posted on May 14, 2009 by Damian
Hola a todos, les quiero dar la bienvenida a mi blog. Mi nombre es Damián , soy técnico informático y ultimante más diseñador/programador web que otra cosa. En el blog solo pretendo poner algun que otro ejemplo de problemas que me encuentro dia a dia a la hora de hacer una página web. Más que nada serán ayudas para algunos y a mi personalmente me servirá de cuaderno de anotaciones por si algun día topo otra vez con el mismo problema.
No esperen actualizaciones diarias ni mucho menos , porque últimamente ando fatal de tiempo. Eso sí en la medida de lo posible pondre utilidades , recursos, noticias y lo que vaya encontrando por internet.
Una vez hecha las presentaciones, empiezo a explicar un poco de que trata JQuery.
Para simplificar, podríamos decir que jQuery es un framework o librería para Javascript(para el que no sabe aun que es Javascript , le recomiendo empezar con este libro) que simplemente nos hace la vida más fácil en todos los sentidos, haciendonos así ahorrar código y tiempo.
Por poner un ejemplo digamos que tenes el siguiente campo de texto:
<input id="campo1" name="campo1" type="text" value="Esto es un campo de texto" />
Para seleccionar el valor de este campo con Javascript seria de la siguiente forma:
//Mediante su id
document.getElementById("campo1").value();
Esto mismo con JQuery lo hariamos de la siguiente manera:
//Mediante su id
$('#campo1').text();
Como pueden apreciar se ahorra mucho código para un operación tan sencilla como esa. Existen muchas otras formas de seleccionar un objeto:
//Todos los objetos de una misma clase
$(" .nombreDeLaClase")
//Todos los div de la clase .noticias
$("div .noticas")
//Todos los link
$("a")
//Todos los elementos del tipo x hijos del elemento tipo y
$("y >x")
Y como esto muchos más. Acá podes encontrar una lista completa de selectores.
También podemos manejar todos los eventos tales como click , onmouseover, blur, focus , ….etc . Se podria decir que el más importante que vamos a usar es el evento ready.
El evento ready sirve para ejecutar una función cuando termine de cargar el DOM de la página , tal y como hace su homólogo “window.onload=” en Javascript. La única (y más importante) diferencia es que mientras en Javascript solo podemos llamar a este evento para una sola función , con JQuery podremos ejecutar todas las funciones que querramos.
Veamos un ejemplo de como asignar un evento click a un enlace una vez que la página cargue todos los elementos:
//La forma es la siguiente $(document).ready(function () {...funciones... });
//Para nuestro ejemplo asignaremos un evento click al enlance para que cambie de color un div asignado
//codigo Javascript que usualmente se coloca antes de la etiqueta
<script src="js/jquery-latest.js" type="text/javascript"></script>
<script type
="text/javascript"><!--
$
(document
).
ready(function () {
$
("#link_color").
click( function(){
$
("#div_colores").
css("background-color","red");
});
});
// --></script>
//Codigo HTML del ejemplo
<input type="button" value="Cambiar a rojo" id="link_color">
<div id="div_colores" style="width: 50px; height: 50px; background-color: #191919;"></div>
Ejecutar ejemplo 1
Ahora por ejemplo si quisieras crear un botón que alterne dos colores podriamos usar la función toggle de la siguiente manera:
//codigo Javascript que usualmente se coloca antes de la etiqueta
<script src="js/jquery-latest.js" type="text/javascript"></script>
<script type
="text/javascript"><!--
$
(document
).
ready(function () {
$
("#link_color").
toggle(
function(){
$
("#div_colores").
css("background-color","red");
},
function(){
$
("#div_colores").
css("background-color","green");
}
);
});
// --></script>
//Codigo HTML del ejemplo
<input type="button" value="Cambiar color" id="link_color2">
<div id="div_colores" style="width: 50px; height: 50px; background-color: #191919;"></div>
Ejecutar ejemplo 2
Como hemos visto además del manejar los eventos podemos acceder a los estilos de una forma muy facil:
//Para añadir una clase
$("#div_colores").addClass("nombreclase");
//Para quitar una clase
$("#div_colores").removeClass("nombreclase");
//Para cambiar multiple propiedades css
$("#div_colores").css({"width":"120px","height":"20px"});
var cssObj = {
'background-color' : '#ddd',
'font-weight' : '',
'color' : 'rgb(0,40,244)'
}
$('#div_colores').css(cssObj);
//Para cambiar una sola propiedad
$('#div_colores').css("color","red");
Veamos otro ejemplo:
$("p").hover(function () {
$(this).css({'background-color' : 'yellow', 'font-weight' : 'bolder'});
}, function () {
var cssObj = {
'background-color' : '#ddd',
'font-weight' : '',
'color' : 'rgb(0,40,244)'
}
$(this).css(cssObj);
});
//codigo html
<p>
Pasa el rator por encima
</p>
<p>
O pasalo por aca.
</p>
Ejecutar ejemplo 3
Y para terminar por hoy vamos a ver una de las cosas más atractivas de JQuery y un motivo por el cual la mayoría de nosotros empezamos a utilizarlo. Hablo de los efectos
Hay un monton de efectos , y si no encontramos el que queremos seguro que alguien habrá echo un plugin que lo traiga.
Para los efectos mejor veamos el Ejemplo 4 directamente.
Eso es todo para empezar. Espero que haya servido de ayuda. Saludos
Con tu lector preferido.
Via Email.
Por Twitter.