[AJAX] construction d'un tableau -> où est l'erreur?

**noobC** · 31/07/2008, 17h38

Bonjour,

Je sais pas si mon titre est assez explicite mais je reprends autrement:
J'ai un premier tableau généré en php et ses valeurs proviennent d'une bdd (dont un id).
Suite à la sélection d'une ligne de ce tableau un autre doit s'afficher à coté, en fonction de l'id de la ligne. Le deuxieme tableau est donc rempli en allant chercher les données dans une bdd.
Je pose ma question un peu prématurement (je connais à peine javascript et ajax) mais j'ai besoin d'un résultat assez vite.
Le code est inspiré d'un autre site.

test.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
 
<html>
<head>
<script type="text/javascript">
 
function affichTab(id) {
 
        var xhr = getXMLHttpRequest();
 
		if(xhr && xhr.readyState != 0) {
				xhr.abort(); 
		} 
		xhr.onreadystatechange = function() { 
				if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
					leselect = xhr.responseText;
 
document.getElementById('tableau2').innerHTML = leselect;				
 
				} else if(xhr.readyState == 2 || xhr.readyState == 3) {
						document.getElementById("loading").innerHTML = "<p>Chargement en cours</p>";
				}
		}
 
 
		//var id = document.getElementById("tr").childNodes[0].nodeValue;
 
		 xhr.open("GET", "testPhp.php?id=" + id"", true);
		 xhr.send(null);
 
 
}
 
 
</script>
</head>
<body>
<?php
mysql_connect('localhost', 'root', '');
mysql_select_db('ajax');
 
$query = mysql_query('SELECT id FROM jeux_video LIMIT 0,10');
 
 
	echo '<table id="superTableau">
		  <thead>
			<tr>
				<td>[id]</td>
				<td>possesseur</td>
			</tr>
		  </thead>';
 
	while($back = mysql_fetch_assoc($query))
	{
		echo '<tr onclick="affichTab('. $back['id']  .');">';
			echo '<th>' . $back['id'] . '</th>';
			echo '<th>?</th>';
		echo '</tr>';
	}
?>
	</table>
 
	<div id="tableau2">
 
 
 
	</div>
 
</body>
</html>

testPhp.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<?php 
 
echo "<table>";
 
 
if(isset($_GET['id'])) {
        $id = htmlentities($_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 '<th> ' . $back['possesseur'] .'</th>';
				echo '</tr>';
        }
}
 
echo "</table>";
 
?>

oXHR.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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;
}

Donc ce que je n'arrive pas à comprendre:
1) comment récupérer la valeur (l'id) de la ligne sélectionné, pour ensuite l'envoyer par méthode GET.
2) la relation entre l'affichage dans testPhp.php et la partie affichage dans test.php (function affichTab(val)). J'apprends DOM là mais ca reste flou.

**Annamenel** · 31/07/2008, 18h19

Je ne sais pas si ça peut t'aider, moi même je suis débutant là dedans donc je pourrai pas t'expliquer ce que tu veux savoir mais il me semble que ici : http://siddh.developpez.com/articles/ajax/ tu trouveras ce que tu cherches, au IV - a Listes liées

J'espère que ça t'aidera

**noobC** · 01/08/2008, 10h07

Merci Annamenel, je suis en train de le lire et le premier exemple à l'air de correspondre à ce que je cherche.
Donc le code suivant ne donne rien. Idem si j'essaie de debugger par des alertes.

test2.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
 
<html>
<head>
<script type="text/javascript">
 
function cleanXML(d){
var bal=d.getElementsByTagName('tableau2');
for(i=0;i<bal.length;i++){
a=bal[i].previousSibling;
if(a && a.nodeType==3)
go(a);
b=bal[i].nextSibling;
if(b && b.nodeType==3)
go(b);
}
return d;
}
 
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)) 
				{
					response  = cleanXML(xhr.responseXML.documentElement);
					affichTab(response);
 
				} 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 taille = document.getElementsById("tab").length;
          var noeudTab = oData.getElementById("tab").firstChild;
	  var noeudTr = noeudTab.firstChild;
	  var val = noeudTr.firstChild.data;//value    
 
	  var table = document.createElement ('table');	  
	  var ligne = document.createElement ('tr');			
	  var cell = document.createElement ('td');
	  cell.firstChild.nodeValue = val;
 
	  ligne.appendChild(cell);	
	  document.getElementById('tableau2').appendChild(table);
 
}
 
 
</script>
</head>
<body>
<?php
mysql_connect('localhost', 'root', '');
mysql_select_db('ajax');
 
$query = mysql_query('SELECT id FROM jeux_video LIMIT 0,10');
 
 
	echo '<table id="superTableau">
		  <thead>
			<tr>
				<td>[id]</td>
				<td>possesseur</td>
			</tr>
		  </thead>';
 
	while($back = mysql_fetch_assoc($query))
	{
		$id = $back['id'] ;
		echo '<tr onclick="ReqAjax('. $id  .');">';
			echo '<th>' . $back['id'] . '</th>';
			echo '<th>?</th>';
		echo '</tr>';
	}
?>
	</table>
 
	<div id="tableau2">
 
 
	</div>
 
</body>
</html>

testPHP.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php 
 
/*header("Content-Type: text/xml");
echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>";*/
 
echo '<table id="tab">';
 
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>';
 
 
?>

**noobC** · 04/08/2008, 15h36

J'up le post pour préciser que même en faisant un alert j'arrive pas à obtenir la moindre donnée.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
 
<html>
<head>
<script type="text/javascript">
 
function cleanXML(d){
var bal=d.getElementsByTagName('tableau2');
for(i=0;i<bal.length;i++){
a=bal[i].previousSibling;
if(a && a.nodeType==3)
go(a);
b=bal[i].nextSibling;
if(b && b.nodeType==3)
go(b);
}
return d;
}
 
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;					
					//response  = 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", true);
		xhr.open("GET", 'testPhp.php?id="+id"', true);
		 xhr.send(null);
 
 
}
 
function affichTab(oData)
{
	var taille = oData.getElementById('tabl')[0].attributes.length; 
	alert("ok: "+taille);
 
	//var taille = oData.getElementsById("tab").length;
/*
		var oTabl = oData.getElementsByTagName("table");
    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;
 
	 oTableau2.appendChild(oTabl);
	 oTabl.appendChild(oTr);
	 oTr.appendChild(oTd);
*/
 
}
 
 
 
</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>

Ya t-il un moyen de voir si j'ai bien des données dans oData? (voir fonction affichTab)

edit: oui il y a firebug...

Bonjour,

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

test.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<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;
	[#red]oTd2.nodeValue = oTd.data;
	
	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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<?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 [smile] [/#]

edit: firebug me montre bien que je récupère ceci dans la réponse

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<?xml version="1.0" encoding="iso-8859-1"?><table id="tabl"><tr><td>Florent</td></tr></table>

Par contre il y a cette erreur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
document.getElementById("loading") is null
[Break on this error] document.getElementById("loading")...nnerHTML = "<p>Chargement en cours</p>";  test2.php (ligne 56)

[AJAX] construction d'un tableau -> où est l'erreur?

JavaScript

Vue hybride

Discussions similaires

Partager

Partager