Quelques lignes de javascript
Fermé
obk
-
18 déc. 2010 à 01:13
Groarh Messages postés 682 Date d'inscription vendredi 1 août 2008 Statut Membre Dernière intervention 28 juin 2015 - 18 déc. 2010 à 13:41
Groarh Messages postés 682 Date d'inscription vendredi 1 août 2008 Statut Membre Dernière intervention 28 juin 2015 - 18 déc. 2010 à 13:41
A voir également:
- Quelques lignes de javascript
- Telecharger javascript - Télécharger - Langages
- Site de vente en ligne particulier - Guide
- Partage de photos en ligne - Guide
- Excel trier par ordre alphabétique en gardant les lignes - Guide
- Javascript void 0 c'est quoi ✓ - Forum Réseaux sociaux
3 réponses
Groarh
Messages postés
682
Date d'inscription
vendredi 1 août 2008
Statut
Membre
Dernière intervention
28 juin 2015
185
18 déc. 2010 à 02:21
18 déc. 2010 à 02:21
Bonsoir,
Il est où le JavaScript ? Je ne vois que du PHP ^^
Ta question est assez floue :/ Quand tu dis que tu veux ne pas afficher des éléments, tu veux qu'ils soient générés mais invisibles, ou bien pas générés ? Sinon à mes yeux, ton filtrage a sa place dans la clause WHERE de ta requête SQL, que tu ne montres pas...
J'attends des nouvelles ;)
Il est où le JavaScript ? Je ne vois que du PHP ^^
Ta question est assez floue :/ Quand tu dis que tu veux ne pas afficher des éléments, tu veux qu'ils soient générés mais invisibles, ou bien pas générés ? Sinon à mes yeux, ton filtrage a sa place dans la clause WHERE de ta requête SQL, que tu ne montres pas...
J'attends des nouvelles ;)
Bonjour,
Effectivement il n'y a pas de Javascript pask je ne sais pas du tout comment partir pour coder le script. Et en effet, je veux que tous les résultats soient générés pour en masquer certains lorsque l'utilisateur utilise le filtre. Je voyais ca comme une liste de checkbox a,b,c, etc et lorsque je coche une ou plusieurs cases, seuls les résultats correspondant restent affichés.
Je peux me tromper, mais j'ai cru comprendre que c'était plus simple en Javascript (par la méthode de masquage de blocs déjà généré) plutôt que de générer une nouvelle requête sql a chaque fois que l'on
Coche une case, nan ?
Merci encore
Effectivement il n'y a pas de Javascript pask je ne sais pas du tout comment partir pour coder le script. Et en effet, je veux que tous les résultats soient générés pour en masquer certains lorsque l'utilisateur utilise le filtre. Je voyais ca comme une liste de checkbox a,b,c, etc et lorsque je coche une ou plusieurs cases, seuls les résultats correspondant restent affichés.
Je peux me tromper, mais j'ai cru comprendre que c'était plus simple en Javascript (par la méthode de masquage de blocs déjà généré) plutôt que de générer une nouvelle requête sql a chaque fois que l'on
Coche une case, nan ?
Merci encore
Groarh
Messages postés
682
Date d'inscription
vendredi 1 août 2008
Statut
Membre
Dernière intervention
28 juin 2015
185
18 déc. 2010 à 13:41
18 déc. 2010 à 13:41
Ok je vois.
C'est un problème assez classique en JS, cliquer sur un élément pour en masquer un autre.
Pour moi, la solution la plus propre est d'utiliser la délégation d'évènements, mais si tu n'es pas à l'aise avec JS, on va prendre une solution plus simple.
Je te donne l'idée générale, et je te laisserai chercher par toi-même pour adapter ça à ta situation.
On a, d'une part, une fonction JS pour masquer un élément, sélectionné par son id.
C'est une bonne habitude à prendre de séparer les scripts et le code HTML : mets le script qui déclare cette fonction dans le <head>.
Ensuite, il faut surveiller l'évènement click. La solution propre s'appelle gestionnaire d'évènements (event listener en anglais) mais comme tu es débutant tu as le droit d'utiliser le viel attribut onclick :
Il faudra que tu génères un onclick et un id adaptés à chacun des couples d'éléments générés par ton PHP.
Maintenant il te faut une fonction pour ré-afficher les éléments masqués. Déclare-là dans le même script que la fonction masquer. Le principe est de « réinitialiser » la valeur display de l'élément :
Et comme tu ne peux pas mettre deux onclick sur le même élément, il te faudra un deuxième élément, ou alors une sorte de « mémoire ». Les checkbox sont pratiques pour ça car tu peux utiliser leur propriété checked. Là j'utilise l'objet this qui permet de repérer dynamiquement quel élément a été cliqué :
Bon courage !
C'est un problème assez classique en JS, cliquer sur un élément pour en masquer un autre.
Pour moi, la solution la plus propre est d'utiliser la délégation d'évènements, mais si tu n'es pas à l'aise avec JS, on va prendre une solution plus simple.
Je te donne l'idée générale, et je te laisserai chercher par toi-même pour adapter ça à ta situation.
On a, d'une part, une fonction JS pour masquer un élément, sélectionné par son id.
function masquer( id ) {
document.getElementById(id).style.display = 'none';
};
C'est une bonne habitude à prendre de séparer les scripts et le code HTML : mets le script qui déclare cette fonction dans le <head>.
Ensuite, il faut surveiller l'évènement click. La solution propre s'appelle gestionnaire d'évènements (event listener en anglais) mais comme tu es débutant tu as le droit d'utiliser le viel attribut onclick :
<div id="masque-moi">
...
</div>
<a href="#" onclick="masquer('masque-moi')">Clique-moi !</a>
Il faudra que tu génères un onclick et un id adaptés à chacun des couples d'éléments générés par ton PHP.
Maintenant il te faut une fonction pour ré-afficher les éléments masqués. Déclare-là dans le même script que la fonction masquer. Le principe est de « réinitialiser » la valeur display de l'élément :
function afficher( id ) {
document.getElementById(id).style.display = '';
};
Et comme tu ne peux pas mettre deux onclick sur le même élément, il te faudra un deuxième élément, ou alors une sorte de « mémoire ». Les checkbox sont pratiques pour ça car tu peux utiliser leur propriété checked. Là j'utilise l'objet this qui permet de repérer dynamiquement quel élément a été cliqué :
*** HTML ***
<input type="checkbox" onclick="basculer(this, 'masque-moi')" />
*** JS ***
function basculer( chkbox, id ) {
if (chkbox.checked) {
masquer(id);
} else {
afficher(id);
};
};
Bon courage !
