EDITAR UN ITEM DE UNA TABLA POR AJAX
La tabla de clientes la cargamos a través de un while ($registro = mysqli_fetch_array
($sqldevolucion, MYSQLI_ASSOC)) como siempre pero en este caso todo por echo()por
lo complejo de la carga de registros.
o El <td> que lleva el valor a editar (en este caso dirección) debe llevar una id tipo "letra . registro[id]" en este caso quedará V1, V2,... la img de editar lleva:
El script de javascript contiene:
o El <td> que lleva el valor a editar (en este caso dirección) debe llevar una id tipo "letra . registro[id]" en este caso quedará V1, V2,... la img de editar lleva:
- como ID "letra . registro[id]", pero una letra distinta al <td> en este caso quedará I1, I2...
- como TITLE "registro[direccion]"
- como NAME "registro[id]"
El script de javascript contiene:
- Función edicion: al clicar el ícono de editar (lápiz) se activa y hace aparecer el pop-up cajita, con css("top",$(this).offset().top+"px") ponemos la cajita al nivel del editar que clicamos y con la linea siguiente colocamos la arista derecha, sobre la misma del ícono editar , la linea siguiente recupera el valor de id que metimos en el atributo NAME del ícono editar
- Función cancelar:Al clicar el botón can se oculta el pop-up y se lleva a nada el contenido
- Función OK: Ver en el código los detalles,primero, ocultamos el botón cancelar y
aparece el ícono esperando. por AJAX pasamos el nuevo valor puesto en el input del pop-up,
>$("input#nuevovalor").val(); prestar atención al selector para inputs.
Pasamos el par valor/id por POST (usamos escape() para evitar que los caracteres especiales produzcan errores.)
<!--************************HTML CARGAR LA TABLA******************************-->
<head>
<?
include("conexion.php"); // abre la conexión a la base de datos
global $conn; //lo usamos en conexion, lo declaramos acá para no llamar siempre a $GLOBALS[]
?>
<style>
.edicion{
width:14px;
height:14px;
border:none;
cursor:pointer;
}
table{
border-spacing: 0px;
border:none;
}
td{
border-bottom:#333 solid 1px;
margin: 0px;
padding: 5px;
padding-bottom:3px;
padding-top:3px;
}
.caja{ /*es la caja pop-up*/
position:absolute;
top:0px;
left:0px;
padding-left:5px;
padding-top:5px;
height:25px;
width:250px;
background-color:#ffffff;
opacity: 1;
border:#666 solid 1px;
box-shadow: 8px 8px 10px grey;
}
.botoncajita{
margin-left:5px;
padding-top:2px;
cursor:pointer;
float:left;
text-align:center;
height:15px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
border:#999 solid 1px;
}
</style>
</head>
<body>
<table>
<tr>
<td>ID</td>
<td>NOMBRE</td>
<td>DIRECCION</td>
<td>Editar</td>
<td>MAIL</td>
<td>NACIMIENTO</td>
</tr>
<?
if(conectar()){
$sqltxt = "SELECT * FROM clientes LIMIT 1,15";
$sqldevolucion = mysqli_query($conn,$sqltxt);
if (!mysqli_num_rows($sqldevolucion)) {
echo("Error, no se devuelven registros");
} else {
while ($registro = mysqli_fetch_array($sqldevolucion, MYSQLI_ASSOC)){
echo("<tr>");
echo("<td>" . $registro["id"] . "</td>" );
echo("<td>".$registro["nombre"] . "</td>" );
echo("<td id='V" . $registro["id"] . "'>".$registro["direccion"] . "</td>" );
echo("<td>
<img id='I" . $registro["id"] . "' title='" . $registro["direccion"] . "' name='" . $registro["id"] . "' class='edicion' src='boton-editar.png' /></td>" );
echo("<td>".$registro["mail"] . "</td>" );
echo("<td style=' text-align:center;'>".$registro["fecha_nac"] . "</td>" );
echo("</tr>");
}
mysqli_free_result($sqldevolucion); //devuelvo recurso a memoria
mysqli_close($conn); // cierro conexion
}
}else{
echo(mysqli_error($conn));
}
?>
</table>
</div>
<div id="cajita" class="caja">
<div style="float:left;">
<input class="valor" style="font-size:12px;" type="text" name="nuevovalor" value="0" id="nuevovalor" />
</div>
<div id="okedit" class="botoncajita" style="width:25px;">
OK
</div>
<div id="can" class="botoncajita" style="width:40px;">
Cancel
</div>
<div id="esperando" class="botoncajita" style="width:40px;">
<img src="esperando.gif" width="16" height="16" />
</div>
<div style=" clear:both"></div>
</div> <!-- fin cajita -->
</body>
<!--*********************SCRIPT JQUERY (AJAX)*******************************-->
<head>
<script>
$(document).ready(function(){
var id;
var cantidad;
$("#cajita").css("display","none"); //por si acaso desaparece pop-up
$("#esperando").css("display","none"); //por si acasoaparece esperando
$(".edicion").click(function(evento){
$("#esperando").css("display","none"); //por si se trabó el ajax que arranque bien
$("#can").css("display","block"); //por si se trabó el ajax que arranque bien
$("#cajita").css("display","block");
$("#cajita").css("top",$(this).offset().top+"px");
$("#cajita").css("left",$(this).offset().left + $(this).width() - $("#cajita").width() + "px");
id=$(this).attr("name"); // recupero el id del registro que metí en name de la imagen editar
$("#nuevovalor").val($(this).attr("title"));
});
$("#can").click(function(evento){
$("#cajita").css("display","none");
$("#nuevovalor").attr("value"," ");
});
$("#okedit").click(function(evento){
cantidad=$("input#nuevovalor").val(); // recupero el valor nuevo
$("#can").css("display","none"); //desaparece cancelar
$("#esperando").css("display","block"); //aparece esperando
$.ajax({
type: "POST",
url: "tec-php-editar-item-tabla-procesar.php",
data: 'valor=' + escape(cantidad)+ '&id=' + escape(id), //POSTeo el par valor/id
dataType:'json',
success: function(data) {
$("#esperando").css("display","none");
$("#cajita").css("display","none"); //el pop_up que desaparezca
$("#nuevovalor").attr("value"," "); //volvemos el input a nada
$("#V"+id).empty().html(data.newvalor); // borro la dir anterior y escribo la nueva dir en la tabla
$("#I"+id).attr("title", data.newvalor);// corrijo la dirección en el atributo title de la img
},
error: function(request,error) {
$("#esperando").css("display","none"); //El ícono esperando que desaparezca
$("#cajita").css("display","none"); //El pop-up que desaparezca
}
}); //fin ajax
});
});
</script>
<style>
</head>
<!--********SCRIPT PROCESAR.PHP RECIBE ID Y DEVUELVE ARRAY DE ARRAYS*********-->
<?
include("conexion.php"); // abre la conexión a la base de datos
global $conn; //lo usamos en conexion, lo declaramos acá para no llamar siempre a $GLOBALS[]
$valor=$_POST["valor"]; // se recupera el valor pasado de ajax por post
$id=$_POST["id"];
if(conectar()){
$sqltxt="UPDATE clientes SET direccion='" . $valor . "' WHERE id=" . $id;
$sqldevolucion = mysqli_query($conn,$sqltxt);
$sqltxt="SELECT direccion FROM clientes WHERE id=" . $id; //chequeo que se haya modificado
$sqldevolucion = mysqli_query($conn,$sqltxt);
$registro = mysqli_fetch_array($sqldevolucion, MYSQLI_ASSOC);
$resultado = array("newvalor"=> $registro["direccion"]);
//$resultado = array("newvalor"=> "hola");
mysqli_close($conn); // cierro conexion
echo(json_encode($resultado));
}
?>