Tag Archive for: ajax

Enviar formularios con AJAX y jQuery parte II

Categories: JQuery, Tutoriales - Tags: , ,

Hace mucho tiempo escribí en el blog como enviar un formulario con AJAX y jQuery mediante el plugin jquery.form.js. A día de hoy y con mucha más experiencia en jQuery prefiero escribir mis propios códigos en lugar de utilizar tantos plugins.
Por lo que hoy les voy a explicar como enviar un formulario con AJAX gracias a jQuery y sin usar ningún plugin.
Read more

Como integrar Goo.gl en tu web en 5 minutos

Categories: Tutoriales - Tags: ,

Desde que salió el nuevo acortador de urls de Google intenté encontrar la manera de integrarlo en una página web. A través de un post donde explicaban como sacaron el código fuente de un addon para Google Chrome logré encontrar una clase de PHP que te permite integrar Goo.gl en tu web fácilmente y que comparto con ustedes a continuación.
Read more

Como usar AJAX Auto Suggest V2.0

Categories: Recursos, Tutoriales - Tags: ,

AJAX Autosuggest v2

Yo personalmente las pocas veces que he implementado un Auto Suggest o caja de sugerencias en mis proyectos he utilizado AJAX Auto Suggest V2.0. No es que haya probado muchos , pero en su día este fue el que más me convencio por su facilidad de uso y de personalización.

Para utilizarlo primero debemos incluir sus archivos:

1
2
3

<link type="text/css" rel="stylesheet" href="autosuggest_inquisitor.css">
 
<script src="bsn.AutoSuggest_2.1.3.js" type="text/javascript"></script>

Crear un campo de texto y asignarle un Id:

1
2

 
<input type="text" style="width: 200px; color: rgb(204, 204, 204);" id="materiales_input" name="materiales" autocomplete="off">

Luego definimos algunas opciones y creamos el objeto autosuggest:

1
2
3
4
5
6
7
8
9
10
11

function autosuggest(){
var options = {
	script: "get_materiales.php?limit=6&",//página la cual recibirá la llamada AJAX
	varname: "materiales",// nombre de la variable que contendra el valor escrito
	json:false,//Podemos elegir JSON o XML
	maxresults:10,//Un máximo de resulados para mostrar
       timeout:9999,//numero en milisegundos antes de que se cierre la lista de valores sugeridos
	noresults:'Ingresar nuevo material a la base de datos' //valor que muestra en caso de no encontrar resultados
};
var as = new bsn.AutoSuggest('materiales_input',  options); //creamos el objeto AutoSuggest
}

Para más opciones consultar la página del autor.

Llamamos a la función cuando cargue la página:

1

<body onload="autosuggest();">

Por último creamos un archivo PHP que devuelva los resultados de búsqueda(en este caso XML) para que se muestren en las sugerencias.

get_materiales.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
29
30
31
32
33
34
35
36
37
38
39
40
41

<? 
header ("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Fecha del pasado 
	header ("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); // siempre modificado
	header ("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
	header ("Pragma: no-cache"); // HTTP/1.0
 
include_once('config/db.php'); 
$conn=get_db_conn();
$input=utf8_decode(cleanQuery($_GET['materiales']));
$query='SELECT * FROM categoria_materiales WHERE nombreMaterial LIKE \'%'.$input.'%\'';
$materiales=mysql_query($query,$conn);
 
if (isset($_REQUEST['json']))
	{
		header("Content-Type: application/json" );
 
		echo "{\"results\": [";
		$arr = array();
		while ($row=mysql_fetch_assoc($materiales))
		{
 
			$arr[] = "{\"id\": \"".$row['idCatMaterial']."\", \"value\": \"".$row['nombreMaterial']."\", \"info\": \"\"}";
		}
		echo implode(", ", $arr);
		echo "]}";
	}
	else
	{
header("Content-Type: text/xml");
 
		echo "<?xml version=\"1.0\" encoding=\"ISO-8859-1\" ?><results>";
		while ($row=mysql_fetch_assoc($materiales))
		{
 
			echo "<rs id=\"".$row['idCatMaterial']."\" info=\"\">".$row['nombreMaterial']."</rs>";
		}
		echo "</results>";
 
	}	
 
	?>

Explicando get_materiales.php:


Formato XML:

1
2
3
4
5

<results>
	<rs id="1" info="Cheshire">Foobar</rs>
	<rs id="2" info="">Foobarfly</rs>
	<rs id="3" info="">Foobarnacle</rs>
</results>


Formato JSON:

1
2
3
4
5

{ results: [
	{ id: "1", value: "Foobar", info: "Cheshire" },
	{ id: "2", value: "Foobarfly", info: "" },
	{ id: "3", value: "Foobarnacle", info: "Essex" }
] }

Como anotacíon en mi caso al enviar el formulario compruebo si el material ingresado existe en la base de datos y sino existe lo agrego. Por ese motivo en noresults muestro el mensaje de “Añadir a la base de datos”.Para ello hago lo siguiente:

1
2
3
4
5
6
7
8
9
10

<?
include_once('db.php'); 
$conn=get_db_conn();
if($_POST['materiales']!=''){
    $material=cleanQuery($_POST['materiales']);
	$existe=mysql_query("SELECT * FROM materiales WHERE nombreMaterial ='$material'",$conn);
					if (mysql_num_rows($existe) == 0) mysql_query("INSERT INTO materiales (nombreMaterial) VALUES ('$material')",$conn);	  
 
}
?>

Con todo esto tendriamos el autosuggest o caja de sugerencias funcionando a la perfección.

Pueden ver un EJEMPLO FUNCIONANDO
O tambien DESCARGARSE EL CÓDIGO

Un saludo a todos, espero sus comentarios!

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.

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!!!

Pueden ver un ejemplo sin plugin en “Como enviar un formulario AJAX con jQuery parte II”

Gif animados para AJAX

Categories: Recursos - Tags:

Todos conocemos los famosos gif animados que aparecen cuando una página carga con AJAX.
loader

Ademas de este existen varias formas más y diferentes tamaños, como barras , estrellas, y un sin fin de colores. Pero para que vamos a coleccionar tantos archivos si podemos crearlos de una forma sencilla en 2 simples pasos.

Para eso solo tenemos que ir a http://www.ajaxload.info/ y seleccionar el modelo y color de loader que queremos y despues hacer click en descargar. Y si, es tan sencillo como suena. :D

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

Te gusta?

© Copyright - Mas que Wordpress - Tutoriales, recursos web, JQuery y PHP, Wordpress , twitter y muchos recursos más - by Timersys