Sujet Précédent Sujet Suivant

Réinitialiser le contenu dynamique d'une div cachée

istella Messages postés 10 Date d'inscription jeudi 20 septembre 2007 Statut Membre Dernière intervention 28 décembre 2010 - 14 oct. 2009 à 19:53
istella Messages postés 10 Date d'inscription jeudi 20 septembre 2007 Statut Membre Dernière intervention 28 décembre 2010 - 15 oct. 2009 à 23:15
Bonjour,
J'ai un niveau débutant en Javascript et php, je dois réaliser une page qui contient des données provenant d'une base de données. Au survol de ces "mots clés" affichés en dynamique, une div cachée doit s'afficher et contenir la description de ce mot clé qui provient aussi d'une base de données.
Je parviens à afficher les mots clés en php, mais le soucis c'est qu'au survol de ceux ci c'est toujours la 1ère description qui s'affiche, pourtant dans le code source en html de la page je vois bien tout les mots clés(nom) et toutes les descriptions. Je pense qu'il doit manquer une fonction qui "réinitialise" le contenu de ma div avant affichage.
Voilà le code de ma page :
[color=]
<?php require_once('Connections/maconnection.php'); ?>
<?php
mysql_select_db($database_mabdd, $mabdd);
$query_Recordset1 = "SELECT * FROM matable";
$Recordset1 = mysql_query($query_Recordset1, $mabdd) or die(mysql_error());
$row_Recordset1 = mysql_fetch_assoc($Recordset1);
$totalRows_Recordset1 = mysql_num_rows($Recordset1);<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue "", $theNotDefinedValue "")
{
$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;

$theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

switch ($theType) {
case "text":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "long":
case "int":
$theValue = ($theValue != "") ? intval($theValue) : "NULL";
break;
case "double":
$theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL";
break;
case "date":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "defined":
$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
break;
}
return $theValue;
}
}
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
<!--
#info {
position:absolute;
width:300px;
height:auto;
z-index:1;
background-color: #CC99FF;
left: 405px;
top: 136px;
visibility: hidden;
}
.Style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
color: #000000;
}
.Style2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
}
-->
</style>
<script type="text/javascript">
function afficheinfo(texte){
if(texte=='invisible'){
document.getElementById('info').style.visibility='hidden'
}
else{
document.getElementById('info').style.visibility='visible'
document.getElementById('info').src=texte
}
}

</script>

</head>





<?php do { ?>
----

<?php echo $row_matable['id']; ?>,
<?php echo $row_matable['nom']; ?>,

<?php echo $row_matable ['description'] ?>

<?php } while ($row_matable = mysql_fetch_assoc($recordset1)); ?>


</html>
<?php
mysql_free_result($recordset1);
?> /color

J'espère avoir été le plus claire possible, et vous remercie pour votre aide.
Istella


Istella

6 réponses

Réponse 1 / 6
neigedhiver Messages postés 2480 Date d'inscription jeudi 30 novembre 2006 Statut Membre Dernière intervention 14 janvier 2011 19
14 oct. 2009 à 21:58
Salut,

Je crois déceler dans ton code une anomalie : tu as plusieurs div avec le même id (info). Non seulement c'est "interdit" en (x)html, mais en plus ton script JS ne peut pas savoir lequel il doit manipuler : donc il s'arrête au premier trouvé. L'ID est un attribut dont la valeur doit être UNIQUE sur le document. Pour cela, tu peux lui rajouter un compteur qui ne servira qu'à JS pour retrouver le bon div :

Cet ID est alors généré par PHP dans ta boucle do...while : 
<?php
$id = 1;
do {
$id++;
// Suite du code


')" onMouseOut= "cacheinfo('info-<?php echo $id; ?>')">


">

J'ai volontairement zappé de gros morceaux pour ne mettre que ce qui est intéressant dans ce problème.
Par ailleurs, comme tu peux le voir, je te recommande d'utiliser une fonction JS différente pour cacher un élément et qui prend en argument l'ID de l'élément en question. 

function cacheinfo(id) {
  document.getElementById(id).style.visibility='hidden';
}

C'est juste un peu plus clair et facile à manipuler avec des ID différents ;)

Bon, j'ai fait ça à l'arrache, juste pour te montrer l'erreur commise et une manière de corriger, j'ai rien testé, mais dans l'idée, ça doit marcher...

--
Neige

N'hésitez pas à lire la doc
0
Réponse 2 / 6
istella Messages postés 10 Date d'inscription jeudi 20 septembre 2007 Statut Membre Dernière intervention 28 décembre 2010
14 oct. 2009 à 22:42
Merci beaucoup de ton aide, je vais tester tout ça et te dirai si cela fonctionne...merci encore.
A bientôt
Istella
0
Réponse 3 / 6
istella Messages postés 10 Date d'inscription jeudi 20 septembre 2007 Statut Membre Dernière intervention 28 décembre 2010
15 oct. 2009 à 12:25
Bonjour,
J'ai testé avec les conseils que tu m'as donné, il y a peut être quelquechose que je n'ai pas compris car maintenant j'affiche sur la page web toutes les descriptions en début de page, puis en dessous tous les mots clés. Quand je passe la souris dessus et que je sors de la zone toutes les descriptions disparaissent.
Voici comment j'ai inclus les portions de codes que tu m'as suggéré : 
<script type="text/javascript">
 function afficheinfo(texte){
if(texte=='invisible'){
document.getElementById('info').style.visibility='hidden'
}
else{
document.getElementById('info').style.visibility='visible'
document.getElementById('info').src=texte
}
}
function cacheinfo(id) {
  document.getElementById(id).style.visibility='hidden';
}
</script>


J'ai donc ajouté la fonction cacheinfo 

 
<?php 
do { 
$id++;
?>
  <tr>
       <td height="72" align="center" valign="middle" bordercolor="#CC99FF">
')')" onMouseOut= "cacheinfo('info-<?php echo $id; ?>')"><?php echo $row_matable['nom']; ?>
</td>
  </tr>
  
">
  

    

      
        <?php echo $row_matable ['description'] ?>

J'ai ajouté la variable id au début de la boucle do...while et remplacé le contenu de onMouseOver et onMouseOut comme suggéré.

Quand j'affiche la source en html j'ai bien chaque div id numérotée en info-1,info-2....
Mais au niveau de l'affichage cela ne convient pas.

Peux tu m'en dire plus, avec tous mes remerciements pour ton aide.
Cordialement

Istella
0
Réponse 4 / 6
neigedhiver Messages postés 2480 Date d'inscription jeudi 30 novembre 2006 Statut Membre Dernière intervention 14 janvier 2011 19
15 oct. 2009 à 13:18
Mmmmm Je crois qu'il manque effectivement des trucs.
La fonction afficheinfo par exemple, ne prend pas le bon argument (j'avais oublié ce détail). Il faut qu'elle soit comme cacheinfo, en fait : 
function cacheinfo(id) {
  document.getElementById(id).style.visibility='visible';
}


Sauf qu'il y a quelque chose que je ne comprends pas... Ton premier code affiohait plusieurs
info (corrige moi si je me trompe), mais ton JS semblait considérer qu'il n'y en avait qu'un (de même que ton CSS, qui semble positionner un
info de manère absolue).

D'où mon interrogation : quel est le comportement que tu souhaites réellement ? Un seul
info avec le texte qui change, ou plusieurs avec le texte défini au chargement de la page, affichés/masqués au survol de la souris ? Parce que pour le coup, ce n'est pas pareil...

La fonction afficheinfo() dans ton JS prend en argument du texte qui est le texte censé être affiché dans le
info. Sauf que dans ton code PHP, lorsque tu génères les mouseover, tu passes comme argument 'info' : je ne vois pas comment ça pourrait afficher le texte d'information que tu souhaites.

Tout ça pour dire que tu peux certainement annuler ce que je t'ai conseillé dernièrement. Ce que tu dois faire :
- sortir l'affichage du
info de la boucle do...while, pour qu'il ne soit affiché qu'une seule fois
- passer en argument de ta fonction afficheinfo le texte que tu souhaite afficher dans ce div, et pas juste le texte 'info'

J'avais, je crois, mal saisi ce que tu souhaitais précisément, la première fois...

--
Neige

N'hésitez pas à lire la doc
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
istella Messages postés 10 Date d'inscription jeudi 20 septembre 2007 Statut Membre Dernière intervention 28 décembre 2010
15 oct. 2009 à 14:06
Merci encore de ta patience je vais retester tout ça avec tes nouveaux conseils et je reviens vers toi.
Cordialement


Istella
0
Réponse 6 / 6
istella Messages postés 10 Date d'inscription jeudi 20 septembre 2007 Statut Membre Dernière intervention 28 décembre 2010
15 oct. 2009 à 23:15
OUF ! ENFIN ! Halleluia ! Mazeltov.....que pourrais-je dire de plus!!!!
Voilà ça marche une div masquée qui apparait avec un contenu différent selon le mot clé survolé poar la souris, le tout alimenté par une base de données!!!!
Voilà le code : 
<script type="text/javascript">
 function afficheinfo(id){
document.getElementById(id).style.visibility='visible'
}
function cacheinfo(id) {
  document.getElementById(id).style.visibility='hidden';
}
</script>


<?php 
$id = 1;
do {
$id++;
?>

" style ="position: absolute; width:300px; height:auto; z-index:1; background-color: #CC99FF; left: 405px; top: 136px; visibility: hidden;"><?php echo $row_Recordset1['description']; ?>

')" onMouseOut= "cacheinfo('info-<?php echo $id; ?>')"><?php echo $row_Recordset1['nom']; ?>

<?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>


Un grand merci pour ton aide précieuse et tes conseils avisés!!!!
Cordialement


Istella
0

Discussions similaires

avoir un nom de variable dynamique
nougitch -
nougitch -

10 réponses
affecter la date du jour à une variable
cs_vince2229 -
Teclis01 -

1 réponse
Différence ente protected function, public function, private function et functio
dvdstory -
cs_caviar -

4 réponses
poster une variable php dans un href
larcan57 -
chapata -

18 réponses
Arreter l'execution du php
cs_Arnauti -
mageonyme -

6 réponses
Rejoignez-nous