Forum d'entraide PHPFrance

Bonjour,
J'ai une table avec le titre d'une actu et le détail de l'actu.
Je souhaite afficher tous les titres et tous les détails au départ. Et en cliquant en haut de ma page sur un lien, je souhaite n'afficher que les titres.
Mon code fonctionne puisque au départ tout est bien afficher (titre + détail de toutes mes actus°.
En cliquant sur Effacer, ça efface bien la div info, donc le détail de mon actu.
MAIS : ca ne fonctionne QUE pour la première actu !!!! Les autres actus de la BDD continuent d'être affichée et je ne comprends pas pourquoi.

J'ai fait un petit moteur ajax :

Code : Tout sélectionner

<script language="javascript" type="text/javascript">
  /*-----------------------------MOTEUR AJAX-----------------------------*/
   function effacer () {   
	 /*-----------------------------Config et envoi de la requete SYNCHRONE : */
	 objetXHR = new XMLHttpRequest();
   
	 document.getElementById("info").style.display="none";
  }
     function visible () {   
	 /*-----------------------------Config et envoi de la requete SYNCHRONE : */
	 objetXHR = new XMLHttpRequest();
   
	 document.getElementById("info").style.display="block";
  }
  /*--------------------------FIN DU MOTEUR AJAX--------------------------*/
 
   </script>

Puis mon code principal avec la base de données :

Code : Tout sélectionner

 <p><a href="#" onClick="effacer();" >EFFACER </a></p>
   
   <p><a href="#" onClick="visible();" >VISIBLE </a></p>


include ("connexion_bdd_inc.php");
$resultat=mysql_query("SELECT * FROM actu");
$champs=mysql_fetch_assoc($resultat);
while ($champs!=false) 
{
$titre = $champs[titre];
$detail= $champs[detail];
echo $titre;
echo '<div id="info">';
echo $detail;
echo' </div>';
$champs=mysql_fetch_assoc($resultat); //champs suivant
}
mysql_close();

Et dans ma feuille de style :

Code : Tout sélectionner

#info {
display:visible;
}

merci pour votre aide.
Erika

Soit tu as omis quelques lignes cruciales dans ce que tu nous as envoyés, soit j'ai bien peur qu'il faudra reprendre (en profondeur) quelques bases essentielles...

- Moteur Ajax ?
D'accord, tu crées un objet XMLHttpRequest(), mais tu n'en fais strictement rien... de plus, tu le "crées" à chaque fois dans une variable à portée globale (sans utiliser "var"). A moins qu'il ne manque un bon bout de code, il n'y aucune requête d'aucune sorte dans ton code.

- Plusieurs id's ?
Un identifiant se doit d'être unique, sur toute la page. Sinon ce ne serait plus un identifiant (du genre qui permet d'identifier). Or tu crées un div portant l'identifiant "info" pour chaque actualité (et c'est la que ce situe ton problème dans ce cas).

- La vie facile
C'est très bien de vouloir utiliser du javascript "Vanilla" (sans aucune bibliothèque/framework), mais pour être plus productif je peux te conseiller d'étudier l'un ou l'autre framework (par exemple Jquery tiens, qui devient synonyme de Javascript au fur et à mesure que coule la seine sous les ponts de Paris).

Bonjour et merci pour tes remarques.
Je pense avoir compris que ma div à un id qui s'appelle info. Donc le système marche pour ma première actu.

Mais comment faire alors ?
Car j'ai
actu 1
acu 2
actu 3
etc...
et je ne peux pas savoir combien il y a d'actu car ça change tous les jours.
Si tu as une idée ?

Erika

Bonjour.

Solution : modifier le CSS !

<script language="javascript">
function toggleClasse(css){
// prend en paramètre l'élément CSS à modifier
//on définit les règles CSS en fonction du navigateur 
    var crossRules= (document.styleSheets[0].cssRules)?document.styleSheets[0].cssRules:document.styleSheets[0].rules;
    var i = 0;
// On scanne complètement le CSS et on momdifie le CSS concerné
// Il y a moyen d'optimiser. Tel quel si le CSS est gros ça peut prendre du temps...
    while(crossRules[i]){
        if(crossRules[i].selectorText==css) {
            if(crossRules[i].style.display=='none'){crossRules[i].style.display='block';}
            else{crossRules[i].style.display='none';}
        }
        i++;
    }
}
</script>
<!-- le code html --->
<p><a href="#" onClick="toggleClasse('.info');" >CACHER</a></p>

Je te laisse le soin de compléter le code :
- Modifier le contenu du lien (changer CACHER en AFFICHER)
- Tester le cas où la règle n'existe pas dans le CSS de base
- etc.

Ou sinon comme Berzemus l'évoque, en Jquery:

$('.infos').toggle();

En admettant que tu changes

<div id="infos">

par

<div class="infos">

Dernière chose, display n'accepte pas la valeur "visible" mais toutes celles qui sont là : http://www.w3schools.com/css/pr_class_display.asp
Donc en gros dans ton cas tu choisis block ou inline

Forum d'entraide PHPFrance

rendre visible une box

rendre visible une box

Re: rendre visible une box

debutant ajax et javascript

Re: debutant ajax et javascript

Re: rendre visible une box