Lire bdd à partir d'un mouseover ???

bad wolf · 15/04/2008, 16h04

voila le truc,

j'ai une carte, sur laquelle s'affichent des données lorsqu'on passe le curseur sur certains points de cette carte

en gros, comme sur cette page :
A More Accessible Map

est-il possible d'afficher, dans les cadres qui apparaissent, des données issues d'une base mysql??

Il faut que l'appel à la base se fasse seulement lorsqu'on pointe avec le curseur (sinon c'est simple, je sais faire :p )

en gros, les données seront rafraichies à chaque passage du curseur ....

bad wolf · 15/04/2008, 17h37

en fait je pense avoir trouvé le cheminement à faire

reste juste une chose :
comment récupérer des éléments html dans du javascript??

exemple:
en html j'ai ça :

Code HTML:

<dd>
<img src="truc.jpg" width="100" height="75" />
<strong>BIDULE N°1</strong>blablabla
</dd>

pas de problème pour afficher le contenu de <dd> avec un mouseover
mais avec le même mouseover, peut-on récupérer le nom "BIDULE N°1"??

histoire d'en créer une variable et de la balourder à du PHP???

FreeZou · 15/04/2008, 17h58

Bienvenue au premier tutorial sur l'AJAX

alors oui c'est possible, c'est pas très compliqué, faut juste connaître un peu

j'vais te mettre un petit exemple ça devrait t'aider.

première chose il te faut un fichier javascript, de dans on va créer une fonction.

Code:

function requete(type,fichier){

if(window.XMLHttpRequest)
    xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject)
    xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else
    return(false);
xhr_object.open(type, fichier, false); 
xhr_object.send(null);
if(xhr_object.readyState == 4) 
    return(xhr_object.responseText);
else 
    return '<img src="img/loading.gif" alt="Chargement" />';
    
}

C'est ta fonction AJAX, elle prend 2 parametre type (POST ou GET) et fichier (ton script php qui contient l'appel à la bdd).

Ex de fichier php :

Code PHP:


			

<?php

   mysql_connect('localhost','toto','titi');
   mysql_selectdb('pirplipinpon');

   $requete = 'select * from bignou';
   $reponse = mysql_query($requete) or die('ouch');
   while($data = mysql_fetch_array($reponse))
   {
      ton code, url photos, etc
   }
   echo  tonblabla; 
?>

et enfin la ou tu veux recup/afficher

Code HTML:

<a onmouseover="affiche(12)">image/texte</a>

et la fonction affiche en javascript:

Code:

function affiche(id){
   var resultat = requete('GET','tonfichier.php?id_du_truc_que_tu_veux='+id);
document.getElementById('tadiv').innerHTML = resultat;
}

Bon alors la c'est une technique un peu roumaine mais très efficace pour comprendre le principe, j'ai fait ça rapidement au boulot, on pourrait bien sur jouer avec le DOM, renvoyer du XML... mais on verra ça dans un autre épisode.

bad wolf · 15/04/2008, 18h40

Merci

de quoi m'occuper demain au taf

hackchip · 15/04/2008, 22h46

Fait attention aussi aux caractères spéciaux qui ne passent pas.
Pour régler ce problème je me sers de la fonction PHP str_replace.
Voila aussi le script que je me sers dans mes développement, il ne demande aucun emplacement Div, et tu à en bonus un CSS pour donner en autre un effet post-It jaune.

Teste Help Tip.7z

Avec tout ça je pense que tu devras t’en sortir pour demain.

EDITE :
Va sinon ici tu a plein de scripts géniaux => Dynamic Drive DHTML(dynamic html) & JavaScript code library

bad wolf · 16/04/2008, 15h09

Hmmm ... ok
alors j'ai bien compris le principe, d'ailleurs j'avais déjà fait un peu d'ajax avant

sauf que là, la structure est légèrement différente, et vu que je maîtrise pas du tout le javascript, je ne vois pas trop comment adapter les script sans devoir chambouler tout le code de base

En fait, je n'utilise pas du tout de javascript (donc de mousover) dans le fichier de "base"
tout est fait dans le fichier javascript

en gros mon code :

page map.html

Code HTML:

...
<script type="text/javascript" src="js/map.js"></script>
...

...
<dt id="table1"><a href="lien.html" class="location" id="location01">Département 1</a></dt>
<dd>
<img src="images1.png" alt="" height="92" width="72">
texte et image affichée par un mouseover
</dd>

page map.js

Code:

var mapMaker =
{
...

init: function()
{
...
mapMaker.addEvt(currentLocation,'mouseover',mapMaker.showTooltip);
...
}
showTooltip: function()
{
...
}
}

FreeZou · 16/04/2008, 17h04

Ah ué tu utilise une classe... c'est plus propre remarque.
si tu peux m'envoyer la source sur msn ce soir que j'regarde un peu de plus près.

bad wolf · 16/04/2008, 18h48

jt'ai envoyé un lien par MP
je serais pas dispo en soirée

bad wolf · 17/04/2008, 12h10

Bon déjà,

j'ai viré le javascript qui servait à rien (en gros TOUT) pour l'affichage des éléments sur mouseover, je fais tout en CSS, c'est plus "propre"

bad wolf · 18/04/2008, 17h24

Upppp

Bon, le javascript, j'ai vraiment trop de mal

ton script freezou, j'arrive pas à le faire fonctionner

le "tadiv", correspond à quoi? à ce qui doit s'afficher dans l'infobulle?
je l'écrit direct dans le javascript ou je met une référence à une div qui se trouverais dans le html???

pour le script de Hackship, si je l'ai bien compris, le mouseover est dans la même page que la requete mysql, donc la requete aura quand même lieu même si je ne fais pas de mousover??

si c'ets le cas, c'est pas trop ce que je cherche à faire, je veux que la requete ne s'effectue que sur mouseover