Javascript, CSS et Internet Explorer

**Bestiol** · 28/07/2006, 01h00

Bonjour à tous !

Je suis en train de faire une page web avec un peu d'ajax (c'est pas vraiment de l'ajax pour la partie qui me pose problème étant donné que j'utilise pas du xml mais peu importe...) derrière, et je suis confronté à un problème dont je n'ai trouvé aucune solution après beaucoup de recherches !

Je m'en remets donc à vous

Le problème est simple. Dans ma page j'ai un div qui contiendra une liste d'intitulés de messages :

Code :

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

<div id="liste-messages"></div>

Dans le onload de la page j'appelle une fonction javascript qui va se charger de créer le xmlHttpRequest. Avec celui-ci j'appelle mon script PHP qui me renvoie directement l'HTML que je récupère avec responseText et que je place dans le innerHTML du div déjà cité :

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
  if(_xmlHttp) 
  {
    //appel à l'url distante
    _xmlHttp.open("GET", "./getmessages.php?debut=" + debut + "&nombre=" + nombre, true);
 
    _xmlHttp.onreadystatechange = function() 
    {
      if(_xmlHttp.readyState == 4 && _xmlHttp.responseText) 
      {
		document.getElementById("liste-messages").innerHTML = _xmlHttp.responseText;
      }
    };
    // envoi de la requête
    _xmlHttp.send(null)
  }

Bon jusque là je n'ai aucun problème ! Le HTML est bien ajouté dans mon div et il s'affiche sur ma page.

Le problème c'est que j'ai défini des styles CSS dans une feuille de style externe qui sont censés s'appliquer aux div que mon script PHP me renvoie, et sous IE ces styles ne sont pas appliqués au contenu que j'ajoute grâce au javascript !

(aucun problème aec Firefox)

J'ai essayé de bidouiller en recopiant les styles dans les données renvoyées par le script PHP, au dessus des div, mais ça ne marche qu'à moitié et franchement ça me plait pas trop de faire ça....

Est-ce que quelqu'un a déjà eu ce problème ? Ou bien ne l'a pas mais connaît une solution ?

Si vous avez besoin de plus de détails n'hésitez pas à me demander

**SpaceFrog** · 28/07/2006, 08h33

Code :

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

<div id="liste_messages"></div>

???

**Bestiol** · 28/07/2006, 09h14

Salut Spafy

Merci pour ta réponse, mais malheureusement ça ne change rien

(et pour tout dire ça m'aurait bien ****** que ça soit ça

)

**SpaceFrog** · 28/07/2006, 09h34

??? c'est curieux ton souci car j'utilise cette technique et le css s'applique bine ...
tu n'as pas un souci de caractères interdits dans le responsetexte ?
ton respnse texte est il en forlat UTF-8 ?

viens sur le chat si tu veux qu'on en parle et que je te montre l'exemple en ligne que j'ai ...

**Bestiol** · 28/07/2006, 09h38

en header dans le retour de mon script j'ai mis :

Code :

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

header("Content-Type: text/html; charset=ISO-8859-1");

Faut que ce soit en utf-8 ??

J'arrive sur le chat

**Bestiol** · 28/07/2006, 11h04

Bon le problème ne se règle toujours pas

Voici un peu plus de code (à la demande de spacefrog):

Ma page HTML :

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
<html>
 
<head>
...
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
	<script src="livre-or.js" type="text/javascript"></script>
	<link rel="StyleSheet" type="text/css" href="./livre-or.css"/>
...
</head>
 
<body onload="ChargerMessages(0, 7);">
 
...
	<div id="liste-messages">
 
	</div>
 
 
</body>
</html>

La feuille de style :

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
div#liste-messages {
	position: absolute;
	left: 195px;
	top: 130px;
	width: 250px;
	height: 350px;
}
 
div.table-message {
	margin-top: 10px;
 
	background: #fffcde;
	border: 1px solid #4b1810;
	padding: 2px;
	opacity: 0.7;
	cursor: pointer;
}
 
div.table-message:hover {
	opacity: 1;
}
 
div.message-infos {
	font-size: 8pt;
}
 
img#img-lire {
	position: relative;
	left: 55px;
	top: -1px;
	cursor: pointer;
}

Le script PHP :

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
<?	header("Content-Type: text/html; charset=utf-8");
	include("bdd.php");
 
	ConnectBDD();
 
//Récupération des données en BDD
 
	while($message = mysql_fetch_assoc($req))
	{
?>
 
		<div class='table-message'>
 
			<div class='message-header' onclick='LectureMessage(<?= $message['id']?>)'>
				<?= substr($message['titre'], 0, 25)?>
			</div>
			<div class='message-infos'>
				Le <?= $message['date'] ?> &agrave <?= $message['heure'] ?>
				<img id='img-lire' src='./images/lire.gif' onclick='LectureMessage(<?= $message['id']?>)'/>
			</div>
		</div>
<?
	}
?>
		<table style='width: 100%'>
			<tr style='width: 100%'>
				<td style='text-align: left;'>
					<?if ($debut > 0) {?>  <span class='petit-texte'><a href='#' onclick='ChargerMessages(<?= $debut - $nombre?>, <?= $nombre?>)'>&lt;&lt; Pr&eacute;c&eacute;dent</a></span> <?}?>
				</td>
				<td style='text-align: right;'>
					<?if ($count > $debut + $nombre) {?>   <span class='petit-texte'><a href='#' onclick='ChargerMessages(<?= $debut + $nombre?>, <?= $nombre?>)'>Suivant &gt;&gt;</a></span>  <?}?>
				</td>
			</tr>
		</table>
 
<?	
	//print "]]></messages>";
	DeconnectBDD();
?>

Et pour le JS qui appelle ce script il suffit de regarder dans le premier message...

Est-ce que j'ai fait une grosse boulette ??

**Bestiol** · 28/07/2006, 15h10

Après plusieurs tests, on dirait que c'est un problème qui viendrait du serveur, ou de la version de php ou je ne sais quoi

J'ai fait une page toute conne qui faisait le même genre d'opération, c'est-à-dire ajout d'un div grâce à responseText. Le script est vraiment simple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<?
	header("Content-type: text/html; charset=UTF-8");
?>
	<div class="contenu-div">
		Bonjour
	</div>
	<div class="contenu-div">
		Au revoir
	</div>
	<div class="contenu-div">
		Bonjour
	</div>

Le style "contenu-div" n'est pas appliqué dans IE :
- sur mon PC en local avec EasyPHP
- sur mon hébergement OVH (mutualisé 60gp)

MAIS il est très bien appliqué, sur le même PC avec le même IE :
- sur mon hébergement developpez.com

et aussi sur le serveur IIS d'un ami !

Alors qu'est-ce qui pourrait causer une telle différence au niveau local sur les différents serveurs ??
La manière dont les données sont renvoyées ?

Si quelqu'un a une idée ce serait chouette, que je contacte OVH pour voir s'il y a quelque chose à faire...

**Johnbob** · 28/07/2006, 15h48

Une idée (sans trop d'espoir): utiliser des minuscules ici:

Code :

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

<link rel="stylesheet"...

**Bestiol** · 29/07/2006, 15h11

Salut Jung

Je vais essayer mais je n'y crois pas trop non plus.... Etant donné que le même code fonctionne ou ne fonctionne pas sur le même IE avec des serveurs différents, je ne vois pas pourquoi ce serait un problème côté client....

Le souci, c'est que je ne vois pas comment le serveur peut influer là-dessus

**FremyCompany** · 29/07/2006, 15h22

Voir le POST "Important : La Faq JavaScript ( 1 2 )" de ce forum

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
// 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].class=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!="") {
        setTimeout("eval(getFileContent(" + s.src + "))",0)
     }
     else {
        eval(s.innerHTML)
     }
  }
}
 
// Renvoie le texte de l'objet ActiveXObject le plus récent depuis une liste
var pickRecentProgID = function (idList){
	// found progID flag
    var bFound = false;
    for(var i=0; i < idList.length && !bFound; i++){
        try{
            var oDoc = new ActiveXObject(idList[i]);
            o2Store = idList[i];
            bFound = true;
        }catch (objException){
            // trap; try next progID
        };
    };
    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;
}
 
function getFileContent(url) {
   var Xhr=GetXmlHttpRequest();
   Xhr.open("HEAD",url,false);
   Xhr.send(null);
   return Xhr.responseText;
}

**Bestiol** · 29/07/2006, 15h38

Je sais pas pourquoi mais j'ai l'impression que je vais bientôt cliquer sur "résolu" !!

Merci Fremy, je vais tester ça le plus vite possible !!

**FremyCompany** · 29/07/2006, 15h55

Je précise que je n'ai jamais tesé avec l'attribut "class"

Une adaptation est peut-être nécéssaire pour l'un ou l'autre navigateur...
Le problème peut aussi venir d'ailleurs

**Bestiol** · 29/07/2006, 16h11

ça marche pas :'(

une ptite erreur dans ton code :

Code :

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

var All=divContent.getElementsByTagName("*");

que tu viens de corriger

Ceci dit, autant sur Firefox je ne reçois pas d'erreur que sur IE j'ai une erreur "ligne 26 ; Objet attendu".
La ligne 26 de mon js était dans une fonction que j'ai supprimée.... je relance et l'erreur est toujours ligne 26

une idée ? Je suis presque sûr que ton code est celui qu'il me faut !

edit: ça pourrait être à cause d'une fonction assignée à mon onclick que j'ai déclarée en faisant "function LireMessage(...)" ?
Il faudrait que je fasse "LireMessage = function LireMessage(...)" ?
Dans le onclick de mon div ensuite, je laisse la même chose ?

**FremyCompany** · 29/07/2006, 16h24

Attends, ta fonction LireMessage, elle est présente dès le début sur ta page ou tu la rajoute par la suite ?

Si tu la rajoute par la suite, comme indiqué dans mon message dans le post FAQ, tu dois utiliser la syntaxe LireMessage=function() {}

Si elle est déjà présente au chargement de la page (pas de innerHTML) alors le problème ne se pose pas...

Par contre j'avais déjà remarqué que tous les events javascript qu'on peut mettre sur les balises ne sont pas non plus correctement evalué...

Si tu fais ceci (ou similaire) :

Code :

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

divContent.innerHTML="<div onclick='execSub()'></div>"

, tu dois t'attendre à des problèmes...

Je n'ai pas encore cherché de metodes pour palier à ce problèmes... Sans doute faudrait-il utiliser la propriété "attributes" du DOM...

Essaie aussi de vider le cache d'IE... parfois ca arrange bien des problèmes...

**FremyCompany** · 29/07/2006, 16h33

Petit update de mon code... J'ai rajouté des blocs try-catch...

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
// SetInnerHTML Sécurisé
function setInnerHTML(divContent, HTML) {
  divContent.innerHTML=HTML; 
try {
  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")
    try {
      All[i].class=All[i].getAttribute("class")
    } catch (ex) { alert("Unable to set the Class attribute"); }
  }
} catch (ex) {}
try {
  var AllScripts=divContent.getElementsByTagName("script")
  for (var i=0; i<AllScripts.length; i++) {
     var s=AllScripts[i];
     if (s.src && s.src!="") {
        setTimeout("eval(getFileContent(" + s.src + "))",0)
     }
     else {
        try {
          eval(s.innerHTML)
        } catch (ex) {}
     }
  }
} catch (ex)
}
 
// Renvoie le texte de l'objet ActiveXObject le plus récent depuis une liste
var pickRecentProgID = function (idList){
	// found progID flag
    var bFound = false;
    for(var i=0; i < idList.length && !bFound; i++){
        try{
            var oDoc = new ActiveXObject(idList[i]);
            o2Store = idList[i];
            bFound = true;
        }catch (objException){
            // trap; try next progID
        };
    };
    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;
}
 
function getFileContent(url) {
   var Xhr=GetXmlHttpRequest();
   Xhr.open("HEAD",url,false);
   Xhr.send(null);
   return Xhr.responseText;
}
 
setInnerHTML(div, "<script>alert('Hello')</script><span id='span' class='class1'>Red ?</span>")

**Bestiol** · 29/07/2006, 16h36

Pour l'événement c'est bon en fait...

Le problème dans IE vient de

Code :

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

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

avec className ça passe mais ça n'applique pas le style à mes div....... seulement en cherchant deux minutes j'ai vu que class n'est pas compatible IE et qu'il faut utiliser className à la place !!

Pour info j'ai remplacé ton code par :

Code :

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

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

Pourquoi ça ne marche pas ?!

**FremyCompany** · 29/07/2006, 16h46

C'est etrange ca...
Avec tous les autres paramètres ca marche... et en effet, après tests, c'est bien className qu'il faut utiliser... Alors savoir pourquoi ca ne marche pas... Je vais chercher une methode de contournement...

**FremyCompany** · 29/07/2006, 17h09

Même en passant directement depuis les CSS rules, je n'y suis pas parvenu...
Allez comprendre pourquoi d'ailleurs...
Il faudrait peut-être faire un getElementById... sinon à part cela, je ne vois rien...

**Bestiol** · 29/07/2006, 23h03

Avec un getElementById, avant que tu ne me répondes, j'avais réussi à appliquer le style à mes div en accédant directement à DIV.style.xxxx, sans toutefois réussir à changer la taille de la police.
Et pour les liens je fais comment ? (désolé jsuis plutôt newbie en js

)

Jvais essayer avec getElementById et className pour voir si ça peut m'éviter de refaire le style élément par élément

Merci beaucoup Fremy, @+

**Bestiol** · 30/07/2006, 15h47

Bon ben c'est résolu !!

J'ai fini par reprendre ce que j'avais testé... Avec quelques ptites recherches j'ai fini par trouver tous les noms en javascript des éléments CSS que je voulais modifier

J'ai donc donné un id numéroté à chaque div et j'ai fait une ptite boucle dans mon js pour réassigner les styles après le changement de innerHTML

Ca me sidère un peu de voir qu'on est obligé de faire ça pour faire quelque chose de potable sous IE

Merci pour ton aide Fremy !
Merci aussi à Spafy qui a passé quelques heures à me faire tenter toute sorte de choses, et merci à Noisette qui m'a donné l'idée de la solution que j'ai finalement appliquée

++
Bestiol.

Javascript, CSS et Internet Explorer

JavaScript

Discussions similaires

Partager

Partager