Refresh CSS dynamique - Ajax - IE

**vodnok** · 19/05/2008, 13h24

Bonjour à tous,

Sur mon site, qui n'est pas encore online, j'utilise l'ajax. Je mets donc à jour la page en cours avec de nouveau éléments. Ces éléments possèdent des classes CSS. C'est classe CSS sont dynamique. Je veux dire par là que chaque utilisateurs peux avoir sa propre classe CSS générée en fonction des paramètres qu'il a configuré.

Donc lorsque j'affiche une zone de manière ajaxée, je transfert le div + le css. Cela fonctionne sous FF. FF interprète bien le div en fonction du css passé avec mais hélas cela ne fonctionne pas sous IE.

Exemple théorique

Au chargement:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div>
<div id='classCss'>
<style>
.css1{
border: 1px;
}
</style>
 
</div>
<div id='content'>
<div id='1' class='css1'>blabla</div>
</div>
</div>

Après execution ajax ma page devient.

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
 
<div>
<div id='classCss'>
<style>
.css1{
border: 1px;
}
</style>
<style>
.css2{
border: 2px;
}
</style>
</div>
<div id='content'>
<div id='1' class='css1'>blabla</div>
<div id='2' class='css2'>blabla2</div>
</div>
</div>

Sous FF le div id='2' aura bien un border de 2px. Mais sous IE, aucune class css ne sera appliquée.

Une idée de solution ?

Peut être existe-il une fonction qui permet de rafraichir le style de la page en fonction des CSS contenu dans la page.

Je crois que Clubic fait cela (lors du choix de la skin) mais je n'arrive pas à comprendre comment ils font sur clubic même si ce n'est pas la même chose dans mon cas.

**Er3van** · 19/05/2008, 13h38

Normalement le style se définit entre les balises <head>.

De plus, les id/class doivent commencer par une lettre il me semble.

Ceci étant, ça ne devrait pas empêcher ta class d'être interprêtée...

**vodnok** · 19/05/2008, 20h19

oui les id 1 et 2 c'est pour l'exemple.

Lorsque je mets <style>...</style> dans un div durant une exécution ajax et qu'en suite je fais une visualisation du "generated code" avec la bar webdeveloper pour FF, le css ajouté se trouve bien dans le header.

Hélas, je n'arrive pas à afficher le generated code sous IE donc pas moyen de vérifier. Lorsque j'utilise un alert sur le div contenant le <style>...</style>, sous FF il me donne une valeur (<style>...</style> ) mais sous IE il retourne vide.

Sinon comme dois faire en javascript pour ajouter une classe css dynamiquement dans le header directement ?

Demain je testerai plus en profondeur mais je voudrais terminer le module en question sous FF avant de débugger sous IE.

Merci,

**vodnok** · 22/05/2008, 14h00

Quelques petites nouvelles.

Je crois savoir pourquoi ca fonctionne sous FF et pas sous IE. En fait ça ne fonctionne non plus sous FF.

Pour executer l'ajax qui me créer des div et insert les CSS associé, je partais de la home page qui me sert aussi de page de test. Et dans cette page de test, j'y mettais les classe css. Cette home page est une page normal pas d'ajax.

Et donc quand j'excutais l'ajax qui mettait les div et supprimait le contenu de la home page les css chargés sur la homepage sont effacés. Mais apparemment FF garde en mémoire les css même s'ils ne sont plus présent dans le code HTML modifié. Je souspsone FF que dés qu'il voit une class CSS la copie dans le header. Ce qui n'est pas le cas de IE.

Pour résumer, en réalité, en partant d'une page blanche, je n'arrive pas à intégrer des class css à ma page via ajax.

Donc je réitère ma question : Comme charger une class css via ajax ?

ou comment acceder au header de ma page pour y inserer directement les <style></style> ?

Merci,

ps: Merci pour le déplacement du topic, en effet ça concerne plus l'ajax que le css.

**vodnok** · 22/05/2008, 14h40

J'ai trouvé une page qui explique une méthode avec mootools

http://revnode.com/oss/css/

Exemple : (Ajouter une règle)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
var css = new CSS(); 
css.add_rules({ 
    'span.bold, span.bb': 
    { 
        'font-weight': 'bold' 
    }, 
    'span.big, span.bb': 
    { 
        'font-size': 'x-large' 
    } 
}).refresh();

Exemple : (supprimer une règle)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<span class="a" onclick="css.remove_rules(['span.bold, span.bb', 'span.big, span.bb']).refresh();">removing the classes</span>

Je vais essayer avec ça. Ce qui me dérange c'est l'absence de parseur

.class {
font-size : 12;
}

Mais je vais faire une fonctionne qui me génère le code. Ca doit pas être trop compliqué. Si vous avez une autre idée, hésitez surtout pas, je suis open

Je devrais générer le code suivant

var css = new CSS();
css.add_rules({
'.class' {
'font-size' : '12';
}
}).refresh();

**vodnok** · 22/05/2008, 15h29

Je rajoute une autre possible solution :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
function addCss(cssCode) {
var styleElement = document.createElement(”style”);
  styleElement.type = “text/css”;
  if (styleElement.styleSheet) {
    styleElement.styleSheet.cssText = cssCode;
  } else {
    styleElement.appendChild(document.createTextNode(cssCode));
  }
  document.getElementsByTagName(”head”)[0].appendChild(styleElement);
}

Explications

Si cette dernière fonctionne, j'opterai pour celle là. Cela m'évitera de devoir faire coexister mootools et prototype ce qui généralement est sujet à problème.

Dans l'explication la personne justifie chaque choix pour que la compatibilité soit maximale. Et c'est bien ce que je pensais. Il faut injecter directement le style dans le header pour que cela fonctionne.

**LeBigornot** · 23/05/2008, 17h51

Salut j'ai exactement le même problème que toi mais avec une définition css fixe dans un fichier.

J'ai ma page web principale avec mon css inclus dans le head comme cela:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<link rel="stylesheet" type="text/css" href="monstyle.css"/>

Quand j'ajoute dynamiquement des bouts de page par avec ajax, mes classes css ne sont pas prisent en comptes dans IE mais dans FF oui !

Pourtant je suis dans une situation plutot simple non ?

**Capt. Flame** · 23/05/2008, 18h07

Moi j'opte pour la solution de vodnok. Encore plus simple, tu peux le faire directement en donnant l'url d'une css... Évidemment, les classes qui seront "réécrites" dans le fichier ainsi chargé écraseront celles qui existaient... Ce qui est un avantage dans ton contexte...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
LoadCss: function(url){
	var scriptObj = document.createElement('link');
 
	scriptObj.type = 'text/css';
	scriptObj.rel = 'stylesheet';
	scriptObj.href = url;
 
	document.getElementsByTagName("head")[0].appendChild(scriptObj);
}

**LeBigornot** · 26/05/2008, 18h20

Envoyé par Capt. Flame

Moi j'opte pour la solution de vodnok. Encore plus simple, tu peux le faire directement en donnant l'url d'une css... Évidemment, les classes qui seront "réécrites" dans le fichier ainsi chargé écraseront celles qui existaient... Ce qui est un avantage dans ton contexte...

OUais mais moi je veux simplement me servir dans mes parties AJAX de ma seule et unique feuille de style inclue dans mon html ...
Je ne veut rien recharger ! C'est pas possible simplement ?

**Capt. Flame** · 26/05/2008, 20h47

Théoriquement tes styles devraient être considérés... Comment tu injecte ton code venant des appels ajax?

**LeBigornot** · 27/05/2008, 09h26

Envoyé par Capt. Flame

Théoriquement tes styles devraient être considérés... Comment tu injecte ton code venant des appels ajax?

J'ai trouvé mon soucis.

En fait j'utilise une fonction qui remplace le innerHTML pour faire des eval sur les parties javascript et les exécuter. Elle commence comme cela:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 function setInnerHTML(divContent, HTML) {
      divContent.innerHTML=HTML; 
      var All=divContent.getElementsByTagName("*");
      for (var i=0; i<All.length; i++) {
        All[i].id=All[i].getAttribute("id")
        All[i].name=All[i].getAttribute("name")
        All[i].className=All[i].getAttribute("class")
[...]
      }

En mettant en commentaire le

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

All[i].className=All[i].getAttribute("class")

çà marche niquel çà doit me foutre en l'air mes attributs class !

Désolé pour le dérangement inutile

**Capt. Flame** · 27/05/2008, 13h26

C'est vraiment étrange, tu ne devrais pas avoir à faire ce genre de manip... Bon, si ça fonctionne...

Tu meux marquer ton message

?

**vodnok** · 13/06/2008, 09h23

Je vais mettre en résolu même si je n'ai pas encore testé en vrai.

Je préfère la solution ou l'on passe la classe en text plutot qu'une URL, enfin dans mon cas c'est plus pratique. Surtout que je vais gérer les css chargés via la session PHP.

Quand j'affiche une page HTML classique, il y aura tous les CSS de base dans le header. Eux sont en cache de tout façon donc transmis une seule fois. Et je voudrais éviter que les CSS dynamiques soit transmis à chaque fois. Donc chaque fois que j'envoie un CSS dynamique dans le cas d'une execution ajax sur la page, je note dans la session le nom de la classe transmise. Ainsi je ne transmet qu'une seule fois la classe. Enfin là ça reste théorique mais la mise en pratique est pour aujourd'hui.

PS: Confirmation au sujet de la balise style. Elle ne peut pas être mise dans le body. Enfin ça ne respecte pas les normes. Sa place est dans le header.

Merci pour les conseils

**vodnok** · 13/06/2008, 13h48

Voila, j'ai profité du temps de midi pour implémenter la solution et ça a fonctionné du premier coup

(ça m'arrive pas souvent

)

Donc sous PHP j'ai une class utilsCss et la fonction addCss qui va ajouter dans la session la class css en question si elle n'a pas déja été chargée ou si on n'a pas encore demandé son chargement dans le process en cours.

Côté Javascript, j'ai la fonction écrite plus haut.

J'ai deux type de requête pour mon site : le mode HTML ou le mode ajaxJs.

Si c'est le mode HTML

En début d'instruction php, j'effectue une remise à zero des variables session contenant les css chargé

Je génèrère le code pour ajouter les class css avec des balise <script> et j'insère à la fin de mon code. Toutes mes pages HTML partage le même code de fin donc j'ai juste dut le modifier à un endroit

Si c'est le mode ajaxJs

Dans ma fonction qui me génère mon code javascript, je génère le code pour ajouter les class css.

Donc voila c'est totalement transparent, si j'ai besoin d'ajouter une class css générée, j'ai un appel de fonction à faire.

Si le CSS est déja envoyé ça ne l'envoie pas à nouveau
Si j'ai besoin de 10X la class lors de la même transaction il ne le diffuse qu'une seule fois.

PS: AjaxJs est un système d'abstraction à la génération de code javascript sous php.

Refresh CSS dynamique - Ajax - IE [MooTools]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager