11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Jquery... ouvrir un ascenseur ?

Pages :
Bonjour,

j'emploie la librairie jquery pour utiliser des ascenseurs
dans une faq (page "faq.php").
Le module jquery s'appelle "ascenseur.js"
Jusque là, tout est OK !

Pour aider à la compréhension,
sachez que dans ma page index (page "index.php"),
j'affiche 7 des questions les plus courantes.
Lorsque je clique sur l'une d'elle, la 3e par exemple,
mon href envoie vers "faq.php?q=3";
Jusque là, tout va toujours bien.

L'argument "q" est bien reçu par "faq.php".

Où cela se corse, c'est que l'ascenseur ne s'ouvre pas sur la 3e question !

Pouvez-vous m'aider à résoudre mon souci ?
Voici mes bouts de codes :

Code ascenseur.js :

jQuery().ready(function(){
	$(".ascenseur").next("div").hide();
	$(".ascenseur").click(function(){
		if($(this).next("div").is(":hidden")){
			$(".ascenseur").next("div:visible").slideUp();
			$(this).next("div").slideDown();
		}
	});
});


En tête de ma page "faq.php", se trouve le code php suivant :

require_once("php/connexionMysql.inc.php");
$requete="SELECT numero,visibilite,question,reponse FROM faq ";
$resultat=mysql_query($requete);

	if (isset($_GET['q']) && !empty($_GET['q'])) {
		$q=$_GET['q'];
	} else {
		$q=0;
	}


Et entre <body> et </body> de cette même page "faq.php",
se trouve le code html suivant :

      <div id="bloc21">
		  <?php while($faq=mysql_fetch_array($resultat))  { ?>
            <div class="ascenseur c12 bleu italique soulignement" style="margin-top:7px;"><a><?php echo $faq['question']; ?></a></div>
            <div class="c12" <?php echo ($faq['numero']==$q)?"style='visibility:visible;'":""; ?>><?php echo $faq['reponse']; ?></div>
          <?php } ?>
      </div>

Modifié par jytest (11 Jul 2011 - 13:02)
oui c'est vrai. Et cela est fait exprès.
Je t'explique :

Car, comme dans le 3e bout de code,
il y a une boucle while, qui remplit,
dans la page "faq.php",
toutes les questions (visibles) et toutes les réponses (invisibles, elles).
C'est quand on clique sur une question, que sa réponse s'affiche alors en ascenseur.

Mais venant de la page "index.php", en cliquant sur l'une des 7 questions les plus courantes,
je souhaiterais que, parmi toute la faq, la réponse soit ouverte sous la question équivalente.

L'équivalence q (de la page "index.php") se retrouve
dans la page "faq.php", via le GET['q'] (provenant de la page "index.php") et $faq['numero'].
Modifié par jytest (08 Jul 2011 - 10:46)
Au risque de paraître idiot, j'ai (re)testé...
Sous chrome et sous ie8,
et cela ne fonctionne pas tout à fait,
la variable est bien envoyée à "faq.php",
mais la question (cliquée dans la page index.php)
ne s'ouvre pas dans "faq.php".

Peux-tu encore prendre un peu de temps pour y jeter un oeil ?
Modifié par jytest (11 Jul 2011 - 12:57)
En effet il y a un truc.
ne faiut-il pas inverser les 2 lignes suivantes dans ta page faq.php


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


avoir ton script en premier ?
Modifié par french-petzouille (08 Jul 2011 - 14:16)
L'erreur n'est pas là,
parce que si j'inverse les 2 lignes de code,
quand j'ouvre faq.php,
les questions sont toutes ouvertes
avec leurs réponses !
Salut,

Ton erreur vient juste du fait que tu ajoutes une classe "visibilty", alors que hide(), slideUp() et slideDown() de jQuery jouent sur la classe "display". Et vu que tu fais un hide(), et ben tous tes div de réponses restent en display:none;

Donc :

echo ($faq['numero']==$q)?"style='display:block;'":"";


Sinon, pas besoin de faire un isset() puis un !empty() sur le test de ta variable $_GET['q']. Si la variable n'est pas vide, alors elle existe. seul le !empty() est nécessaire.
Salut,

Cela ne fonctionne pas non plus...

<div id="bloc21">
  <?php while($faq=mysql_fetch_array($resultat))  { ?>
  <div class="ascenseur c12 bleu italique soulignement" style="margin-top:7px;"><a><?php echo $faq['question']; ?></a></div>
  <div class="c12" <?php echo ($faq['numero']==$q)?"style='display:block;'":""; ?>><?php echo $faq['reponse']; ?></div>
  <?php } ?>
</div>


Quand on clique sur une question,
je voudrais tant que...
dans la faq, cette question soit ouverte avec sa réponse !

Je désespère, comment faire ?
D'avance, un grand merci à tous pour votre précieuse aide.
Modifié par jytest (11 Jul 2011 - 12:58)
Décidément c'est simple en apparence et tordu en pratique.

Suggestion: plutôt que de cagouiller avec les style visible ou display block , peux tu essayer de donner une classe supplémentaire à la question 3 si ?q=3.

un truc du genre:



echo ($faq['numero']==$q)?"class='voir'":"class='cacher'";


chque ligne aura la class= "c12 voir" ou "c12 cacher"

et d'intervenir sur ton jquery pour ajouter un truc du genre


$(".voir").css('display','block');
$(".cacher").css('display','none');

Modifié par french-petzouille (09 Jul 2011 - 11:58)
Alors c'est ton script "ascenceur.js" qui écrase le style display:block;
Et en même temps c'est normal, vu que dans ce script à la première ligne ça masque tous les div de réponses…


	$(".ascenseur").next("div").hide();



Ce qu'il faut donc faire c'est ajouter un classe au lieu de mettre un display:block :

echo ($faq['numero']==$q)?"class='showMe'":"";



Et dans ascenceur.js :

	$(".ascenseur").next("div:not(.showMe)").hide();
french-petzouille a écrit :

un truc du genre:

echo ($faq['numero']==$q)?&quot;class='voir'&quot;:&quot;class='cacher'&quot;;


Non ça ne marchera pas, les propriétés seront de toutes manières écrasées par ascenceur.js
on va peut-être y arriver à plusieurs Smiley smile

(ps : si tu pouvais me dépanner un peu plus sur mon propre topic Smiley smile )
Modifié par french-petzouille (09 Jul 2011 - 13:44)
Désolé les gars !
La solution proposée par ZeB_panam ne fonctionne pas non plus.

Merci à tous pour le smilblik...
Je sens que cela avance...
Moi j'ai plus d'idées...
A l'aide !
Merci d'avance.
Modifié par jytest (11 Jul 2011 - 12:57)
je vois que tu as modifié ton .js pour tenter la solution de ZeB_man

mais je ne vois aucune div avec la classe ".showMe" en entrant dans faq.php !

ajoute les . via ta boucle php

Et retente en inversant ces 2 lignes dans ton <head

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ascenseur.js"></script>
Modifié par french-petzouille (09 Jul 2011 - 17:31)
Mais si, elles se trouvent bien dans faq.php


<div id="bloc21">
  <?php while($faq=mysql_fetch_array($resultat))  { ?>
  <div class="ascenseur c12 bleu italique soulignement" style="margin-top:7px;"><a><?php echo $faq['question']; ?></a></div>
  <div class="c12" <?php echo ($faq['numero']==$q)?"class='showMe'":""; ?>><?php echo $faq['reponse']; ?></div>
  <?php } ?>
</div>


J'ai retenté d'inverser les 2 lignes de code suivantes :

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ascenseurfaq.js"></script>
.
Mais cela ne fonctionne pas!
Toutes, sans exception, sont toutes ouvertes

Par contre, il est vrai que nulle part,
je n'ai créé de classe .showMe
J'ai commencé à la créer dans faq.css...
Mais quoi mettre à l'intérieur ???
Modifié par jytest (09 Jul 2011 - 21:34)
Cette classe est juste là pour que jquery sache que s'il rencontre une <div c12 > qui possède cette classe .showMe ... il laisse cette <div> ouverte et qu'il ferme par defaut celles qui ne la contiennent pas.

aucun css nécessaire.

autrement dit:

une balise <div class="c12 showMe">blabla </div> devra rester ouverte en entrant dans faq.php

ton code remet la classe ... il faut faire comme cela :

 <div class="c12" <?php echo ($faq['numero']==$q)? ' showMe':''; ?>><?php echo $faq['reponse']; ?></div>

mettre un espace avant showMe pour avoir "c12 showMe" et non "c12showMe"
Merci à ZeB_panam et à french-petzouille !!!
Génial... Cela fonctionne vos idées !
Du code de french-petzouille,
j'ai juste corrigé une petite faute.
Voici le code qui fonctionne :

<div id="bloc21">
  <?php while($faq=mysql_fetch_array($resultat))  { ?>
  <div class="c12 showMe"></div>
  <div class="ascenseur c12 bleu italique soulignement" style="margin-top:7px;"><a><?php echo $faq['question']; ?></a></div>
  <div class="c12 <?php echo ($faq['numero']==$q)? ' showMe':''; ?>"><?php echo $faq['reponse']; ?></div>
  <?php } ?>
</div>

Modifié par jytest (10 Jul 2011 - 19:26)
Pages :
Sujet clos
Aller à