IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Création de liste et CSS


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé Avatar de baggie
    Profil pro
    Inscrit en
    Octobre 2007
    Messages
    755
    Détails du profil
    Informations personnelles :
    Âge : 36
    Localisation : France, Rhône (Rhône Alpes)

    Informations forums :
    Inscription : Octobre 2007
    Messages : 755
    Par défaut Création de liste et CSS
    Bonjour,

    j'utilise jQuery pour créer quelques listes dans mon application que j'agrémente avec des CSS par la suite.

    Cependant j'ai un problème.

    Voici une de mes listes : la liste des mois d'une année. Pour chaque mois, j'affiche un résultat à côté du mois (une image).
    J'ai également un tableau "correspondance" qui me retourne le mois en toute lettre quand je récupère le n° du mois.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
     
    $.ajax({
    	url: 'mapage.php?annee='+annee,
    	success: function(html) {
     
    		myData = JSON.parse(html, function (key, value) {
     
    		if(typeof value === 'string')
    		{
    			var splitdata = value.split('-');
    			// Si on a aucun résultat pour ce mois
    			if (splitdata[0] == 0)
    				$("#tablemois").append('<tr><td id="mois-'+key+'" class="mois">'+correspondance[key]+'</td></tr>');
    			// Si on a des résultats
    			else
    			{
    			// Si on a des résultats non terminés
    				if (splitdata[1] != 0
    					$("#tablemois").append('<tr><td id="mois-'+key+'" class="mois"><img src="../Images/img1.png" /> '+correspondance[key]+'</td></tr>');
    				else
    					$("#tablemois").append('<tr><td id="mois-'+key+'" class="mois"><img src="img2.png" /> '+correspondance[key]+'</td></tr>');
    			}
    	        }
    		if (key == mois)
    			$("#mois-"+key).addClass('moisencours').removeClass('mois');	
    });
    Et c'est donc en dernière partie du code, que si ma clé est égale au mois actuel (par exemple 12 en ce moment), alors j'ajouterai une classe.

    Dans ma liste, je peux cliquer sur chaque mois pour afficher les résultats de chacun d'eux. Sauf qu'en mettant mon dernier "if" pour ajouter la classe, il m'est au final impossible de recliquer sur le mois actuel.

    Par exemple, nous sommes en décembre. Au premier chargement de la page, le mois de décembre va se mettre en surbrillance. Quand je cliquerai sur un autre mois, c'est ce nouveau qui se mettra en surbrillance et plus le mois de Décembre. Sauf que je ne pourrai plus recliquer sur le mois de décembre. Il gardera toujours en mémoire le fait qu'il a eu cette classe, même si je l'enlève (avec un removeClass). Voir le code ci-dessous :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
     
    $(".mois").click(function() {
     
    	// On enlève la classe 'mois en cours' au mois actuel
    	$(".moisencours").addClass('mois');
    	$(".moisencours").removeClass('moisencours');
    	// On récupère le mois sélectionné
    	var selection = $(this).attr('id'); // nom-n°
    	var spliter = selection.split('-'); // On sépare
    	var mois = spliter[1]; // On récupère le n° du mois
     
    	$("#mois-"+mois).addClass('moisencours');
    	$("#mois-"+mois).removeClass('mois');
     
    });
    Et j'ai ce problème pour deux listes différentes. Donc si j'en règle un, je devrai réussir à régler l'autre.
    Voila pourquoi je vous demande de l'aide !

  2. #2
    Membre éclairé
    Profil pro
    Inscrit en
    Novembre 2010
    Messages
    72
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France

    Informations forums :
    Inscription : Novembre 2010
    Messages : 72
    Par défaut
    Salut,

    je viens de tester ce que tu fais et j'ai une petite question :

    ton $.ajax s’exécute quand exactement ? car la fonction de Click fonctionne bien correctement même en définissant de façon synthétique

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    var key=12;
    $("#mois-"+key).addClass('moisencours').removeClass('mois');

    Pourrais tu nous montrer la page ou se charge le tout ? comment cela est-il implémenter ?

    L.

  3. #3
    Membre éclairé Avatar de baggie
    Profil pro
    Inscrit en
    Octobre 2007
    Messages
    755
    Détails du profil
    Informations personnelles :
    Âge : 36
    Localisation : France, Rhône (Rhône Alpes)

    Informations forums :
    Inscription : Octobre 2007
    Messages : 755
    Par défaut
    Merci pour ta réponse !
    Cependant je ne peux pas montrer ma page, elle n'est pas en ligne.

    Mon ajax se déclenche dans une fonction qui elle est appelée au chargement de la page.

    Au niveau du code, je peux guère en donner plus parce que tout est quasiment là !

  4. #4
    Membre éclairé
    Profil pro
    Inscrit en
    Novembre 2010
    Messages
    72
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France

    Informations forums :
    Inscription : Novembre 2010
    Messages : 72
    Par défaut
    essaye de désactiver ta fonction .ajax et de mettre par defaut un des mois avec la classe moisencours et test pour voir si le probleme vient de cette fonction ajax

  5. #5
    Membre éclairé Avatar de baggie
    Profil pro
    Inscrit en
    Octobre 2007
    Messages
    755
    Détails du profil
    Informations personnelles :
    Âge : 36
    Localisation : France, Rhône (Rhône Alpes)

    Informations forums :
    Inscription : Octobre 2007
    Messages : 755
    Par défaut
    Sauf que mon ajax crée lui même ma liste, je la charge depuis ce fichier :/ Donc si je le désactive ben je n'aurai plus rien !

    Ma fonction Click fonctionne comme il faut, les classes passent bien sur le mois sélectionné quand il le faut.

    C'est uniquement si je veux revenir sur le mois en cours que ça pose problème.

    J'arrive pas à mieux expliquer Et niveau code je crois bien avoir donné ce qui correspondait au problème donc je ne vois pas quoi faire de plus :/

    Si je mets ma fameuse ligne (if key == ...), alors ça ne fonctionnera pas pour revenir sur le mois actuel. Si je l'enlève, le mois actuel ne s'affichera pas en surbrillance mais je pourrai revenir dessus.

  6. #6
    Membre éclairé
    Profil pro
    Inscrit en
    Novembre 2010
    Messages
    72
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France

    Informations forums :
    Inscription : Novembre 2010
    Messages : 72
    Par défaut
    Mais a quoi correspond le mois dans

    ?

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. création bean liste
    Par the_ugly dans le forum JSF
    Réponses: 2
    Dernier message: 06/12/2006, 11h24
  2. Parcours et création de liste
    Par Thomus38 dans le forum Prolog
    Réponses: 2
    Dernier message: 26/10/2006, 22h51
  3. Réponses: 2
    Dernier message: 04/06/2006, 21h35
  4. [PHP-JS] Création de liste déroulante dynamique
    Par eeckhout dans le forum Langage
    Réponses: 2
    Dernier message: 28/02/2006, 13h41
  5. proriete de liste deroulante (css)
    Par vplf dans le forum Mise en page CSS
    Réponses: 8
    Dernier message: 17/02/2005, 13h55

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo