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.

Refresh CSS dynamique - Ajax - IE [MooTools]

Bibliothèques & Frameworks

Vue hybride

Discussions similaires

Partager

Partager