Javascript, CSS et Internet Explorer

Version imprimable

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:

<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:

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 ;)

:merci:

28/07/2006, 08h33
SpaceFrog

Code:

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

???
28/07/2006, 09h14
Bestiol

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 :lol:)
28/07/2006, 09h34
SpaceFrog

??? 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 ...
28/07/2006, 09h38
Bestiol

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

Code:

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

Faut que ce soit en utf-8 ??

J'arrive sur le chat ;)

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

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

Ma page HTML :

Code:

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:

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:

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 ?? :oops:

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:

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...

28/07/2006, 15h48
Johnbob

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

Code:

<link rel="stylesheet"...
29/07/2006, 15h11
Bestiol

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 :piou:

Voir le POST "Important : La Faq JavaScript ( 1 2 )" de 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
// 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;
}

29/07/2006, 15h38
Bestiol

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

Merci Fremy, je vais tester ça le plus vite possible !!
29/07/2006, 15h55
FremyCompany

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
29/07/2006, 16h11
Bestiol

ça marche pas :'(

une ptite erreur dans ton code :

Code:

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

que tu viens de corriger :mouarf:

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 :roll:

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 ?
29/07/2006, 16h24
FremyCompany

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:

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...

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

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
// 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>")

29/07/2006, 16h36
Bestiol

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

Le problème dans IE vient de

Code:

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:

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

Pourquoi ça ne marche pas ?! :(
29/07/2006, 16h46
FremyCompany

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...
29/07/2006, 17h09
FremyCompany

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...
29/07/2006, 23h03
Bestiol

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 :oops:)

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, @+ ;)
30/07/2006, 15h47
Bestiol

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.