Perte des styles dans IE avec Ajax

Archive du forum. Le contenu chargé avec Ajax n'a plus de feuille de style sous Internet Explorer.

Forum
09-03-2007 00:46:40

keulu

Bonjour, Y aurait-il une subtilité propre à IE (ce serait bien là la seule... ) 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. Le problème se pose sur IE6 comme sur IE7. 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 13:13:22

webmaster

Ce serait plus facile de répondre avec un exemple du code que l'on veut charger dans la balise DIV. Avez-vous essayé avec le drapeau de la méthode open de XHR à: false. Dans ce cas le chargement est asynchrone.
09-03-2007 15:10:38

keulu

[quote=webmaster]Ce serait plus facile de répondre avec un exemple du code que l'on veut charger dans la balise DIV. Avez-vous essayé avec le drapeau de la méthode open de XHR à: false. Dans ce cas le chargement est asynchrone. Le contenu chargé est tout bètement un ensemble de divs et/ou tables imbriquées, par exemple pour le cas le plus simple :
<table>
<tr>
	<td class="common">
	mon contenu chargé
	</td>
</tr>
</table>
où common est un style défini dans la feuille de style chargée dans la page principale, donc déjà disponible partout. Ma commande open sur mon objet XmlHttpRequest est bien asynchrone. Voici le code de mon outil XmlHttpRequest, mais je n'ai pas l'impression que le pb soit de ce côté... En fait, vu que j'utilise déjà le div cible pour passer un message de chargement en cours, si je désactive l'écriture du contenu à la réponse, je m'aperçois que le message d'attente ne prends déjà pas les styles. Le pb serait donc plutôt sur 'cible.innerHTML'...
var XmlHttp = new Array();

function get_AJAX () {
	var xhr_object = null;
	if (window.XMLHttpRequest) {
		xhr_object = new XMLHttpRequest();
		return xhr_object;
	} else if(window.ActiveXObject) {
		xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
		return xhr_object;
	} else {
		alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
		return null;
	}
}

function loadUrlTo (url, destination, message) {
	var uniqueID = Math.round(Math.random()*100000);
	XmlHttp[uniqueID] = get_AJAX();
	var dest=document.getElementById(destination);
	XmlHttp[uniqueID].open("GET", url, true);
	XmlHttp[uniqueID].onreadystatechange = function() {
	        if (XmlHttp[uniqueID].readyState == 4) {
			if (XmlHttp[uniqueID].responseText != 'SESSION_EXPIRED') {
				if(window.stopLoading)
					stopLoading();
				dest.innerHTML = XmlHttp[uniqueID].responseText;
				// Reassign loaded elements ids, names and class
				var All = dest.getElementsByTagName("*");
				for (var i=0; i<All.length; i++) {
					All.id=All.getAttribute("id")
					All.name=All.getAttribute("name")
					All.className=All.getAttribute("class")
				}
				// Force execution of loaded javascript (functions should there be declared as vars : var func = function() {})
				var AllScripts = dest.getElementsByTagName("script");
				for (var i=0; i<AllScripts.length; i++) {
					var s=AllScripts;
					if (s.src && s.src!="")
						eval(getFileContent(s.src));
					else	eval(s.innerHTML);
				}
			} else	window.location.href = 'login.php?err_code=session_expired';
		} else if (XmlHttp[uniqueID].readyState == 1) {
			if (message != '')
				dest.innerHTML = '<span class="common">'+message+'</span>';
			//if (window.startLoading)
			//	startLoading();
      		}
   	}
  	XmlHttp[uniqueID].send(null);
}
09-03-2007 16:17:53

webmaster

J'ai fait un essai avec le code suivant, et cela fonctionne sous Internet Explorer. J'utilise le petit framework anaa ([url=http://www.anaa.eu]www.anaa.eu[/url]) Voila le fichier de texte que je charge
<div class="demo">
	Un texte pour example.
</div>
Voila la feuille de style dans la page qui charge le texte
<style>
	.demo
	{
		color: green;
	}

</style>
Voila la balise qui recevra le nouveau contenu:
<div id="storage"> ***Must be stored here***. </div>
Et les fonctions javascript qui appellent le framework:
<script src="anaa.js" type="text/javascript"></script>
<script language="JavaScript">

	function storing(data, element)
	{
		element.innerHTML = data;
	}

	function submitForm(element)
	{ 
		AARead("demo-css.txt", storing, element);
	} 

</script>
Voila l'URL de la démo complete http://www.xul.fr/scripts/demos-ajax.php J'espère que vous y trouverez la solution du problème ;)
© 2007-2013 Xul.fr