[AJAX] construction d'un tableau -> où est l'erreur?
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:
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:
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:
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.
