ajax: xajax y acceso a mysql (parte 3 y última)

13 de julio de 2008

Vamos a ver como integrar ahora xajax con el acceso a base de datos mysql. Supongamos que tenemos una bbdd con una tabla clientes y otra tabla de productos que han comprado esos clientes.
Diseñamos un formulario que nos permita buscar el nombre/apellido de un cliente y mostramos en la misma pagina todos los clientes. Una vez tengamos un listado de esos clientes, en la misma página podemos hacer click sobre un cliente y mostrar los productos que ha comprado. Todo esto de forma dinámica y sin refrescar la pagina.

La pagina principal tendrá este aspecto.

   <input type="text" name="buscar" id="buscar" value=""> 
   <input type="button" value="Buscar" onclick="
   xajax_buscar_cliente(document.getElementById('buscar').value)">
   <div id="clientes"></div>   
   <div id="productos"></div>
Lo primero que tenemos es un formulario con un input para introducir el nombre del cliente que queremos buscar y luego un botón que nos llamará a la función buscar_cliente que nos buscará y nos devolverá el resultado de la busqueda dentro de "<div id="clientes"></div>".
También tenemos un "<div id="productos"></div>" que nos montrará los productos que ha comprado el cliente que seleccionemos. Las dos últimas etiquetas son importantes porque xajax las utilizará para devolver el resultado que nosotros queramos dentro. Este resultado puede ser un simple número o todo un código HTML como una tabla.

Veamos ahora como esta definida la función buscar_cliente:
function buscar_cliente($buscar) {
   $con = conectar();
   mysql_select_db("test", $con);
   $sql = "select * from clientes where cliente like '%". $buscar ."%'";
   $result = mysql_query($sql,$con);
   
   $txt = "";
   while($row = mysql_fetch_array($result))
      $txt = $txt . "<a href='#' onclick='javascript:xajax_buscar_productos(".$row["id"].");' >" . $row["cliente"] . "</a><br>";
   
   mysql_close($con);
   
   $objResponse = new xajaxResponse();
   $objResponse->Assign("clientes","innerHTML",$txt);
   
   return $objResponse;
}
Lo que hace esta función es recibir un parámetro con el nombre que queremos buscar y buscarlo directamente con una select dentro del mysql.
Una vez tengo los resultados monto un $txt con las lineas de los resultados. Esta linea puede ser tan complicada como uno quiera. En mi caso es el nombre del cliente y un salto de linea.
Finalmente envio el resultado y le digo a xajax que el resultado lo meta dentro (innerHTML) de la etiqueta "clientes".

Al pulsar sobre el nombre del cliente llamaremos a la función buscar_productos, a la que le paso como parámetro el identificador del cliente del cual quiero saber que productos ha comprado.

Veamos esta función:
function buscar_productos($cliente) {
   $con = conectar();
   mysql_select_db("test", $con);
   $sql = "select * from productos where id_cliente=".$cliente;
   $result = mysql_query($sql,$con);
   
   $txt = "";   
   while($row = mysql_fetch_array($result))
      $txt = $txt . $row["producto"] . "<br>";
   
   mysql_close($con);

   $objResponse = new xajaxResponse();
   $objResponse->Assign("productos","innerHTML",$txt);
   
   return $objResponse;  
}
En esta función hacemos una select de los productos y directamnete como en caso anterior meto los resultados dentro de la etiqueta "productos".

parte3.zip (archivos fuente)