J'essaye de faire une mise à jour de ma page en asynchrone mais j'ai un problème avec une variable.
J'ai 3 produits dans la partie droite de la page (div id="sidebar"). Par défaut, j'affiche en plus d'en la partie de gauche (dans le div id="produit") le premier des produit.
En cliquant sur le lien d'un des produits (en envoyant l'id du produit) de droite, j'aimerais afficher le produit dans la partie de gauche sans faire un refresh complet de la page. Seul la partie de gauche se mettra à jour.
Ce qui me pose problème c'est la valeur de la variable 'productid'. Je l'affiche dans la partie de droit et j'ai le bon id par produit par contre quand je l'envoi dans l'url "byId.php?idProduct=", ça ne fonctionne pas.
C'est peut-être ma boucle dans ma fonction 'generateProductList' qui pose problème.
Pourriez-vous y jeter un coup d'oeil ?
Merci d'avance
index.php
<?php
$xml = new DOMDocument();
$xml->Load("produits.xml");
function generateProductList($xml) {
echo "<ul>";
$documentList = $xml->getElementsByTagName("document");
for ($i = 0; $i < $documentList->length; $i++) {
$element = $documentList->item($i);
echo "<li><a href='#' onclick='requestFilter(); return false;'><h4>";
echo $element->getElementsByTagName("prix")->item(0)->textContent;
echo $element->getElementsByTagName("descr")->item(0)->textContent;
?>
</h4> </a>
<input type="text" name="idProduct" id="idProduct" value="<?php echo $element->getElementsByTagName("id")->item(0)->textContent;?>" />
<img src="img/<?php echo $element->getElementsByTagName("photo")->item(0)->textContent; ?>" width= "130" height= "100" alt= "produit"/>
<br />
Quantité restante : <?php echo $element->getElementsByTagName("quantite")->item(0)->textContent; ?>
<br />
Valide jusqu'au <?php echo $element->getElementsByTagName("expiration")->item(0)->textContent; ?>
<br />
<br />
</li>
<?php
}
echo "</ul>";
}
function generateProduct($xml,$i) {
$documentList = $xml->getElementsByTagName("document");
$element = $documentList->item($i);
echo "<h4>";
echo $element->getElementsByTagName("prix")->item(0)->textContent;
echo $element->getElementsByTagName("descr")->item(0)->textContent;
?>
</h4>
<img src="img/<?php echo $element->getElementsByTagName("photo")->item(0)->textContent; ?>" alt= "produit"/>
<br />
Valide jusqu'au <?php echo $element->getElementsByTagName("expiration")->item(0)->textContent; ?>
<br />
<?php if ($element->getElementsByTagName("quantite")->item(0)->textContent == "0"){
echo "<h5>Offre expirée</h5>";
}else {?>
Quantité restante :
<p name="quantity" id="quantity"><?php echo $element->getElementsByTagName("quantite")->item(0)->textContent ?></p>
</span><br />
<button onclick="show();">Acheter</button>
<button onclick="requestQuantity();">Mettre à jour la quantité restante</button>
<input type="text" name="id" id="id" value="<?php echo $element->getElementsByTagName("id")->item(0)->textContent;?>" />
<?php }?>
<br />
<br />
<?php
}
?><head>
</head>
<body>
<div id="page">
<div id="content">
<div id="produit">
<?php generateProduct($xml,0); ?>
</div>
</div>
<!-- end #content -->
<div id="sidebar">
<?php generateProductList($xml); ?>
</div>
</div>
</body>
[javascript]
var request = null;
function createRequestObject() {
try {
request = new XMLHttpRequest();
} catch (err) {
alert("Error creating XMLHttpRequest object!");
request = null;
}
}
function requestFilter() {
if (request === null) {
createRequestObject();
}
var select = document.getElementById("idProduct"); // ne retourne pas la valeur du input
console.log(select); //
var url = "byId.php?idProduct=" + select.value;
request.open("GET", url, true);
request.onreadystatechange = updatePage();
request.send(null);
}
function updatePage() {
if (request.readyState == 4) {
console.log(request);
var xmlDom = request.responseXML;
var html = "";
var produit = xmlDom.getElementsByTagName("document");
for(var i = 0; i < produit.length; i++) {
html += "ID "+ produit.getElementsByTagName("id")[0].textContent + "<br />";
html += "<h4>"+ produit.getElementsByTagName("prix")[0].textContent;
html += produit.getElementsByTagName("descr")[0].textContent +"</h4>";
html += "<img src=img/" + produit.getElementsByTagName("photo")[0].textContent +' " alt= "produit"/>';
html += "<br />"
html += "Valide jusqu'au "+ produit.getElementsByTagName("expiration")[0].textContent;
html += "<br />";
if (produit.getElementsByTagName("quantite")[0].textContent == "0"){
html += "<h5>Offre expirée</h5><br />";
}else{
html += "Quantité restante : <span id='qtite'>"+ produit.getElementsByTagName("quantite")[0].textContent +"<br />";
html += "</span><br />";
html += '<button onclick="show();">Acheter</button>';
html += '<button onclick="refreshQuantity();">Mettre à jour la quantité restante</button>';
}
}
document.getElementById("produit").innerHTML = html;
}
}
function requestQuantity() {
if (request === null) {
createRequestObject();
}
var select = document.getElementById("idProduct"); // ne retourne pas la valeur du input
console.log(select); //
var url = "quantite.php?idProduct=" + select.value;
request.open("GET", url, true);
request.onreadystatechange = updateQuantity();
request.send(null);
}
function updateQuantity() {
if (request.readyState == 4) {
console.log(request);
var xmlDom = request.responseXML;
var html = "";
var produit = xmlDom.getElementsByTagName("document");
for(var i = 0; i < produit.length; i++) {
html += produit.getElementsByTagName("quantite")[0].textContent;
}
document.getElementById("quantity").innerHTML = html;
}
}
[/javascript]
byId.php
<?php
header('Content-type: text/xml');
// id à filtrer
//$id = 0;
if(isset($_GET["idProduct"])) {
$id = $_GET["idProduct"];
}
// On prépare un nouvel objet DOM pour repr�senter le document XML
$dom = new DomDocument();
// On charge le fichier XML
$dom->load("produits.xml");
// On récupère les éléments <document>
$produits = $dom->getElementsByTagName("document");
echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
echo "<catalogue>";
echo "<documents>";
foreach($produits as $produit) {
if($produit->getElementsByTagName("id")->item(0)->nodeValue == $id) {
echo "<document>";
echo "<id>".$produit->getElementsByTagName("id")->item(0)->nodeValue."</id>";
echo "<descr>".$produit->getElementsByTagName("descr")->item(0)->nodeValue."</descr>";
echo "<photo>".$produit->getElementsByTagName("photo")->item(0)->nodeValue."</photo>";
echo "<prix>".$produit->getElementsByTagName("prix")->item(0)->nodeValue."</prix>";
echo "<quantite>".$produit->getElementsByTagName("quantite")->item(0)->nodeValue."</quantite>";
echo "<expiration>".$produit->getElementsByTagName("expiration")->item(0)->nodeValue."</expiration>";
echo "</document>";
}
}
echo "</documents>";
echo "</catalogue>";
?>
Code : Tout sélectionner
<?xml version="1.0" encoding="utf-8"?>
<catalogue>
<documents>
<document type="book">
<id>0</id>
<descr>$ pour une Paire de Boucles d’Oreilles
en Cristal Swarovski Elements avec Livraison (Valeur de 65$)</descr>
<photo>boucles_oreilles.jpg</photo>
<prix>15</prix>
<quantite>3</quantite>
<expiration>10/11/2012</expiration>
</document>
<document type="book">
<id>1</id>
<descr>$ pour un Menu Découverte avec Champagne et Foie Gras pour deux chez Ficelle (valeur 124$)</descr>
<photo>Ficelle.jpg</photo>
<prix>50</prix>
<quantite>100</quantite>
<expiration>12/18/2012</expiration>
</document>
<document type="book">
<id>2</id>
<descr>$ pour un Collier pour Chien à LED en Bleu ou Rose
(+ Livraison). Trois Tailles Disponibles (Valeur de 69$)</descr>
<photo>Collier_chien.jpg</photo>
<prix>30</prix>
<quantite>1000</quantite>
<expiration>09/12/2012</expiration>
</document>
</documents>
</catalogue>