En está oportunidad veremos como realizar la eliminación de registros combinando php + mysql + ajax. Nuestro objetivo es mostrar una relación o lista de todos los empleados, y que cada elemento tenga una opción para ser eliminado, al momento de hacerle clic en este opción, un cuadro de dialogo nos preguntará si deseamos realmente continuar con la operación. Haremos uso de la tabla empleados que hemos usado ya en los 3 tutoriales anteriores. Empezemos entonces.
Quiza te pueda interesar: CRUD con PHP, MySQL y Jquery
Funciones en JavaScript
ajax.js » Este archivo contiene 2 funciones: objetoAjax declara el objeto XMLHttpRequest que usaremos dependiendo del navegador y eliminarDato(idempleado) se encarga de enviar el codigo del empleado que será eliminado.
function objetoAjax(){
var xmlhttp=false;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
function eliminarDato(idempleado){
//donde se mostrará el resultado de la eliminacion
divResultado = document.getElementById('resultado');
//usaremos un cuadro de confirmacion
var eliminar = confirm("De verdad desea eliminar este dato?")
if ( eliminar ) {
//instanciamos el objetoAjax
ajax=objetoAjax();
//uso del medotod GET
//indicamos el archivo que realizará el proceso de eliminación
//junto con un valor que representa el id del empleado
ajax.open("GET", "eliminacion.php?idempleado="+idempleado);
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
//mostrar resultados en esta capa
divResultado.innerHTML = ajax.responseText
}
}
//como hacemos uso del metodo GET
//colocamos null
ajax.send(null)
}
}
Código en PHP
conexion.php » Guarda los datos de la conexión a la base de datos.
<?php //Configuracion de la conexion a base de datos $bd_host = "localhost"; $bd_usuario = "root"; $bd_password = ""; $bd_base = "ribosomatic"; $con = mysql_connect($bd_host, $bd_usuario, $bd_password); mysql_select_db($bd_base, $con); ?>
consulta.php » Lista todos los registros de la tabla empleado. Además cada elemento mostrado tiene la opción de ser eliminado haciendo clic en su ID, así se llamará a la funcion eliminarDato(idempleado) que especificamos en el archivo ajax.js.
<?php
require('conexion.php');
//consulta todos los empleados
$sql=mysql_query("SELECT * FROM empleados",$con);
//muestra los datos consultados
//haremos uso de tabla para tabular los resultados
?>
<table style="border:1px solid #FF0000; color:#000099;width:400px;">
<tr style="background:#99CCCC;">
<td>Codigo</td>
<td>Nombres</td>
<td>Departamento</td>
<td>Sueldo</td>
</tr>
<?php
while($row = mysql_fetch_array($sql)){
echo " <tr>";
//mediante el evento onclick llamaremos a la funcion eliminarDato(), la cual tiene como parametro
//de entrada el ID del empleado
echo " <td><a style=\"text-decoration:underline;cursor:pointer;\" onclick=\"eliminarDato('".$row['idempleado']."')\">".$row['idempleado']."</a></td>";
echo " <td>".$row['nombres']."</td>";
echo " <td>".$row['departamento']."</td>";
echo " <td>".$row['sueldo']."</td>";
echo " </tr>";
}
?>
</table>
eliminacion.php » Se encarga de recibir el parametro idempleado, de la función eliminarDato(idempleado), y mediante una sentencia SQL eliminar dicho registro, al final del proceso se vuelve a llamar al archivo consulta.php para mostrar los registros actuales.
<?php
require('conexion.php');
//variable GET
$idemp=$_GET['idempleado'];
//elimina el registro de la tabla empleados
$sql="DELETE FROM empleados WHERE idempleado=$idemp";
mysql_query($sql,$con);
include('consulta.php');
?>
index.php » Es el archivo principal de nuestro ejemplo, donde llamaremos al archivo ajax.js y también especificaremos una capa (div) llamada resultado.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Eliminacion de registros con AJAX</title>
<script language="JavaScript" type="text/javascript" src="ajax.js"></script>
</head>
<body>
<h2>Eliminar registros de la tabla empleado</h2>
<p>Clic en el código del empleado para eliminar el registro. </p>
<div id="resultado">
<?php
include('consulta.php');
?>
</div>
</body>
</html>
Eso es todo! Recuerden cambiar los valores del archivo conexion.php pues si no lo hacen habra errores. Así finalizamos los cuatro procesos que siempre se realiza en una base de datos: Consulta, Inserción, Actualización y Eliminacion de registros. Pueden descargar el ejemplo y probarlo en su servidor web local. En la sección Ejemplos también pueden ver la puesta en marcha de este tutorial.
Creo que la realizacion de este codigo en AJAX es muy bueno pero lo malo es que yo estoy usuando variables y creo que tengo error yo ahi oajala me puedan ayudar con lo que estoy manejando
saludos
saludos!! y felicitaciones por la web… y los ejemplos que das…. solo queria saber si le puede implementar un efecto de desvanecimiento cuando borras el registro y si podrias dar una solucion… a la indexacion de contenido que se encuentra entre los <div> </div> cuando uno muestra eso en su pagina index solo se indexara el la consulta de datos pero extendiendonos…. supongamos que solo muestras el Nombre y dandole click al nombre abres su informacion completa…. la informacion completa es muy dificil que se indexe salvo que mandes cabezeras html…. te agradeceria si haces un ejemplo de eso.
Gracias de Antemano
Hola CalinSoft, sobre el efecto de desvanecimiento: Existen librerias o script en js que lo pueden realizar. Esta por ejemplo script.aculo.us o uno mas sencillo el fat.js, seguramente has escuchado de ello.
Sobre la indexacion de contenidos: No entendi bien, pero creo que tu quieres que el contenido se indexe, verdad? bueno haciendo uso de Ajax no es posible, (bueno eso fue lo ultimo que lei, hace tiempo), pero una recomendacion que recuerdo es que debemos ser equilibrados al usar Ajax. Voy a investigar por alí haber que encuentro. saludos
hola CalinSoft, solo ahora viendo lo sencillo que expones ajax es que he considerado utilizarlo hasta que lo comprenda mejor.
lo que deseo es enviar todo el formulario y que la insersion, eliminacion y actulizacion la haga el script en el servidor y solo regrese un mensaje para mostrarlo en un alert o algo similar, los ejemplos los he probado localmente y me muestra todo el codigo php como si este no estuviera instalado, puedes responderme al mail.
Gracias
Gracias de antemano, mi pregunta es como cambiar el estado de una variable en la base de datos cuando se cirerre el navegador, utilizando php ajax mysql
Hola Pedro, lo primero que se me viene a la mente , es crear una función en javascript y usando ajax y php realizar tu cambio de estado de la variable, y esa función la llamas desde de un evento de cierre del navegador. creo que puedes usar el objeto window y algunos de sus propiedades o métodos. Todo lo que te he dicho es una idea rapida, pero sería interesante implementarla.
Es un tutorial muy util, llevo tiempo partiendome la cabeza con AJAX y MYSQL.
Yo intentaba buscar si existe alguna manera de enviar las variables desde el php hacia el Javascript y poderlas recoger mediante un bucle.
para poderlas color cada una en la posicion de la tabla adecuada, si necesidad de pegar entera otra vez la tabla.
saludos.
Weno, despues de mucho consegui solucionar mi problema
. Os lo cuento pq creo merece la pena.
La solucion es posible a la funcion eval() de javascript, esto hace posible ejecutar las lineas de codigo contenidas en calquier script.
Lo que quiere decir es que desde php podemos enviar codigo Javascript para ejecutar directamente. de este modo simplemente haceindo esto:
eval(ajax.responseText)
Asi es posible definir una array y recorrerlo desde el java script.
O inlcuso modificar cualquier objeto de la pagina…
Quien quiera saber mas del tema que busque informacion sobre JSON, puede verse un ejemplo en googlecode .
saludos ,
stivilanova.com
Hola, estoy haciendo un “portal” que permita a los empleados de una compañia poder logearse, consultar, ingresar, actualizar y eliminar informacion referente a las actividades que se realizan.
Probe el ejemplo de actualizacion y me funciono perfecto, pero el problemas es que ahora quiero integrarlo al “portal” que estoy haciendo, que mantiene logeado al usuario mediante sesiones (propagacion por GET). ¿Que tengo que hacer para integrarlo a las sesiones (aparte de pasar el ID de la sesion por get)?
Hola, es muy util este comportamiento y me llego en el momento preciso, pero ahora teng un problema y me vota un error Unknow y es que dentro del desarrollo en el que ando, lo que borra el registro es un boton y tiene este codigo:
No se que estoy haciendo mal… si pueden ayudarme les agradeceria mucho.
Lo siento… el codigo del boton dentro de la etiqueta es el siguiente:
onclick=”javascript:eliminarDato()”
la coma que puse entre < y ? es intencional para que me muestre eñl codigo en el foro…. GRACIAS
tengo en una pagina la centencia
< input name="Programar" type="submit" value="Programar" onClick=" ” >
pero cuando entro a la pagina el codigo php se ejecuta sin haber dado click en el boton que debo hacer para que se ejecute solo si le doi click
El articulo es muy bueno ya que nos muestra la manera de conjugar muchos lenguajes de programacion de paginas
Hola,
Hola les comento, estoy muy verde en ajax, he hechado a andar el script de eliminación de datos pero la página no se actualiza, es decir, para ver los resultados es necesario que yo dé un refresh.. alguien sabe que hice mal o que le falta? Veo que usan una div llamada resultados en mi script yo uso tabla para mostrar los resultados dentro de
…. ¿hay una forma de cmabiar el div por table? ESpeor su ayuda. Saludos
komo puedo kitarbel messenger skiner?xq..ahora no me deja entrar en mi messenger habitual!
xfavor cntestarlo
necesito mi antiguo essenger!
Se podria hacer una paginacion si la cantidad de registros son muchos? es que intente adecuar el script de paginacion con este y me borra pero no se actualiza dinamicamente la pagina
Por supuesto Javo, pero tendrias que incluir algunas funciones extras como por ejemplo (una que se me ocurre en este momento) es que si eliminastes un registros de la pagina 7 cuando borres el registro debe cargarte nuevamente la pagina 7. en vez de cargar desde la pagina 1. es una idea: podrias hacerlo guardando en una cookie el numero de pagina actual. todo es teoria pero seria interesante hacer un ejemplo al respecto. saludos
Hola amigos la verdad soy nuevo en esto de ajax, y me siento crudo, al ejcutra este codigo expuesto arriba no deja borrar nada sera algo qeu esoy haciendo mal o que.
cualquier comentario con el codigo ya corregido espero porfavor me lo hagn saber
Hola fernando, si tienes firefox verifica con la consola de error cual puede ser el error, ó mas util aun firebug (extension para firefox) con el fin de especificar o detallar el problema, y así poderte ayudar. saludos.
Estuve probando, este script en la parte de comentarios de mi Blog que programé con PHP y me da un problema, al eliminar un comentario este se elimina correctamente pero una vez eliminado el comentario aparece una copia completa de esa página superpuesta a esta y no entiendo por qué es que sucede eso, alguna idea?
ya está solucionado 🙂
very interesting.
i’m adding in RSS Reader
Hola toy haciendo un portal y me sale un error con la linea de codigo
Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in C:AppServwwwconsulta.php on line 24 alguien podria ayudarme urgente gracias y me sale el mismo error con actualizacion, eliminacion
Hola amigos espero que puedan ayudarme a ponerme en al ruta denuevo, estoy tratando de insertarme en este mundo de ajax y encontre este tutorial excelentemente bueno, todo iba bien hasta que cambie algo y aun no puedo darme cuenta cual fue ese algo espero que me puedan dar indicaciones para volver al buen camino no puedo eliminar registros y ahora no puedo insertarlos espero que me ayuden
http://rapidshare.com/files/127799411/ULTIMO.rar
Hola, es seguró eliminar, modificar o guardar cosas en la base de datos mediante ajax???? y si no es seguro ¿cómo se puede hacer seguro?…
eso es todo, saludos.
Muchas gracias muy buen aporte!
aqui un ejemplito de listado y borrado de registros
—– index.html —-
——- ajax.js ———-
‘;
function objetoAjax(){
var xmlhttp=false;
try {
xmlhttp = new ActiveXObject(“Msxml2.XMLHTTP”);
} catch (e) {
try {
xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!=’undefined’) {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
function MostrarConsulta(datos){
divResultado = document.getElementById(‘resultado’);
divResultado.innerHTML= ‘
ajax=objetoAjax();
ajax.open(“GET”, datos);
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
divResultado.innerHTML = ajax.responseText
}
}
ajax.send(null)
}
function eliminarDato(idempleado){
//donde se mostrará el resultado de la eliminacion
divResultado = document.getElementById(‘resultado’);
//usaremos un cuadro de confirmacion
var eliminar = confirm(“De verdad desea eliminar este dato?”)
if ( eliminar ) {
//instanciamos el objetoAjax
ajax=objetoAjax();
//uso del medotod GET
//indicamos el archivo que realizará el proceso de eliminación
//junto con un valor que representa el id del empleado
ajax.open(“GET”, “consulta.php?ope=1&idempleado=”+idempleado);
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
//mostrar resultados en esta capa
divResultado.innerHTML = ajax.responseText
}
}
//como hacemos uso del metodo GET
//colocamos null
ajax.send(null)
}
}
—— cEmpleado.php ——-
conectar()==true){
$query = “select * from empleados order by nombres”;
$result = @mysql_query($query);
if (!$result)
return false;
else
return $result;
}
}
function eliminar($idemp)
{
$con = new DBManager;
if($con->conectar()==true)
{
//echo”DELETE FROM empleados WHERE idempleado=$idemp”;
$sql=”DELETE FROM empleados WHERE idempleado=’$idemp'”;
$result = @mysql_query($sql);
if (!$result)
return false;
else
return $result;
}
//include(‘consulta.php’);
}
}
?>
———- consulta.php ————-
consultar();
//muestra los datos consultados
echo “Nombres – Departamento – Sueldo n”;
while($row = mysql_fetch_array($consulta)){
echo “
“.$row[‘idempleado’].” – “.$row[‘nombres’].” – “.$row[‘departamento’].” – “.$row[‘sueldo’].”
n”;
}
}
//++++++++++++++++++++++++ MAIN ++++++++++++++++++++++++++++++
//Sleep deja inactivo el script por n segundos
//n es un parametro, en el ejemplo 1 segundo
//esto para poder apreciar el gif animado
sleep(1);
//creamos el objeto $objempleados de la clase cEmpleado
$objempleados=new cEmpleado;
switch($ope)
{
case 0://++++consulta simple a base de datos
consulta_simple($objempleados);
break;
case 1://+++++ Eliminar dato +++++++
$idemp=$_GET[‘idempleado’];
$consulta=$objempleados->eliminar($idemp);
consulta_simple($objempleados);
break;
}
?>
—- la base de datos es la misma —-
falto este fichero
— DBManager.php
conect=$con;
return true;
}
}
?>
Hola, he probado tu codigo y funciona perfecto, pero en mi BD los identificadores de usuarios se componen de letras y numeros, y no se por que no me funciona, en cambio si el id solo contiene numeros si va O_o ¿que tendria que cambiar?
Hola, a ver si me podeis ayudar en esto.
Quiero una simple pagina php en la que de entrada se muestre unos datos mysql. Al pulsar el boton “modificar” utilice AJAX para mostrar en la misma pagina un formulario con esos mismos datos en campos editables. Y al pulsar guardar utilice AJAX para almacenar los datos y volverlos a mostrar sin campos editables.
Puedo mostrar los datos, puedo pulsar “modificar” y se muestran en campos editables. Problema: cuando envio el formulario tengo que hacer referencia a un archivo php para almacenarlos en la bbdd, y luego ya no vuelve a la pagina inicial.
Mis archivos:
-index.php: hace una llamada a showdevice.js y muestra los datos recibidos en un div. Tiene el boton modificar que hace una llamada a modifydevice.js que muestra los datos en el div en campos modificables.
-showdevice.js: aqui esta la creacion del objeto xmlhttpobject y la llamada a showdevice.php.
-showdevice.php: realiza la consulta a la bbdd para devolver los datos con ajax a index.php.
-modifydevice.js: creacion del objeto xmlhttpobject y la llamada a modifydevice.php.
-modifydevice.php: realiza la consulta a la bbdd para devolver los datos en forma de FORMULARIO a index.php. Este formulario incluye el boton que llama a insertdevice.php.
-insertdevice.php: se encarga de almacenar los datos en la bbdd. PERO DE AQUI NO PUEDO VOLVER….!!!!
Muestro el contenido a continuacion:
index.php———————————
html xmlns=”http://www.w3.org/1999/xhtml”>
showDevice(1)
Para modificar los datos del dispositivo haga clic en Modificar.
showDevice.js——————————-
var xmlhttp;
function showDevice(str)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert (“Browser does not support HTTP Request”);
return;
}
var url=”showDevice.php”;
url=url+”?q=”+str;
url=url+”&sid=”+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open(“GET”,url,true);
xmlhttp.send(null);
}
function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById(“infoDevice”).innerHTML=xmlhttp.responseText;
}
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject(“Microsoft.XMLHTTP”);
}
return null;
}
showDevice.php———————————-
<?php
$q=$_GET["q"];
$sql="SELECT * FROM infodevice WHERE id = '".$q."'";
$result = mysql_query($sql);
$row = mysql_fetch_array($result);
echo "
“;
mysql_close($connect);
?>
modifyDevice.js——————————-
//window.onload=modifyDevice(1);
var xmlhttp;
function modifyDevice(str)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert (“Browser does not support HTTP Request”);
return;
}
var url=”modifyDevice.php”;
url=url+”?q=”+str;
url=url+”&sid=”+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open(“GET”,url,true);
xmlhttp.send(null);
}
function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById(“infoDevice”).innerHTML=xmlhttp.responseText;
}
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject(“Microsoft.XMLHTTP”);
}
return null;
}
modifyDevice.php—————————-
<?php
$q=$_GET["q"];
$sql="SELECT * FROM infodevice WHERE id = '".$q."'";
$result = mysql_query($sql);
$row = mysql_fetch_array($result);
echo "
“;
mysql_close($connect);
?>
insertDevice.php——————————–
connect.php——————————
db1config.php—————————–
mysql—————————————-
CREATE TABLE IF NOT EXISTS `infodevice` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`nombre` varchar(30) NOT NULL,
`propietario` varchar(30) NOT NULL,
`serie` varchar(5) NOT NULL,
`version` varchar(20) NOT NULL,
`telefono` varchar(18) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;
—
— Dumping data for table `infodevice`
—
INSERT INTO `infodevice` (`id`, `nombre`, `propietario`, `serie`, `version`, `telefono`) VALUES
(1, ‘qwrqwer’, ‘aa’, ’23’, ‘1.1’, ‘9111111111’);
———————————————
THANKS!!!!
Disculpa tu ejemplo me funciono de maravailla pero cuando intento adecuarlo a una tabla donde el idempleado es un idusuario q trabaja con varchar no trabaja que puedoo hacer es error de conversion de datos o como son llaves primarias no me deja eliminar???
oye juvit… no entiendo a ke te refieres con lo de DBManager…ya ke al ejecutar me sale lo siguiente:
Fatal error: Class ‘DBManager’ not found in C:\AppServ\www\empleados2\cEmpleado.php on line 19
espero me ayudes… gracias amigo
cualkier cosa mi correo es: ander666._@hotmail.com
Saludos, el code está excelente pero creo que tengo el mismo problemita que Venus, por que necesito añadir mas parámetros a la funcion de eliminar para usarla como funcion genérica en varias secciones y con distintas tablas, pero creo que mis parámetros al ser de texto, no me ejecuta la función de javascript, espero me puedan ayudar, gracias de antemano y muy buenos los ejemplos aquí.
Saludos
psss ya probe el codigo solo que al momento de ejecutar me da este problema .$row[‘idempleado’]. en la tabla donde en realidad deberia aparecer el id del empleado donde esta el error???
Oye muy bueno tu tutorial eh, he estado buscando ejemplos para programar en ajax y entender mejor, pero no encontraba y esto que pusiste aqui me cayo como anillo al dedo por que precisamente estaba buscando hacer un tipo de borrado como el tuyo. muchas gracias :D, lo único que me preocupa ahora es como hacer para que no se muestr toda la tabla :):D y poner un tipo /p pagina siguiente. 😀 sale gracias.
Aquí está la respuesta a los que desen eliminar registros donde la llave primaria sea una cadena.
Hay que concatenar la cadena con ” para que mysql lo lea como cadena y no como numero…
$Num='”‘.$Num_alum.'”‘;
🙂
me falla la linea
echo ”
“;
y ya modiifque hice muschas cosas y nomas noooo
Excelente trabajo me ayudo mucho, es muy sencillo de entenderla. Muchas gracias
Excelente información, puntual y fácil de entender , muchas gracias por sus aportes , me fueron de mucha ayuda para una prueba de mi universidad , les comparto un manual de como Instalar MySQL paso a paso .