Affichage de la description au survol d'un élément
Bonjour,
Je suis nouveau sur ce forum,je travaille sur un site de restaurant et je bloque depuis un bon petit moment déjà sur une combinaison PHP/JS au survol d'éléments mais je pense que le probème viens du JS, je m'explique :
J'ai à la base 2 div sur ma page : droite et gauche. Dans la div de gauche, une liste d'éléments extraits d'une BDD. Dans la div de droite il n'y a rien.
J'aimerais qu'au survol d'un des éléments de la div de gauche, une fonction JS appelle une page PHP qui va chercher la description de l'élément dans la BDD et affiche cette description dans la div de droite sans recharger la page.
Si le code peut paraître plus clair que mon jargon :) :
Ma première page PHP qui affiche les éléments dans la div de gauche et qui contient la fonction JS :
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
| <?php
/* Début de requête des couscous */
$sql_couscous = 'SELECT ID,nom,prix_sur_place,image,description FROM carte WHERE categorie="couscous" ORDER BY ID';
$req_couscous = mysql_query($sql_couscous) or die('Erreur SQL !<br>'.$sql_couscous.'<br>'.mysql_error());
while ($data_couscous = mysql_fetch_array($req_couscous, MYSQL_ASSOC))
{
echo '<tr id="couscous_'.$data_couscous['ID'].'" onmouseover="chercherDescription(this.id)"><td>'.$data_couscous['nom'].'</td><td class="w20 txtright">'.$data_couscous['prix_sur_place'].'</td></tr>';
}
mysql_close();
/* Fin de requête des couscous */
?>
</table>
</div>
</div> <!--fin div gauche -->
<!--div droite -->
<div id="photocouscous">
</div>
<!--fin div droite -->
<script type="text/javascript">
function writediv(texte)
{
document.getElementById('photocouscous').innerHTML = texte;
}
function chercherDescription(id)
{
if(id != '')
{
texte = file('afficherdescription.php?ID='+escape(id))
if(texte != ''){
writediv('Nom du plat : '+texte+' :</br> fin de nom');
}
}
}
function file(fichier)
{
if(window.XMLHttpRequest) // FIREFOX
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // IE
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else
return(false);
xhr_object.open("GET", fichier, false);
xhr_object.send(null);
if(xhr_object.readyState == 4) return(xhr_object.responseText);
else return(false);
}
</script> |
Et la page afficherdescription.php (celle qui va chercher les éléments en BDD) :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <?
// CONNEXION SQL
mysql_connect("localhost", "login", "pass");
mysql_select_db("base");
// VERIFICATION
$result = mysql_query("SELECT nom,description,image FROM carte WHERE ID='".$_GET['ID']."'");
if(mysql_num_rows($result)!=0) {
while ($data_couscous = mysql_fetch_array($result, MYSQL_ASSOC) {
echo $data_couscous['nom'];
}
else {
echo "Pas de description disponible pour ce plat";
}
?> |
Voili voilou, si quelqu'un a un peu de temps pour essayer de comprendre ce qui ne va pas. Une semaine que je tourne tout ca dans tous les sens et que j'essaye de chercher sur le net mais rien n'y fait pour dompter cette fonction récalcitrante !
EDIT : Je suis parti sur tout autre chose car visiblement ce que je voulais faire est en AJAX, j'ai trouvé mon bonheur avec les tooltips : http://www.megaptery.com/2013/03/too...-flexible.html
