BLOG DE DISEÑO WEB CORUÑA

Un poco de todo, recursos, tutoriales, noticias, anuncios...

Editar campos de formularios en el lugar con jQuery, Ajax y PHP

19/DIC/2013 60.435 visitas Ver comentarios
Editar campos de formularios en el lugar con jQuery, Ajax y PHP

ADVERTENCIA: Este artículo tiene más de 6 meses de antigüedad. Puede que esta información ya se encuentre obsoleta o haya nuevas y mejores opciones.

ACTUALIZACIÓN 26-12-2013: Como me han vaciado la tabla con las pruebas, he puesto una mini validación comprobando que el valor ingresado no esté vacío ni con espacios en blanco.

Señoras y señores, pasen y vean... lo que traigo a continuación es un pequeño código que llevo mucho tiempo queriendo hacer y que aplicaría en muchísimos proyectos y por la razón que sea nunca lo hago.

Me he tomado unos minutos para hacer este pequeño tutorial que, espero, te sirva para poder editar valores de una tabla mysql directamente cuando la muestras, sin necesidad de ir a una pantalla de edición.

El tutorial que viene a continuación está como está, sólo sirve para editar y no tengo planeado agregarle ninguna función nueva, ni inserciones ni nada de lo que no contiene ahora mismo.

Pero bueno, vamos a ello. El código se divide en varias partes, la primera es crear nuestra base de datos (en este caso de usuarios) la cual está incluida en el archivo para descargar que tienes justo arriba de este texto.

El segundo paso es crear nuestro HTML. Un poco de CSS (en mi ejemplo está en el head y no en un fichero externo como debería) para crear la apariencia de la tabla, los campos de formulario y los iconos que indicarán las acciones a realizar.

En tercer lugar, tenemos la tabla en sí. Pero la vamos a generar mediante una llamada ajax remota, así que sólo creamos su esqueleto, sin olvidar aplicar la clase editinplace, y definimos sólamente la cabecera de las columnas.

Por último ya sólo nos queda el corazón del código que es el javascript. Siempre vinculando en primer lugar la última versión de jQuery (vale cualquiera a partir de la v1.8 por usar on en vez de live).

Destripando el código. Nuestro PHP remoto no tendrá más que 2 opciones, una donde recibe el POST con el valor a modificar en la base de datos y otra donde se le indica por GET que pinte la tabla en pantalla. Las funciones utilizadas son básicas y no merece especial mención, salvo la opción de pintar la tabla que estará generando un completo ARRAY con todos los resultados y que pintaremos en pantalla en formato JSON, utilizando la función json_encode de PHP.

Pero lo importante se encuentra en el javascript que recoge ese JSON. Cuando cargamos la tabla, haremos que el valor recibido por AJAX se transforme en un objeto JSON utilizando la función parseJSON incluida en jQuery.

Una vez obtenido el objeto JSON, lo recorreremos para ir creando cada una de nuestras filas de la tabla. Para ello tenemos que tener en cuenta lo siguiente:

  • El primer TD debe contener la clase ID
  • Cada una del resto de celdas (TDs) deben contener el atributo de HTML5, data-campo seguido del nombre del campo en la tabla MySQL (ejemplo: data-campo="nombre" para asignar el campo de la tabla llamado nombre).
  • El valor obtenido del JSON debe ir dentro de la etiqueta SPAN, ya que ésta se utilizará para agregar la funcionalidad de edición.
  • Las celdas que van a ser editables deben llevar la clase EDITABLE (en minúsculas).
  • Antes de la tabla deberemos crear un DIV con la clase MENSAJE que será el encargado de mostrar los resultados de nuestras operaciones.

Para evitar que pasen cosas extrañas, mientras se abre un campo para edición se deshabilita el resto, simplemente quitándole a cada SPAN la clase EDITABLE, la cual volveremos a asignar una vez finalizada la operación ya sea procesando o cancelando la edición.

Finalmente, como el valor almacenado será igual al ingresado en el campo, evitamos recargar la tabla (ya que no verás nada nuevo), pero si realizas cambios y pulsas F5 en tu navegador, verás que la nueva tabla generada es igual a la que dejaste antes de presionar la tecla de actualizar.

En el botón superior, tienes una demo totalmente funcional con la que puedes probar y jugar con el ejemplo.

Espero que te guste, que te sea útil y que cualquier mejora, sugerencia, error, cambio o comentario que quieras hacerme lo hagas en los comentarios de aquí abajo.

Y si te ha parecido útil, ya sabes, be social!

Código 1 - HTML
<table class="editinplace">
	<tr>
		<th>Cod.</th>
		<th>Nombre</th>
		<th>Apellidos</th>
		<th>E-mail</th>
		<th>Tel&eacute;fono</th>
	</tr>
</table>
Código 2 - JAVASCRIPT
$(document).ready(function() 
	{
		/* OBTENEMOS TABLA */
		$.ajax({
			type: "GET",
			url: "editinplace.php?tabla=1"
		})
		.done(function(json) {
			json = $.parseJSON(json)
			for(var i=0;i<json.length;i++)
			{
				$('.editinplace').append(
					"<tr><td class='id'>"+json[i].id+"</td><td class='editable' data-campo='nombre'><span>"+json[i].nombre+"</span></td><td class='editable' data-campo='apellidos'><span>"+json[i].apellidos+"</span></td><td class='editable' data-campo='email'><span>"+json[i].email+"</span></td><td class='editable' data-campo='telefono'><span>"+json[i].telefono+"</span></td></tr>");
			}
		});
		
		var td,campo,valor,id;
		$(document).on("click","td.editable span",function(e)
		{
			e.preventDefault();
			$("td:not(.id)").removeClass("editable");
			td=$(this).closest("td");
			campo=$(this).closest("td").data("campo");
			valor=$(this).text();
			id=$(this).closest("tr").find(".id").text();
			td.text("").html("<input type='text' name='"+campo+"' value='"+valor+"'><a class='enlace guardar' href='#'>Guardar</a><a class='enlace cancelar' href='#'>Cancelar</a>");
		});
		
		$(document).on("click",".cancelar",function(e)
		{
			e.preventDefault();
			td.html("<span>"+valor+"</span>");
			$("td:not(.id)").addClass("editable");
		});
		
		$(document).on("click",".guardar",function(e)
		{
			$(".mensaje").html("<img src='images/loading.gif'>");
			e.preventDefault();
			nuevovalor=$(this).closest("td").find("input").val();
			$.ajax({
				type: "POST",
				url: "editinplace.php",
				data: { campo: campo, valor: nuevovalor, id:id }
			})
			.done(function( msg ) {
				$(".mensaje").html(msg);
				td.html("<span>"+nuevovalor+"</span>");
				$("td:not(.id)").addClass("editable");
				setTimeout(function() {$('.ok,.ko').fadeOut('fast');}, 3000);
			});
		});
	});
Código 3 - PHP
$dbhost="localhost";
$dbname="editinplace";
$dbuser="root";
$dbpass="";
$db = new mysqli($dbhost,$dbuser,$dbpass,$dbname);

if (isset($_POST) && count($_POST)>0)
{
	if ($db->connect_errno) 
	{
		die ("<span class='ko'>Fallo al conectar a MySQL: (" . $db->connect_errno . ") " . $db->connect_error."</span>");
	}
	else
	{
		$query=$db->query("update editinplace set ".$_POST["campo"]."='".$_POST["valor"]."' where idusuario='".intval($_POST["id"])."' limit 1");
		if ($query) echo "<span class='ok'>Valores modificados correctamente.</span>";
		else echo "<span class='ko'>".$db->error."</span>";
	}
}

if (isset($_GET) && count($_GET)>0)
{
	if ($db->connect_errno) 
	{
		die ("<span class='ko'>Fallo al conectar a MySQL: (" . $db->connect_errno . ") " . $db->connect_error."</span>");
	}
	else
	{
		$query=$db->query("select * from editinplace order by idusuario asc");
		$datos=array();
		while ($usuarios=$query->fetch_array())
		{
			$datos[]=array(	"id"=>$usuarios["idusuario"],
							"nombre"=>$usuarios["nombre"],
							"apellidos"=>$usuarios["apellidos"],
							"email"=>$usuarios["email"],
							"telefono"=>$usuarios["telefono"]
			);
		}
		echo json_encode($datos);
	}
}

Acerca del Autor...

Macadia, es una agencia de Diseño Web Coruña, especializada en maquetación css y desarrollo de páginas web a medida con más de 20 años de experiencia en el desarrollo de páginas web profesionales. Si te ha gustado este artículo, por favor, ayúdanos a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

Los comentarios han sido desactivados momentaneamente a la espera de que Disqus adapte su plataforma a la próxima RGPD que entra en vigor desde el 25/05/2018