2011-02-11 2 views
0

Voici un extrait de code que j'ai pour une requête Ajax. La requête fonctionne, mais lorsque la requête est traitée, la page apparaît sans aucun CSS (même si j'ai tout dans le même répertoire). Pour tester cela, j'ai fait pointer la demande vers une page de mon site qui existait déjà. De l'aide? Merci d'avance.Ajax demande fonctionne, mais sans CSS

<html> 
<head> 
<script type="text/javascript"> 
function loadXMLDoc() 
{ 
var xmlhttp; 
if (window.XMLHttpRequest) 
    { 
    xmlhttp=new XMLHttpRequest(); 
    } 
else 
    { 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 
    } 
    } 
xmlhttp.open("GET","ajaxtest.html",true); 
xmlhttp.send(); 
} 
</script> 
</head> 
<body> 
<div id="myDiv"><h2>Let AJAX change this text</h2></div> 
<button type="button" onclick="loadXMLDoc()">Change Content</button> 
</body> 
</html> 
+0

Est-ce que 'ajaxtest.html' est en train de charger des fichiers CSS? –

+0

Pouvez-vous ajouter plus de code. Comme ce que vous avez dans le myDiv? Aussi, que retournez-vous? –

+0

Oui, j'ai pointé la requête vers une page qui existe déjà sur ma page et lorsqu'elle n'est pas consultée via la requête Ajax, tout le CSS est là. – dzi

Répondre

1

Injecter dans une page css via Ajax est pas pris en charge par tous les navigateurs (que ce soit en ligne ou via une balise <link>).

La solution consiste à charger le CSS pour le contenu ajax dans la page contenant l'appel Ajax.

0

Selon W3 Schools, un élément <link> pour une feuille de style peut uniquement apparaître dans votre document <head>. Par conséquent si vous incluez le contenu d'un fichier externe entier (qui lie ses propres styles) dans votre <div>, ceux-ci ne seront pas chargés.

0

Le problème est que vous écrasez l'étiquette H2 avec innerHTML. si vous aviez quelque chose comme

<h2 id="myDiv">Let AJAX change this text</h2> 

Il garderait le h2. Ou vous devez avoir le AJAX passback:

<h2>What I want to change it to</h2> 
0

Déplacez votre css dans un élément < de style > à l'intérieur du pege vous demandez avec ajax. Devrait faire l'affaire.

La deuxième façon est d'insérer le CSS pour la page que vous demandez avec ajax dans le fichier css de la page à partir de laquelle vous demandez.

Questions connexes