[AJAX] Je ne vois pas dans le code source généré ce que j'affiche avec innerHtml

**lili2704** · 05/08/2010, 21h50

Bonjour,

Newbie en ajax je pose peut être une question évidente mais je ne vois pas dans mon code source généré le code que j'ai inséré par ajax avec innerHtml. Ce qui me chagrine ce n'est pas tant de ne pas voir (puisque ça s'affiche correctement) mais que tout mon style a disparu et du coup mes hover, mes a ne fonctionnent plus.
Qu'est-ce que je peux faire?
Merci

**Bovino** · 05/08/2010, 22h27

Pour ce qui est du code source généré, avec Firefox et Firebug ou Web Developper c'est assez simple de le voir (onglet "HTML" de Firebug ou onglet "Voir Source > Voir le code source généré" pour Web Developper).

Pour tes autres questions... ben ça dépend de ton code

**llaffont** · 06/08/2010, 12h39

Cela dépend ou tu déclares tes Styles.

Si tu les déclares dans tes balise et que par la suite tu les remplaces par d'autre tu va avoir du mal a retrouver tes petits.

Si tu déclare tes style dans un CSS et que tu l'as fait comme ça :

Code :

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

1
2
3
4
5
6
7
<html>
<body>
<div id"Injecte ici">
<link rel="stylesheet" href="monstyle.css" type="text/css" />
</div>
</body>
</html>

et que ton injection se fait dans la balise "<div id"Injecte ici">" la non plus ne t'étonne pas.

**lili2704** · 06/08/2010, 13h58

Ok pour l'info avec Firebug, je viens de le faire et ça marche effectivement je vois bien mes sources générées.
Par contre, pour ce qui est du style je ne l'explique pas.
J'ai mon fichier index.php qui contient une div "moteur_image" et lorsque je fais certaines actions (onchange d'un select par exemple), j'attaque de l'ajax (fichier .js) et c'est là que je fais du innerHtml :

Code :

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

document.getElementById('moteur_image').innerHTML = leselect;

Le style est inclus dans mon fichier index.php et j'ai des actions jquery également sur cette div et son contenu dans un autre fichier .js inclus également dans le fichier index.php
Est-ce que ça serait pas ça le problème du coup? Puisque ce que j'affiche dans moteur_image à travers innerHTML vient d'un autre fichier php
Si je suis pas claire il faut le dire.

Merci

**lili2704** · 06/08/2010, 14h41

Excusez moi pour la confusion. Le style est OK, le seul problème est le jquery en fait. Voici le genre de chose que j'ai:

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
$("ul.thumb li").hover(function() {
	$(this).css({'z-index' : '10'});
	$(this).find('img').addClass("hover").stop()
		.animate({
			marginTop: '-110px', 
			marginLeft: '-110px', 
			top: '50%', 
			left: '50%', 
			width: '174px', 
			height: '174px',
			padding: '20px' 
		}, 200);
 
	} , function() {
	$(this).css({'z-index' : '0'});
	$(this).find('img').removeClass("hover").stop()
		.animate({
			marginTop: '0', 
			marginLeft: '0',
			top: '0', 
			left: '0', 
			width: '80px', 
			height: '80px', 
			padding: '5px'
		}, 400);
});
 
//Swap Image on Click
	$("ul.thumb li a").click(function() {
 
		var mainImage = $(this).attr("href"); //Find Image Name
		$("#main_view img").attr({ src: mainImage });
		return false;		
	});

Et ça, ça ne marche plus. Si vous avez une idée

**llaffont** · 06/08/2010, 15h37

Essaye ça !

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
$("ul.thumb li").hover(function() { //simulation de l'évènement hover (passer la souris sur un élement).
	$(this).css("z-index", "10"); //Tu affecte 
	$(this).find('img').addClass("hover").stop()
		.animate({
			marginTop: '-110px', 
			marginLeft: '-110px', 
			top: '50%', 
			left: '50%', 
			width: '174px', 
			height: '174px',
			padding: '20px' 
		}, 200);
 
	} , function() {
	$(this).css("z-index", "0");
	$(this).find('img').removeClass("hover").stop()
		.animate({
			marginTop: '0', 
			marginLeft: '0',
			top: '0', 
			left: '0', 
			width: '80px', 
			height: '80px', 
			padding: '5px'
		}, 400);
});
 
//Swap Image on Click
	$("ul.thumb li a").click(function() {
 
		var mainImage = $(this).attr("href"); //Find Image Name
		$("#main_view img").attr("src", "mainImage" );
		return false; //je suis pas sur que se soit utile click() retourne déjà un false il me semble.
	});

**lili2704** · 06/08/2010, 15h50

En fait, tu me ferais modifier juste ces deux lignes:

Code :

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

$(this).css("z-index", "10");

Code :

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

$("#main_view img").attr("src", "mainImage" );

C'est ça?

**llaffont** · 06/08/2010, 15h53

vi ! Car il me semble pas que les attributions de propriétés de .css() se fassent sous la structure JSON.

Le format JSON c'est pour de la Modification des propriétés de style d'un élement

C'est vicieux je l'accorde

**lili2704** · 06/08/2010, 16h04

J'essaierai ça, je te remercie pour ton aide.
Je te dirai si ça a marché.

[AJAX] Je ne vois pas dans le code source généré ce que j'affiche avec innerHtml

AJAX

Discussions similaires

Partager

Partager