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

Version imprimable

05/08/2010, 21h50
lili2704

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

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
05/08/2010, 22h27
Bovino

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 :aie:
06/08/2010, 12h39
llaffont
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:

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.
06/08/2010, 13h58
lili2704

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:

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. :lol:
Merci

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:

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

Essaye ça !

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
$("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.
	});

06/08/2010, 15h50
lili2704

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

Code:

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

Code:

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

C'est ça?
06/08/2010, 15h53
llaffont

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 :oops:
06/08/2010, 16h04
lili2704

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