Ajax php and XML
I need some help in AJAX as i'n new to ajax.I have 3 different files.
index.php
database-xml.php
Script.js
index.php - code is here.
<html>
<body onload="GetAllProducts()">
<div id="Products"></div>
<span id="GettingProductId"></span>
<span id="GettingProductName"></span>
<span id="GettingProductDetail"></span>
<span id="GettingProductImage"></span>
<script type="text/javascript" src="script.js"></script> </body>
</html>
database-xml.php - Code
if($_GET['function'] == 'GetAllProducts')
{
$query = " SELECT *
FROM product, brand, category, size, colors
WHERE product.size_id = size.size_id
AND product.color_id = colors.color_id
AND product.brand_id = brand.brand_id
AND product.category_id = category.category_id
";
$query = mysql_query($query);
header('content-type: text/xml');
$xml = "<?xml version='1.0' encoding='UTF-8' ?>";
$xml .= "<Products>";
while($result = mysql_fetch_array($query))
{
$xml .= "<Product>";
$xml .= "<Id>".$result['product_id']."</Id>";
$xml .= "<Name>".$result['product_name']."</Name>";
$xml .= <Description>".$result['product_description']."</Description>";
$xml .= "</Product>";
}
$xml .= "</Products>";
echo $xml;
}
Script.js - Code
function GetAllProducts()
{
if (window.XMLHttpRequest)
{
myAjax = new XMLHttpRequest();
}
else
{
myAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
var random = Math.random();
var path = "database-xml.php?function=GetAllProducts";
myAjax.open("GET", path, false);
myAjax.send("");
var myResponse= myAjax.responseXML;
var container = document.getElementById("Products");
var numberOfProducts = myResponse.getElementsByTagName("Id","Name","Description","Image","Price","Quantity","Size","Color","Brand","Category");
for(var i = 0; i < numberOfProducts.length; i++)
{
var productId = myResponse.getElementsByTagName("Id")[i].childNodes[0].nodeValue;
var productName = myResponse.getElementsByTagName("Name")[i].childNodes[0].nodeValue;
var productDescription = myResponse.getElementsByTagName("Description")[i].childNodes[0].nodeValue;
var myDiv = document.createElement('div');
myDiv.innerHTML = productId +' '+ productName +' '+ productDescription;
container.appendChild(myDiv);
}
}
Code is working fine.. its show me all products which are in the table let say 11 rows of products. It show all 11 rows name, id and description inside in index page on this <div id="Products"></div>.
But I want that all the value means id, name and description inside of those span id i have made in index page.
I tried a lot but i couldt find the solution.
When i use the simple way like.
document.getElementById("GettingProductId").innerHTML = productId;
its show me value in the span but only one value but i want all products id inside of this "GettingProductId" not one.
please help me i really need it.. please hope i get answer fast.
thanks in advance.
