Edit place me
En este artículo vamos a explicar como crear un objeto o contenido editable en línea sin necesidad de utilizar plugins que no te acaban de satisfacer o realizar la acción que realmente deseas.
Si habéis buscado un poco por internet sobre el asunto, os habréis topados con distintos plugins que os podrían satisfacer como por ejemplo: jEditable o EditInPlace entre otros.
Pensándolo un poquito y desarrollando un poco en jQuery, en pocas líneas podemos conseguir el mismo efecto o mejor ya que la edición del código será mucho más sencilla debido a que lo has programado tu y no dependes de ningún plugin. La personalización será total.
Bien, vamos a ilustrar un ejemplo en el cual tendremos un párrafo que podremos editar en línea al hacer click en él apareciendo un input o formulario como el anterior.
Las tecnologías que vamos a emplear para ello serán: HTML, PHP, jQuery y AJAX.
El HTML lo vamos a utilizar para mostrar el párrafo y los inputs necesarios.
El código PHP se utilizará para acceder a la base de datos y mostrar los datos del parráfo y también para actualizar ese campo.
La combinación de jQuery-Ajax para acceder a información del servidor sin necesidad de recargar la página. Es decir, vamos a actualizar la información depositada en el campo accediendo al servidor sin necesidad de recargar.
Lo primero que vamos a ver es como recoger la información de la base de datos para depositarla en el párrafo HTML.
Entonces en el <body> tendremos lo siguiente:
<?php
$conexion = new mysqli(DB_SERVER, DB_SERVER_USERNAME, DB_SERVER_PASSWORD, DB_DATABASE);
$result = $conexion->query("SELECT `titulo`, `texto` FROM `jeip` WHERE id=1");
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$data = array('titulo' => $row['titulo'], 'texto' => $row['texto']);
}
}
?>
Utilizamos la clase «mysqli» de PHP para realizar una conexión con nuestra base de datos obteniendo los resultados que nos interesa.
Seguidamente, mostramos el párrafo con la información recogida de la base de datos y tendremos un contenedor vacío al que le añadiremos el formulario de edición tras hacer click en el párrafo:
<p id="editme"><?=$data['titulo']?></p> <div id="form_save"></div>
Ahora en el <head> de la página añadiremos la librería jQuery y los scripts necesarios para llevar a cabo la acción que se pretende:
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#editme').live('click', function() {
var data = $(this).html();
$(this).empty();
$('#form_save').append('<input type="text" id="campo" name="campo" value="'+data+'" />');
$('#form_save').append('<input type="button" id="save" name="save" value="save" />');
});
$('#save').live('click', function() {
var dataString = 'value='+$('#campo').val();
//alert(dataString);
$.ajax({
type: "POST",
url: "edit.php",
data: dataString,
success: function(data) {
$('#form_save').empty();
$('#editme').html(data);
}
});
});
});
</script>
Como vemos, el documento está esperando a que se haga click en el elemento con id=»editme» que no es más que el párrafo con la información recogida de la base de datos.
Al hacer click en este elemento pasamos a recoger su contenido y a armar el formulario de edición.
La segunda parte del código jQuery está a la espera de que se pulse en el botón con id=»save». En este caso, editaremos el campo que aparece y pulsaremos en el botón que aparece para ejecutar el ajax que lo único que hace es actualizar el campo en la base de datos con la nueva información enviada a través de este formulario.
El archivo «edit.php» que se utiliza en el ajax contiene lo siguiente:
$conexion = new mysqli(DB_SERVER, DB_SERVER_USERNAME, DB_SERVER_PASSWORD, DB_DATABASE); $update = "UPDATE `jeip` SET `titulo`='".$_POST['value']."' WHERE id=1"; $conexion->query($update); echo $_POST['value'];
Simplemente conecta con la base de datos asociada, realiza la query para realizar una actualización y la ejecuta retornando los datos enviados.
Autor
Te ha servido? Valora esta entrada!
Comparte en las redes sociales
¿Buscas trabajo de programador?
Hola, se que ha pasado tiempo desde que hiciste este articulo, pero lo podrias actualizar para verlo y descargarlo por favor
Gracias
Hola,
Precisamente estamos reformando todos los artículos del blog. Esperamos llegar a este artículo pronto.
Saludos
Estimado, muy buen articulo. Pero que funcion debe hacer el boton cancel?
$(‘#form_save’).append(»);
$(‘#save’).live(‘click’, function() {
})
Gracias
Hola,
En el ejemplo en funcionamiento el botón cancel hace una recarga de la página:
$(‘#cancel’).live(‘click’, function() {
window.location = ‘index.php’;
});
Me servió de mucho gracias