[AJAX] Perte des styles dans IE

Version imprimable

09/03/2007, 00h27
keulu

[AJAX] Perte des styles dans IE

Bonjour,

Y aurait-il une subtilité propre à IE (ce serait là bien la seule...:roll: ) qui fait que dans le contenu d'un DIV chargé en AJAX aucun style de la feuille de style du document principal n'est appliquable ?

La construction HTML du contenu chargé est bien restituée, mais elle ne prend en compte aucun formattage CSS.

FF ne pose aucun problème là dessus.

Si qq'un a une idée géniale à ce propos, j'y ai passé déjà un paquet de temps....

merci !!
09/03/2007, 13h57
sorenson

si j'ai bien compris, tu essaies d'appliquer une feuille de style de ta page principale sur un calque div.

A l'affichage normale de ta page ça marche et quand tu recharges le div, ça marche plus ? Tu recharge le contenu du DIV ou tu recréer la balise <DIV> entièrement ?

ex : monObjet.innerHTML="un contenu texte".
monObjet.innerHTML="<div>une contenu texte</div>".

?
09/03/2007, 14h50
keulu

Citation:

Envoyé par sorenson

si j'ai bien compris, tu essaies d'appliquer une feuille de style de ta page principale sur un calque div.

A l'affichage normale de ta page ça marche et quand tu recharges le div, ça marche plus ? Tu recharge le contenu du DIV ou tu recréer la balise <DIV> entièrement ?

ex : monObjet.innerHTML="un contenu texte".
monObjet.innerHTML="<div>une contenu texte</div>".

?

Je recharge le contenu d'un div qui est la cible de mon action XmlHttpRequest.
Mais le contenu chargé est lui même aussi une construction de divs et/ou de tables imbriqués.

Au chargement de la page, le div en question est vide.

Je peux fournir la source de mon outil XmlHttpRequest, mais je n'ai,pas l'impression que ce soit lui qui pose problème...
28/05/2007, 16h23
shadowbob

J'ai exactement le même problème...
Y as t'il une solution ?

Ce problème est très ennuyant !
personne n'as aucune idée d'ou cela peut venir ?

voici la technique d'appel XmlHttpRequest que j'ai pris sur ce forum :

Code:

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
77
78
79
80
81
82
83
var xmlhttps= new Array();
function execAjax(url, id, valeurs) {
 
  var i= xmlhttps.length;
  if(window.XMLHttpRequest) {// Mozilla
    xmlhttps[i]= new XMLHttpRequest();
    xmlhttps[i].onreadystatechange= function() { xmlhttpChange(i, url, id); };
    xmlhttps[i].open('POST', url, true);
    xmlhttps[i].setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=iso-8859-1');
    xmlhttps[i].send(valeurs);
  }
  else if(window.ActiveXObject) {// IE
    xmlhttps[i]= new ActiveXObject("Microsoft.XMLHTTP");
    if(xmlhttps[i]) {
      xmlhttps[i].onreadystatechange= function() { xmlhttpChange(i, url, id); };
      xmlhttps[i].open('POST', url, true);
      xmlhttps[i].setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=iso-8859-1');
      xmlhttps[i].send(valeurs);
    }
  }
}
 
function xmlhttpChange(i, url, id) {
  if(xmlhttps[i].readyState==4 && xmlhttps[i].status == 200) {
    setInnerHTML(document.getElementById(id), xmlhttps[i].responseText);
  }
}
 
// SetInnerHTML Sécurisé
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")
  }
  var AllScripts=divContent.getElementsByTagName("script")
  for (var i=0; i<AllScripts.length; i++) {
    var s=AllScripts[i];
    if (s.src && s.src!=""){
      // Précédement asynchrone, mis en synchrone pour éviter des problèmes de dépendances de scripts
      eval(getFileContent(s.src))
    }
    else {
      eval(s.innerHTML)
    }
  }
}
 
 
// Renvoie le texte de l'objet ActiveXObject le plus récent depuis une liste
var pickRecentProgID = function (idList){
  var bFound = false; // found progID flag
  for(var i=0; i < idList.length && !bFound; i++){
    try{
      var oDoc = new ActiveXObject(idList[i]);
      o2Store = idList[i];
      bFound = true;
    } catch (objException){};
  }
  if (!bFound)
    throw ("Aucun ActiveXObject n'est valide sur votre ordinateur, pensez à mettre à jour votre navigateur");
 
  idList = null;
  return o2Store;
}
 
 
// Retourne un nouvel objet XmlHttpRequest
var GetXmlHttpRequest_AXO=null
var GetXmlHttpRequest=function () {
  if (window.XMLHttpRequest) {
    return new XMLHttpRequest()
  }
  else if (window.ActiveXObject) {
    if (!GetXmlHttpRequest_AXO) {
	  GetXmlHttpRequest_AXO=pickRecentProgID(["Msxml2.XMLHTTP.5.0", "Msxml2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"]);
	}
	return new ActiveXObject(GetXmlHttpRequest_AXO)
  }
  return false;
}

keulu -> tu as utilisé cette technique aussi ?

Dans ce cas de figure précis, seuls les éléments ayant un attribut "class=" ne sont pas interprétés, comme cela a été dit dans un autre topic. En remplaçant les attributs CSS "class" par "id", cela fonctionne.

Par contre j'ai l'impression que le pb vient de la fonction setInnerHTML elle-même.
Code:

1 2 3 4 5 6 7 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 gros là on réaffecte les attributs aux éléments de la page. Là je n'ai pas les moyens de tester, mais si on enlève cette partie de la fonction setInnerHTML, je me demande ce qu'il se passera...

car au final seule cette partie :
Code:

1 2 3 4 5 6 7 8 9 10 var AllScripts=divContent.getElementsByTagName("script") for (var i=0; i<AllScripts.length; i++) { var s=AllScripts[i]; if(s.src && s.src!="") { eval(getFileContent(s.src)) } else { eval(s.innerHTML) } }
semble permettre de réinterpréter le code javascript présent dans la page Ajax en faisant un eval dessus.

Donc si on recode la fonction setInnerHTML de cette manière :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 setInnerHTML = function(divContent, HTML) { var s; var AllScripts; divContent.innerHTML=HTML; AllScripts=divContent.getElementsByTagName("script"); for (var i=0; i<AllScripts.length; i++) { s=AllScripts[i]; if (s.src && s.src!="") { eval(getFileContent(s.src)); } else { eval(s.innerHTML); } } }
Peut-être cela devrait-il marcher...
Pour ma part j'ai test que la première solution. Je testerai celle-ci ce soir et vous tiendrai au courant.

Edit : J'ai trouvé ! dans la première partie de la fonction réaffectant les attributs des éléments, IE réaffecte la valeur systématiquement, même si elle est à NULL !
Alors on se retrouvait avec des

Code:

<div id="null" class=null name="null"></div>

Forcément, même un navigateur comme IE n'aime pas ça.
donc j'ai fait tout bêtement ceci :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 var All=divContent.getElementsByTagName("*"); for (var i=0; i<All.length; i++) { if(All[i].getAttribute("id")) { All[i].id=All[i].getAttribute("id"); } if(All[i].getAttribute("name")) { All[i].name=All[i].getAttribute("name"); } if(All[i].getAttribute("class")) { All[i].className=All[i].getAttribute("class"); } }
Et là ça fonctionne ! Bon de mon côté le JS est toujours pas interprété sous IE mais il me semble que je me sers mal de cette fonction.

En espérant que cela en aidera plus d'un :-)

17/01/2008, 09h11
Flynt

Merci beaucoup Napalm, ta solution marche au poil ,j'avais des class=null aussi sous IE alors que sous Firefox c'était bon.

Maintenant ça fonctionne des 2 côtés par contre JS est interpreté tranquillement sous IE chez moi :) .