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

  1. #1
    Membre régulier
    Profil pro
    Inscrit en
    mars 2009
    Messages
    100
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France, Moselle (Lorraine)

    Informations forums :
    Inscription : mars 2009
    Messages : 100
    Points : 89
    Points
    89

    Par défaut Perte du formatage CSS lors de la génération de balise par du javascript

    Bonjour à tous,

    Je ne suis pas du tout expert en langages Web, et je ne sais pas trop si mon soucis vient de HTML ou Javascript.
    Je vais essayer d'expliquer au mieux mon problème.

    J'ai un formulaire HTML avec un nombre indéterminé de listes déroulantes. Elles sont toujours liées par paire (1 = "Fréquence de prélèvement"; 2 = "Date d'effet").
    Au changement de valeur de la première liste, je veux mettre à jour la seconde selon le choix de la première. Alors ça fonctionne plutôt bien, car au changement de valeur de ma liste "Fréquence de prélèvement" j'obtiens les valeurs que je souhaite dans ma liste "date d'effet". Le problème étant que je perds mon style CSS. Enfin c'est l'impression que j'ai. Voir Image ci-dessous.

    Nom : styleCSS.png
Affichages : 32
Taille : 5,7 Ko

    Voici le code HTML de ma form
    Code HTML : 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
     
    <? $i++; ?>
    <table border="0" cellspacing="0" cellpadding="0" align="center" class="tab03">
    <caption>&nbsp; Contrat &nbsp;</caption>
        <tr>	
            <td>Fréquence de prélèvement</td>
    	<td colspan="9" >
    	    <select id="frequence<? echo $i ?>" name="frequence<? echo $i ?>" onchange="dateEffet(<? echo $i ?>);">
    		    <option value="M" <? if ($resultat["fractionnement"]=="M"){ echo 'selected = "selected"';}?>>Mensuel</option>
    		    <option value="T" <? if ($resultat["fractionnement"]=="T"){ echo 'selected = "selected"';}?>>Trimestriel</option>										
    	    </select>
    	    <input type="hidden" name="frequence_old<? echo $i ?>" size="1" value="<? echo $resultat["fractionnement"];?>">
    	    <input type="hidden" name="contrat<? echo $i ?>" size="1" value="<? echo $resultat["type_con"];?>">
    	</td>
        </tr>
        <tr id="dateEffet<? echo $i ?>">
     
        </tr>
    </table>

    Ma fonction Javascript "dateEffet()" appelée est la suivante

    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
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    	<script type="text/javascript">
    	function dateEffet(index){
    		var choix = document.getElementById("frequence" + index).value;
    		var frequence_old = document.forms['contact'].elements['frequence_old' + index].value;
    		var liste ="";
    		if (choix != frequence_old){
    			var date = new Date();
    			var mois = date.getMonth()+1;
    			var annee = date.getFullYear();
    			var i;
    			var j;
    			var k = 1;
    			var mois_var = "";
    			liste = '<td>Date d\'effet voulue</td><td colspan="9"><select id="selDateEffet' + index + '" name="selDateEffet' + index + '">';
    			if(choix == "M"){
    				//Si on est en décembre le 1er choix de la liste sera le janvier de l'année N+1
    				if(mois == 12){
    					mois = 1;
    					annee++;
    				}else{
    					mois++;
    				}
    				var anneeMax = annee + 1;	//On détermine l'année maximum
    				for(i = annee; i <= anneeMax; i++){
    					for(j = mois; j < 13; j++){
    						if(j < 10){
    							mois_var = "0" + j;
    						}else{
    							mois_var = j;
    						}
    						if(k == 1){
    							liste += '<option value="' + i + mois_var + '01" \'selected = "selected"\'>01/' + mois_var + '/' + i + '</option>';
    						}else{
    							liste += '<option value="' + i + mois_var + '01">01/' + mois_var + '/' + i + '</option>';
    						}
    						if(j == 12){	//Si on se trouve sur la dernière occurence de l'année on indique que le mois de l'année suivante est janvier
    							mois = 1;
    						}
    						k++;
    					}
    				}
    			}else if(choix == "T"){
    				//A partir d'octobre on se place sur l'année suivante
    				if(mois >= 10){
    					mois = 1;
    					annee++;
    				}
    				var anneeMax = annee + 1;	//On détermine l'année maximum
    				for(i = annee; i <= anneeMax; i++){
    					for(j = mois; j < 13; j = j + 3){
    						if(j < 10){
    							mois_var = "0" + j;
    						}else{
    							mois_var = j;
    						}
    						if(k == 1){
    							liste += '<option value="' + i + mois_var + '01" \'selected = "selected"\'>01/' + mois_var + '/' + i + '</option>';
    						}else{
    							liste += '<option value="' + i + mois_var + '01">01/' + mois_var + '/' + i + '</option>';
    						}
    						if(j == 10){	//Si on se trouve sur la dernière occurence (octobre quand on est en trimestriel) de l'année on indique que le mois de l'année suivante est janvier
    							mois = 1;
    						}
    						k++;
    					}
    				}
    			}
    			liste += '</select></td>';
    			alert(liste);
    			document.getElementById('dateEffet' + index).innerHTML = liste;
    		}
    		else{
    			document.getElementById('dateEffet' + index).innerHTML = '';
    		}
    	}
    	</script>
    Donc avec ce code, Je perds mon style CSS comme indiqué sur l'image précédente. Je ne sais pas pour quelle raison...

    J'ai essayé de changer mon code pour créer le <select id="selDateEffet"<? echo $i ?> dans mon code HTML et de juste alimenter les balises <option> avec ma fonction javascript mais ça ne fonctionne pas du tout...

    Si quelqu'un a une idée.

    Merci d'avance.

  2. #2
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    14 099
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 14 099
    Points : 28 500
    Points
    28 500

    Par défaut

    Bonjour,

    ce n'est pas le formatage CSS, mais certainement un plugin JS, qui modifie l'aspect des listes déroulantes.

    Avec une page en ligne, on pourrait en dire plus.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  3. #3
    Membre régulier
    Profil pro
    Inscrit en
    mars 2009
    Messages
    100
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France, Moselle (Lorraine)

    Informations forums :
    Inscription : mars 2009
    Messages : 100
    Points : 89
    Points
    89

    Par défaut

    Impossible de fournir une page en ligne, car il y a des sessions.

    En tout cas, merci de votre réponse, je vais regarder dans ce sens.

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 206
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 69
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 206
    Points : 65 453
    Points
    65 453
    Billets dans le blog
    1

    Par défaut

    regarde le code source généré AVANT la modif par js, et en particulier si l'element à une class ...
    rajoute cette class avec js ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag


    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  5. #5
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    14 099
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 14 099
    Points : 28 500
    Points
    28 500

    Par défaut

    @SpaceFrog

    Je pense qu'il s'agit plutôt d'un plugin, comme : chosen (jQuery)

    Auquel cas il faut "réactiver" le plugin APRES le passage par Ajax (ou comme ici, après la création du <select> via JS)
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  6. #6
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 206
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 69
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 206
    Points : 65 453
    Points
    65 453
    Billets dans le blog
    1

    Par défaut

    @Jr => Oui si tu veux toutes les fonctionnalités dues au plugin ...
    là il parle juste du css :grin:
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag


    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  7. #7
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    14 099
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 14 099
    Points : 28 500
    Points
    28 500

    Par défaut

    Un <select> ne se stylise pas "comme ça", si facilement.

    Là, ce n'est pas QUE du CSS :
    • ce sont des <div> et autres qui SIMULENT la liste déroulante.
    • le <select> lui-même est en display:none;
    • Exemple ici (regarder le code source généré : "Ctrl"+"U").

    La pseudo-liste déroulante est BEAUCOUP plus facile à styler en CSS (puisque ce sont des <div> et autres).


    Du moins, c'est ce qu'on peut supposer en regardant l'image fournie...
    Je me trompe peut-être (mais j'en doute).
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  8. #8
    Membre régulier
    Profil pro
    Inscrit en
    mars 2009
    Messages
    100
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France, Moselle (Lorraine)

    Informations forums :
    Inscription : mars 2009
    Messages : 100
    Points : 89
    Points
    89

    Par défaut

    Merci pour vos réponses.

    Alors comme dit, je n'ai pas une très grande connaissance du développement Web, étant Coboliste. Donc je ne comprends pas tout ce que vous me dites.

    Alors j'ai bien un choosen.jquery dans mes "scripts" de début de page. Je ne sais pas comment on fait pour désactiver ou réactiver ce plugin (et je ne pense pas que j'utilise Ajax).
    Toujours est-il qu'en supprimant la ligne
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <script src="../c&p/js/chosen.jquery.min.js" type="text/javascript" language="javascript"></script>
    je perds le formatage du CSS sur mes deux listes et plus seulement sur la 2ème.

    Alors j'ai changé ma page pour ne plus avoir le problème, je charge ma 2ème liste directement et non plus au changement de valeur de la 1ère liste.

    Mais si vous pouvez m'expliquer comment on réactive le plugin je peux essayer car j'ai gardé le code et ça pourra aider d'autres personnes

  9. #9
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    14 099
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 14 099
    Points : 28 500
    Points
    28 500

    Par défaut

    Bonjour,

    OK.
    Après la ligne 70 du script JS, ajoute :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
       $('#selDateEffet' + index).chosen();
    N.B. En effet, tu n'utilises pas Ajax, mais tu crées le <select> "à la volée" (dynamiquement).
    Il n'est pas présent dans le DOM au chargement de la page, et n'est donc pas pris en compte par le ".chosen()" initial (qui doit se trouver quelque part dans un script JS).
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  10. #10
    Membre régulier
    Profil pro
    Inscrit en
    mars 2009
    Messages
    100
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France, Moselle (Lorraine)

    Informations forums :
    Inscription : mars 2009
    Messages : 100
    Points : 89
    Points
    89

    Par défaut

    Super, ça marche !

    Merci beaucoup !

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

Discussions similaires

  1. [XL-2010] Perte du formatage conditionnel lors du partage
    Par zenii dans le forum Macros et VBA Excel
    Réponses: 4
    Dernier message: 25/03/2013, 14h39
  2. Réponses: 3
    Dernier message: 22/07/2010, 15h39
  3. Réponses: 0
    Dernier message: 21/05/2008, 09h16
  4. Réponses: 1
    Dernier message: 19/05/2008, 17h49

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