J'ai fait la chose suivante : dans ma page de traitement, je crée des TR en leur attribuant un ID de cette façon
echo "ligne = document.createElement ('tr');
ligne.id = \"item_$size\";";
$size est mis à 0 au début et incrémenté à chaque extraction de données.
A la fin de la l'extraction, je le mets dans un champ <input> de ma page principale qui s'appelle table_size
echo "document.getElementById ('table_size').value = $size";
Une fois la fonction executée, j'ai bien mes lignes de tableau remplies et mon indicateur indique bien la quantité exacte.
Sur ma page principale j'ai rajouté u bouton "Vider" censé vider le tableau. La fonction suivante est appellée :
function vider(){
a = document.forms['truc'].table_size.value;
for(i=0;i<a;i++){
var truc = 'item_'+i;
liste.removeChild(truc);
}
document.forms['truc'].table_size.value = 0;
}
Je lis donc la variable table_size pour connaitre le nombre de lignes et je reconstruis les id des TR du tableau : truc = item_0, item_1 etc.
Sauf que ça ne fonctionne pas ...
Mais si j'ecris en dur la chose suivante :
liste.removeChild(item_0);
liste.removeChild(item_1);
liste.removeChild(item_2);
Ca fonctionne ... mais qu'une seule fois ! Si je reclic sur la fonction qui lance la requete SQL, je ne peux plus le vider ...
Pour voir concrètement ce que je fais, c'est
ici. Il faut cliquer sur la 3è icone, l'enclume, pour lancer la fonction.
Les pages complètes :
Page principale
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script type="text/javascript">
function vider(){
a = document.forms['truc'].table_size.value;
for(i=0;i<a;i++){
var truc = 'item_'+i;
//alert(truc);
//liste.removeChild(truc);
}
document.forms['truc'].table_size.value = 0;
liste.removeChild(item_0);
liste.removeChild(item_1);
liste.removeChild(item_2);
}
function chercheCraftDispo(id_metier){
//alert(id_metier);
var xhr_object = null;
if(window.XMLHttpRequest) //pour Firefox
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) //Internet Explorer
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else{
alert("Votre navigateur ne supporte pas les requetes");
return;
}
xhr_object.open("POST","ajax/chercheCraft.php",true);
xhr_object.onreadystatechange = function() {
if(xhr_object.readyState == 4)
eval(xhr_object.responseText);
}
xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
var data = "id_metier="+id_metier;
xhr_object.send(data);
}
</script>
<style>
p{font-size:18px;}
</style>
<body bgcolor="#FFFFFF">
<input type="button" name="Vider" onClick="vider()" value="Vider">
<table align="center">
<tr>
<td><img src="img/alch.jpg" width="32" height="32"></td>
<td><img src="img/cout.jpg" width="32" height="32"></td>
<td><a href="javascript:chercheCraftDispo(1);"><img src="img/forge.jpg" width="32" height="32" border="0"></a></td>
<td><img src="img/ench.jpg" width="32" height="32"></td>
<td><img src="img/inge.jpg" width="32" height="32"></td>
<td><img src="img/joa.jpg" width="32" height="32"></td>
<td><img src="img/tdc.jpg" width="32" height="32"></td>
</tr>
</table>
<br>
<table id="liste" width="350" align="center"></table>
<form name="truc">
<input type="text" value="0" size="5" id="table_size">
</form>
</body>
</html>
et la page de traitement
header('Content-type: text/html; charset=iso-8859-1');
$id_metier = $_POST['id_metier'];
//echo "alert('$id_metier')";
if(connect_base()){
$requete = "SELECT id_item_craft,nom_item,couleur_item,icone_item FROM `wow_craft`,wow_item WHERE wow_item.id_item = wow_craft.id_item_craft and wow_craft.id_metier = '$id_metier'";
$size = 0;
$result = mysql_query($requete);
if (!$result) {
die('Requête invalide : ' . mysql_error());
}else{
while($contenu = mysql_fetch_array($result)){
echo "ligne = document.createElement ('tr');
ligne.id = \"item_$size\";
cell = document.createElement ('td');
p = document.createElement ('p');
i = document.createElement ('img');
a = document.createElement('a');
a.href = \"javascript:chercheCrafteurDe('" ,$contenu['id_item_craft'] ,"')\";
i.src = \"img/",$contenu['icone_item'],"\";
i.width = \"32\";
i.align = \"left\";
i.border = \"0\";
a.appendChild (i);
p.appendChild (a);
texte = document.createTextNode ('", $contenu['nom_item'] ,"');
p.style.color=\"", $contenu['couleur_item'] ,"\";
p.appendChild(texte);
cell.appendChild (p);
ligne.appendChild(cell);
document.getElementById ('liste').appendChild (ligne);";
//a.href = \"javascript:toto(\"", $contenu['id_item_craft'],"\")\";
//a.appendChild (i);
$size++;
}
}
echo "document.getElementById ('table_size').value = $size";
}
Si quelqu'un voit ce qui cloche (je découvre l'ajax et l'utilisation de javascript pour modifier la page), je suis preneur
.
. Et pourtant quand je visualise avec webdevelopper le "source généré" j'ai exactement la même chose...