[AJAX] Appliquer un style au résultat de Ajax

**PhunkyBob** · 30/07/2010, 15h47

Bonjour,

Je fais un site web qui contient des DIV, et je souhaite modifier dynamiquement le contenu de ces DIV.

Pour cela, j'utilise un objet XHR de la manière suivante :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
	xhr.onreadystatechange = function()
	{
		if (xhr.readyState == 4)
		{
			if(xhr.status  == 200)
			{
				var reponse = xhr.responseText;
				document.getElementById(destination).innerHTML = reponse;
			}
		}
	};

Ce code fonctionne très bien, à un détail près : le style de ma page n'est pas appliqué entièrement au résultat quand je spécifie la classe que je souhaite utiliser pour mon objet.

Comment puis-je faire pour que ce que j'injecte dans mes DIV utilise le même style que ma page principale, et ainsi pouvoir utiliser les même "class" ?

J'ai essayé en rajoutant une en-tête

Code :

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

1
2
3
4
5
6
 
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>

à mon résultat Ajax, mais ça ne change rien...

**jjameau** · 02/08/2010, 09h49

Bonjour,

D'où vient le contenu que tu injectes dans tes DIV, d'une Base de données ?

**jonathan3357** · 09/08/2010, 16h48

Est-tu sur que même sans AJAX le résultat s'affiche bien avec le bon style partout ?

Parce que tu dis "le style de ma page n'est pas appliqué entièrement au résultat", je comprends de cette phrase qu'une partie du résultat de ta requête AJAX a bine le style appliqué, et l'autre non ...

Donc vérifie bien en version statique, que si tu met dans ta div "destination" le contenu qu'il est censé y avoir (sans ajax ), que cela fonctionne bien, car le style est censé s'appliquer au résultat si le css est ok

**PhunkyBob** · 27/08/2010, 10h02

Bonjour,

J'ai une classe "je-suis-un-bouton", qui permet de transformer (en quelque sorte) un lien "<a..." en style "bouton".

J'ai le code

Code :

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

1
2
3
4
5
6
7
8
9
 
<html>
[...] (tout ce qu'il faut pour inclure mon CSS)
<body>
<div id="resultat"><a class="je-suis-un-bouton" href="">Click me</a></div>
 
[...]
</body>
</html>

Quand j'affiche cette page, mon lien a bien la tête d'un bouton.

Si, à l'aide d'ajax, je mets dans le div "resultat" le code

Code :

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

1
2
 
<a class="je-suis-un-bouton" href="">Click me</a>

avec par exemple

Code :

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

1
2
 
document.getElementById("resultat").innerHTML = '<a class="je-suis-un-bouton" href="">Click me</a>';

(ce qui est sensé être la même chose) mon lien ressemblera à un lien normal, et pas à un bouton.

**sou_rif** · 14/09/2010, 11h52

D'habitude quand un style ne s'applique pas à un élément HTML par un code (JavaScript, Jquery etc ...), soit c'est dû au faite que :

La feuille de style n'est pas chargée !
L'id de l'élément HTML sur le quel on souhaite appliquer le style n'est pas correcte !

Pour le test, je te conseil de déclarer le style que tu souhaite appliquer directement dans ta page HTML !

Bon courage

**PhunkyBob** · 21/09/2010, 12h16

Message déplacé.

J’espère avoir plus de réponses dans cette partie du forum

[AJAX] Appliquer un style au résultat de Ajax

AJAX

Vue hybride

Discussions similaires

Partager

Partager