Parrilla o Tabla de datos con AJAX La tabla de productos posee los siguientes atributos:
id : clave primaria
marca : marca del producto
modelo : modelo del producto
precio : precio del producto
detalle : detalle del producto
cantidad : cantidad disponible
Estos son los 3 archivos con los cuales estoy trabajando:
index.html : llama a la funcion "processData()" del archivo procesoJS.js.
procesoJS.js : interactua con el archivo "proceso.php" y recoge los datos xml.
proceso.php : recupera los datos de la tabla productos, y le da formato XML.
INDEX.HTML
Código HTML:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Parrillla de Datos</title> <script language="javascript" src="procesoJS.js"></script> </head> <body> <font color="#FF0000"><b><div id="esta"></div></b></font> <h1>Productos obtenidos de la Base de Datos</h1> <form> <input type="button" value="ver productos" onclick="processData();" /> </form> <table border="1"> <tr> <td id="id"></td> <td id="marca"></td> <td id="modelo"></td> <td id="precio"></td> <td id="cant"></td> <td id="det"></td> </tr> </table> </body> </html>
PROCESOJS.JS
Cita:
function getXMLHTTPRequest() {
try {
req = new XMLHttpRequest();
} catch(err1) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch (err2) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch (err3) {
req = false;
}
}
}
return req;
}
var xmlDoc = getXMLHTTPRequest();
function processData()
{
if(window.ActiveXObject)
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.load("proceso.php");
show();
}
else if(document.implementation.createDocument)
{
xmlDoc = document.implementation.createDocument("", "", null);
xmlDoc.load("proceso.php");
xmlDoc.onload = show;
}
else
{
alert("Browser doesn't support XML DOM manipulation");
}
}
function show()
{
var dato = xmlDoc.getElementsByTagName("id");
for(var i=0; i < dato.length; i++)
{
var id = xmlDoc.getElementsByTagName("id")[i].childNodes[0].nodeValue;
var marca = xmlDoc.getElementsByTagName("marca")[i].childNodes[0].nodeValue;
var modelo = xmlDoc.getElementsByTagName("modelo")[i].childNodes[0].nodeValue;
var precio = xmlDoc.getElementsByTagName("precio")[i].childNodes[0].nodeValue;
var cant = xmlDoc.getElementsByTagName("cantidad")[i].childNodes[0].nodeValue;
var det = xmlDoc.getElementsByTagName("detalle")[i].childNodes[0].nodeValue;
document.getElementById("id").innerHTML=id;
document.getElementById("marca").innerHTML=marca;
document.getElementById("modelo").innerHTML=modelo ;
document.getElementById("precio").innerHTML=precio ;
document.getElementById("cant").innerHTML=cant;
document.getElementById("det").innerHTML=det;
alert("Los datos son:\n\n"+id+"\n"+marca+"\n"+modelo+"\n"+precio+"\ n"+cant+"\n"+det);
}
}
try {
req = new XMLHttpRequest();
} catch(err1) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch (err2) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch (err3) {
req = false;
}
}
}
return req;
}
var xmlDoc = getXMLHTTPRequest();
function processData()
{
if(window.ActiveXObject)
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.load("proceso.php");
show();
}
else if(document.implementation.createDocument)
{
xmlDoc = document.implementation.createDocument("", "", null);
xmlDoc.load("proceso.php");
xmlDoc.onload = show;
}
else
{
alert("Browser doesn't support XML DOM manipulation");
}
}
function show()
{
var dato = xmlDoc.getElementsByTagName("id");
for(var i=0; i < dato.length; i++)
{
var id = xmlDoc.getElementsByTagName("id")[i].childNodes[0].nodeValue;
var marca = xmlDoc.getElementsByTagName("marca")[i].childNodes[0].nodeValue;
var modelo = xmlDoc.getElementsByTagName("modelo")[i].childNodes[0].nodeValue;
var precio = xmlDoc.getElementsByTagName("precio")[i].childNodes[0].nodeValue;
var cant = xmlDoc.getElementsByTagName("cantidad")[i].childNodes[0].nodeValue;
var det = xmlDoc.getElementsByTagName("detalle")[i].childNodes[0].nodeValue;
document.getElementById("id").innerHTML=id;
document.getElementById("marca").innerHTML=marca;
document.getElementById("modelo").innerHTML=modelo ;
document.getElementById("precio").innerHTML=precio ;
document.getElementById("cant").innerHTML=cant;
document.getElementById("det").innerHTML=det;
alert("Los datos son:\n\n"+id+"\n"+marca+"\n"+modelo+"\n"+precio+"\ n"+cant+"\n"+det);
}
}
PROCESO.PHP
Código PHP:
<?php
header('Content-Type: text/xml');
echo "<?xml version=\"1.0\" ?>";
$con=mysql_connect("127.0.0.1","root","root") or die("error de conexion");
mysql_select_db("carrito") or die("esta db no existe");
$res=mysql_query("select * from productos limit 2") or die("error de consulta");
echo "<productos>";
for($i=0;$i < mysql_num_rows($res);$i++)
{
$fila=mysql_fetch_array($res);
echo"<producto>";
echo "<id>".$fila['id_producto']."</id>";
echo "<marca>".$fila['marca']."</marca>";
echo "<modelo>".$fila['modelo']."</modelo>";
echo "<precio>".$fila['precio']."</precio>";
echo "<cantidad>".$fila['cantidad']."</cantidad>";
echo "<detalle>".$fila['detalle']."</detalle>";
echo"</producto>";
}
echo "</productos>";
?> ::::::::::Mi problema es el siguiente::::::::::
Cuando cargo los datos en la tabla que se encuentra en el "index.html", se sobreescriben los datos obtenidos.
Por ejemplo:
Primer registro obtenido:
id: 23
marca: amd
modelo: atlhon
precio: 200
cantidad: 5
detalle: xxxxxxxxxxx
Segundo registro obtenido:
id: 30
marca: intel
modelo: i7
precio: 980
cantidad:10
detalle: XxXxXxXxXxXxXxX
Aqui me sobreescribe los datos del Segundo registro obtenido sobre el Primer registro obtenido. Es decir , solo puedo apreciar los siguientes datos:
id: 30
marca: intel
modelo: i7
precio: 980
cantidad:10
detalle: XxXxXxXxXxXxXxX
¿ Como puedo insertar los datos sin que me sobreescriba los datos ya recuperados ?
En otras palabras lo que trato de hacer, se resume en esta imagen (deben sacar el espacio que se encuentra en h t t p : // w w w .) :
h t t p : // w w w .elrincondejavier.net/html/images/articulos
/Tabla%20de%20datos.jpg
Desde ya muchas gracias.... Espero su ayuda..
