RibosoMatic Blog

En esta oportunidad vamos a desarrollar un aplicación haciendo uso de AJAX para actualizar registros (UPDATE SET [...]) . Usaremos la tabla empleados, que hemos venido usando en los artículos anteriores.

Objetivo

Lo que deseamos lograr es: En la página principal se muestre una lista de todos lo empleados registrados y que al hacer clic en el Nro Identificador de éste se active un formulario para realizar los cambios necesarios de sus datos, al hacer clic en el boton Actualizar, el formulario desaparecerá y el registro se actualizará. La aplicación que desarrollaremos no será muy elaborada, pero cumplirá con nuestro objetivo descrito.

Desarrollo

Entonces empecemos primero dando una explicación general del desarrollo, de acuerdo al objetivo:

• Realizaremos un script en PHP que conectará con la BD y realizará una consulta de todos los empleados. Pero además se nos pide que al hacer clic en ID del empleado se active un formulario y se muestren los datos del empleado seleccionado. Para capturar el ID crearemos una función en JavaScript, y para mostrar los datos del empleado seleccionado en un formulario crearemos un script en PHP.
• El formulario contendrá un boton Actualizar que realizará la accción de guardar los cambios del empleado. Para el envio de los datos haremos uso de una función en JavaScript y para realizar la actualización de los datos, un script en PHP con la sentencia UPDATE.
• Y por supuesto todo lo antes descrito haciendo uso del objeto XMLHttpRequest.

Funciones en JavaScript

ajax.js » Contiene 3 funciones. 1) Crea el objeto XMLHttpRequest dependiendo del navegador, 2) Enviará los datos del empleado para que se guardados y 3) Realiza una consulta del empleado mediante su ID.

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 enviarDatosEmpleado(){

  //donde se mostrará lo resultados


  divResultado = document.getElementById('resultado');

  divFormulario = document.getElementById('formulario');

  //valores de los inputs

  id=document.frmempleado.idempleado.value;

  nom=document.frmempleado.nombres.value;

  dep=document.frmempleado.departamento.value;


  suel=document.frmempleado.sueldo.value;

  

  //instanciamos el objetoAjax

  ajax=objetoAjax();

  //usando del medoto POST

  //archivo que realizará la operacion


  //actualizacion.php

  ajax.open("POST", "actualizacion.php",true);

  ajax.onreadystatechange=function() {

  if (ajax.readyState==4) {

  //mostrar los nuevos registros en esta capa


  divResultado.innerHTML = ajax.responseText

  //mostrar un mensaje de actualizacion correcta

  divFormulario.innerHTML = "<p style="border:1px solid red; width:400px;">La actualizaci&oacute;n se realiz&oacute; correctamente</p>";

  }


  }

  //muy importante este encabezado ya que hacemos uso de un formulario

  ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

  //enviando los valores

  ajax.send("idempleado="+id+"&nombres="+nom+"&departamento="+dep+"&sueldo="+suel)


}

function pedirDatos(idempleado){

  //donde se mostrará el formulario con los datos

  divFormulario = document.getElementById('formulario');

  

  //instanciamos el objetoAjax


  ajax=objetoAjax();

  //uso del medotod GET

  ajax.open("GET", "consulta_por_id.php?idemp="+idempleado);

  ajax.onreadystatechange=function() {

  if (ajax.readyState==4) {


  //mostrar resultados en esta capa

  divFormulario.innerHTML = ajax.responseText

  //mostrar el formulario

  divFormulario.style.display="block";

  }


  }

  //como hacemos uso del metodo GET

  //colocamos null

  ajax.send(null)

}

Scripts en PHP: Consultas y Actualización de registros

consulta.php » Se conecta con la base de datos, realiza la consulta de todos los empleados y los muestra en una tabla. Hay que notar que en los items de la columna Código se agregar en el evento onclick la función pedirDatos().

<?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 todos los empleados

  $sql=mysql_query("SELECT * FROM empleados",$con);

  //muestra los datos consultados


  //haremos uso de tabla para tabular los resultados

?>

  <table>

  <tr>

  <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 PedirDatos(), la cual tiene como parametro

	  //de entrada el ID del empleado


	  echo " 		<td><a style="text-decoration:underline;cursor:pointer;" onclick="pedirDatos('".$row['idempleado']."')">".$row['idempleado']."</a></td>";

	  echo " 		<td>".$row['nombres']."</td>";


	  echo " 		<td>".$row['departamento']."</td>";

	  echo " 		<td>".$row['sueldo']."</td>";

	  echo "	</tr>";


  }

?>

</table>

consulta_por_id.php » Este script realiza la consulta del empleado por su ID y el resultado los muestra en un formulario, listo para ser modificado. Note que en la etiqueta de inicio de <form>, hacemos uso del evento onsubmit para llamar a la función enviarDatosEmpleado().

<?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 los datos del empleado por su id

  $idemp=$_GET['idemp'];


  $sql=mysql_query("SELECT * FROM empleados WHERE idempleado=$idemp",$con);

  $row = mysql_fetch_array($sql);

  //valores de las consultas

  $nom=$row['nombres'];

  $dep=$row['departamento'];


  $suel=$row['sueldo'];

  //muestra los datos consultados en los campos del formulario

?>

  <form name="frmempleado" action="" 

  onsubmit="enviarDatosEmpleado(); return false">


  <input name="idempleado" type="hidden" value="<?php echo $idemp; ?>" />

  <p>Nombres 

  <input name="nombres" type="text" value="<?php echo $nom; ?>" />


  </p>

  <p>Departamento 

  <select name="departamento">

<?php

  echo "<option value="".$dep."">".$dep."</option>"


?>

  <option value="Informatica">Informatica</option>

  <option value="Contabilidad">Contabilidad</option>

  <option value="Administracion">Administracion</option>


  <option value="Logistica">Logistica</option>

  </select>

  </p>

  <p>Sueldo <strong>S/.</strong>


  <input name="sueldo" type="text" value="<?php echo $suel; ?>" />

  </p>

  <p>


  <input type="submit" name="Submit" value="Actualizar" />

  </p>

  </form>

actualizacion.php » Este script realiza un UPDATE del registro que vamos a modificar, y luego llama al script consulta.php que mostrará todos los registros, incluido pues el recientemente modificado.

<?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); 

  //variables POST

  $idemp=$_POST['idempleado'];

  $nom=$_POST['nombres'];

  $dep=$_POST['departamento'];


  $suel=$_POST['sueldo'];

  //actualiza los datos del empleados

  $sql="UPDATE empleados SET nombres='$nom', departamento='$dep', sueldo='$suel' WHERE idempleado=$idemp";

  mysql_query($sql,$con);

  include('consulta.php');


?>

Página principal

empleados_actualizacion.php » Esta es la pagina principal. Llamamos al archivo JavaScript, también hacemos un include del archivo consulta.php.

<html>

  <head>


  <title>Registro con AJAX</title>

  <script language="JavaScript" type="text/javascript" src="ajax.js"></script>

  </head>


  <body>

  <h2>Modificar datos del empleado</h2>

  <p>Clic en el c&oacute;digo del empleado para modificar sus datos. </p>

  <div id="formulario">


  </div>

  <div id="resultado"><?php include('consulta.php');?></div>

  </body>

  </html>

Como mencione antes, la aplicación desarrollada es bien sencilla y he tratado de ser lo mas explicativo posible, pero si no estuviera claro pueden comentarlo. El archivo en .zip puedes descargarlo y probarlo. Puede ver la puesta en marcha de esta aplicación en la nueva sección Ejemplos.

Actualización [18.11.06]

La aplicación no funcionaba perfectamente en Internet Explorer , me di cuenta de ello gracias a los comentarios, así que probe la solución de Erick Blanco, la de usar el metodo POST en lugar de GET, para enviar el id del empleado en la función pedirDatos del archivo ajax.js, como también en el archivo consulta_por_id.php para recibir ese dato. 

La función pedirDatos, del archivo ajax.js queda así:

function pedirDatos(idempleado){
    //donde se mostrará el formulario con los datos
    divFormulario = document.getElementById('formulario');
    
    //instanciamos el objetoAjax
    ajax=objetoAjax();
    
    ajax.open("POST", "consulta_por_id.php");
    ajax.onreadystatechange=function() {
        if (ajax.readyState==4) {
            //mostrar resultados en esta capa
            divFormulario.innerHTML = ajax.responseText
            //mostrar el formulario
            divFormulario.style.display="block";
        }
    }
    
    ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    //enviando los valores
    ajax.send("idemp="+idempleado)
}

Ahora en el archivo consulta_por_id.php, reemplazamos está linea:

$idemp=$_GET['idemp'];

por esta otra:

$idemp=$_POST['idemp'];

Como verán hacemos uso del metodo POST en lugar de GET. En lo personal, uso el método POST para envio de valores por formulario y GET para envio por URL. Pero vale la pena probar con los dos métodos. Si no funciona uno, funcionará el otro. Mil disculpas por la tardía solución. El archivo del ejemplo está corregido.

Descargar ejemplo: Actualización de datos en AJAX