En el artículo anterior vimos que es posible capturar todos los elementos de los bloques div y su ubicación mediante la función JavaScript obtenerElementos(). Entonces nos toca ahora enviar esa cadena de valores a un script PHP para que se encargue de cortarlos en los fragmentos correspondientes a los nombres de los empleados (contratados y despedidos) y guardalos en la base de datos.

Pero antes de eso vamos a modificar la funcion obtenerElementos() para que solo envie la cadena de valores y divida a los elementos de cada bloque por un slash ( / ), esa cadena obtenida la pasamos a una función EnviarDatos() que explicaremos luego. La idea es que la funcion obtenerElementos() envie este tipo de cadena: empleado_1_grupo_1, empleado2_grupo_1 / empleado_1_grupo2, empleado_2_grupo_2 

function obtenerElementos() {
 var secciones = document.getElementsByClassName('seccion');
 var alerttext = '';
 var separador = '';
 secciones.each(function(seccion) {
  alerttext += separador + Sortable.sequence(seccion);
  separador = "/";
 });
 EnviarDatos(alerttext);
 return false;
}

Veamos ahora la función EnviarDatos() junto con la función que nos permitirá usar el objeto XMLHttpRequest. En nuestro caso separamos estás funciones en un archivo al que llamamos ajax.js

function Ajax(){
 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 EnviarDatos(cadena){
 ajax.Ajax();
 ajax.open("POST", "guardar.php",true);
 ajax.onreadystatechange=function(){
  if (ajax.readyState==4) {
   alert(ajax.responseText);
  }
 }
 ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 ajax.send("cadena="+cadena)
}

Bueno la función Ajax es la que siempre usamos para crear el objeto XMLHttpRequest. Nos enfocamos en EnviarDatos(), este recibe la cadena que la función obtenerElementos() le paso y lo envia mediante método POST al archivo guardar.php. Cuando el archivo guardar.php acabe su proceso entonces aparecerá un mensaje en un alert.

El archivo que realizará el proceso de guardar, o mas bien dicho modificar las dos tablas es guardar.php, veamos su código:

<?php
 require('conexion.php');
 function ElementosEnBlanco(){
  mysql_query("DELETE FROM contratado");
  mysql_query("DELETE FROM despedido");
 }
 $cadena=$_POST['cadena'];
 $cadenas=explode('/',$cadena);
 $nro_cadenas=count($cadenas);
 $i=0;
 ElementosEnBlanco();
 while($i<$nro_cadenas){
  $elementos=explode(',',$cadenas[$i]);
  $nro_elementos=count($elementos);
  $j=0;
  while($j<$nro_elementos){
   if($elementos[$j]!=""){
    switch($i){
     case 0:
      mysql_query("INSERT INTO contratado(nombre_contratado) VALUES ('$elementos[$j]')",$con);
     break;
     case 1:
      mysql_query("INSERT INTO despedido(nombre_despedido) VALUES ('$elementos[$j]')",$con);
     break;
    }
   }
   $j++;
  }
  $i++;
 }
 echo "Cambios OK";
?>

Veamos lentamente el código mientras explicamos. La idea del proceso es eliminar todos los elementos de las dos tablas y luego volverlas a llenar con los nombres de los empleados en las dos tablas en el orden en que son enviadas. Recuerde que la funcion JavaScript envia una cadena de este formato: elemento1, elemento2 / elemento3, elemento4, elemento5, para grabar cada uno, debe de cortarlos primero por el caracter slash ( / ) y luego por las comas ( , ). Veamos los pasos principales:

  • La función ElementosEnBlanco() se encarga limpiar las tablas.
  • Recibimos el contenido de la variable cadena que la funcion JavaScript EnviarDatos envió.
  • Con explode cortamos la variable $cadena donde encuentre el caracter slash ( / ), por lo tanto pasara a ser un array. Si seguimos el ejemplo expuesto $cadenas sería un array con dos elementos: "elemento1, elemento2" y "elemento3, elemento4, elemento5".
  • Contamos el número de elementos que hay en este array.
  • Nos preparamos para empezar a insertar los valores, empezamos una variable contador $i en 0 y llamamos a la función ElementosEnBlanco().
  • Usamos un bucle para recorrer los elementos del array $cadenas, dentro de este bucle usamos explode para cortar la variable $cadena actual donde encuentre una coma ( , ) y este valor será asignado a la variable $elementos un array también. Nuevamente iniciamos un contador $j en 0.
  • Abrimos otro bucle para recorrer ahora el array $elementos. Dentro de este usamos un if para saber si el elemento esta vacio o no, y también usamos un swicth para saber con que tabla vamos a trabajar.

No es nada del otro mundo, con un poco de ingenio y las herramientas que abundan en la web, como el script.aculo.us y demás librerías, se pueden hacer aplicaciones interesantes y agregarle un valor adicional a nuestro trabajos web. Proximamente estaremos viendo mas sobre script.culo.us así que atentos a los movimientos del blog…

[Ver Ejemplo] [Descargar]