11548 sujets

JavaScript, DOM et API Web HTML5

DOM+AJAX: faire apparaitre un tableau

Bonjour,

Une question simple sur laquelle je perds du temps.
Faire apparaitre un second tableau (le problème) qui récupère une valeur provenant d'une bdd.
Voici le code:

test.php

<html>
<head>
<script type="text/javascript">

 

function getXMLHttpRequest() {
        var xhr = null;
 
        if(window.XMLHttpRequest || window.ActiveXObject) {
                if(window.ActiveXObject) {
                        try {
                                xhr = new ActiveXObject("Msxml2.XMLHTTP");
                        } catch(e) {
                                xhr = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                } else {
                        xhr = new XMLHttpRequest();
                }
        } else {
                alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
                return null;
        }
 
        return xhr;
}



function ReqAjax(id) { 
	
        var xhr = getXMLHttpRequest();
		if(xhr && xhr.readyState != 0) {
				xhr.abort(); 
		} 
		xhr.onreadystatechange = function() { 
				if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) 
				{
					//oData = xhr.responseXML;					
					oData  = cleanXML(xhr.responseXML);
					affichTab(oData);
					
					
				} else if(xhr.readyState == 2 || xhr.readyState == 3) {				
						document.getElementById("loading").innerHTML = "<p>Chargement en cours</p>";
				}
		}		
		
		xhr.open("GET", "testPhp.php?id="+id, true);
		xhr.send(null);

        
}

function affichTab(oData)
{

	var oTabl = oData.getElementById("tabl");
        var oTableau2  = document.getElementById("tableau2");
	var oTr = oData.getElementsByTagName("tr");
	var oTd = oData.getElementsByTagName("td");	
	
	var oTabl2 = document.createElement("table");
	var bordureTab = document.createAttribute("border");
	bordureTab.nodeValue = "4";
	oTabl2.setAttributeNode(bordureTab);
	
	var oTr2 = document.createElement("tr");
	var oTd2 = document.createElement("td");
	//oTd2.value = oTd.nodeValue;
	[b][#red]oTd2.nodeValue = oTd.data;[/b]
	
	oTableau2.appendChild(oTabl2);
	oTabl2.appendChild(oTr2);
	oTr2.appendChild(oTd2);
	
}



</script>
</head>
<body>

 <table id="superTableau" border=2px>
		  <thead>
			<tr>
				<th>id</th>
				<th>possesseur</th>
			</tr>
		  </thead>
		  

<?php
mysql_connect('localhost', 'root', '');
mysql_select_db('ajax');

$query = mysql_query('SELECT id FROM jeux_video LIMIT 0,10');
	

	while($back = mysql_fetch_assoc($query))
	{
		$id = $back['id'] ;
		echo '<tr onclick="ReqAjax('. $id .');" >';
			echo '<td>' . $back['id'] . '</td>';
			echo '<td>?</td>';
		echo '</tr>';
	}
?>
	</table>
	
	<div id="tableau2">		
	
	</div>

</body>
</html>


testPhp.php

<?php 
header("Content-Type: text/xml");
echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>";

echo '<table id="tabl">';

if(isset($_GET['id'])) {
        $id = ($_GET['id']);
        mysql_connect('localhost', 'root', '');
        mysql_select_db('ajax');
        $query = mysql_query('SELECT possesseur FROM jeux_video WHERE id=' . $id);
        while($back = mysql_fetch_assoc($query))
		{
				echo "<tr>";
					echo "<td>" . $back['possesseur'] . "</td>";	
				echo "</tr>";
        }
}
echo "</table>"; 
?>


Il s'agit juste de la partie en rouge-gras qui me pose probleme. Après de multiples essaies je n'arrive toujours pas à récupérer la valeur.
Donc l'affichage du tableau se fait dans la fonction afficheTab avec du DOM et les infos proviennent du fichier testPhp.php.
Merci Smiley smile

edit: firebug me montre bien que je récupère ceci dans la réponse
<?xml version="1.0" encoding="iso-8859-1"?><table id="tabl"><tr><td>Florent</td></tr></table>

Par contre il y a cette erreur 
document.getElementById("loading") is null
[Break on this error] document.getElementById("loading")...nnerHTML = "<p>Chargement en cours</p>";  test2.php (ligne 56)


edit2: J'obtiens bien un résultat de cette facon

var html     = '';
    html += '<table border=2px>';
    html += '<tr>';
    html += '<td>';
    html +=  oData.getElementsByTagName("td")[0].firstChild.nodeValue;
    html += '</td>';
    html += '</tr>';
    html += '</table>';

document.getElementById('tableau2').innerHTML += html;

Mais j'insiste sur la méthode précédente, je trouve pas la bonne syntaxe Smiley ohwell
Modifié par noobC (05 Aug 2008 - 17:10)
Sujet clos
Aller à