[Prototype] Ajax chargement prototype [Résolu]

watchabongo · 12/12/2007, 11h50

Bonjour,

je ne connais rien en ajax et je voudrai faire un chargement avec une image gif quand je clique sur mon bouton submit "Save Ajax".
En fait je clique sur mon bouton et j'appelle la fonction ajaxSave.
A l'intérieur je récupère le contenu de mon IFRAME (tinyMCE) et le fait passer dans mon parser qui le ressort en xhtml.
puis je fais une alert.
je voudrai qu'une image loading apparaisse pendant que le contenu est récupérer passé dans l'iframe avant d'être ressorti.

je ne sais pas du tout comment faire si quelqu'un pouvait m'aider.
Merci d'avance.

le code html

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">
<title>Publimap</title>
<!-- TinyMCE -->
<link rel="stylesheet" type="text/css" href="content.css">
<script language="javascript" type="text/javascript" src="parserXHTML/parserXhtml.js"></script>
<script language="javascript" type="text/javascript" src="tiny_mce.js"></script>
<script language="javascript" type="text/javascript" src="tiny_mce_init.js"></script>
<script language="javascript" type="text/javascript" src="prototype/prototype.js"></script>
</script>		
 
<script type="text/javascript">
 
function ajaxSave(){
var res = "";
ParserXhtml.clear();
res = ParserXhtml.getAllXHTML("mce_editor_0");
alert(res);
}
</script>
 
<!-- /TinyMCE -->
</head>
<body>
	<div class="conteneur">
 
	<textarea id="contenu" name="contenu" style="width: 100%">page de test</textarea>
	<br /><input type="button" value="Save Ajax" onclick="ajaxSave();">
	<div id="chargement" style="display: none"><img src="plugins/savexhtml/images/progress.gif"></div>
	</div>
</body>
</html>

watchabongo · 12/12/2007, 13h33

j'ai réussi à mettre mon image pendant l'execution et la supprimer à la fin.
Maintenant je voudrai mettre en opacity 0,5 mon textarea pendant que mon image loading est là.

function Save(){
new Insertion.Top('conteneur', "<div id='chargement'><img src='plugins/savexhtml/images/progress.gif'></div>");
var res = "";
ParserXhtml.clear();
res = ParserXhtml.getAllXHTML("mce_editor_0");
//$('chargement').remove();
alert(res);
}

watchabongo · 12/12/2007, 14h10

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function Save(){
new Insertion.Top('conteneur', "<div id='chargement'><img src='plugins/savexhtml/images/progress.gif'></div>");
$(conteneur).setStyle({
    opacity: 0.8
});
var res = "";
ParserXhtml.clear();
res = ParserXhtml.getAllXHTML("mce_editor_0");
//$('chargement').remove();
alert(res);
$(conteneur).setStyle({
    opacity: 1
});
}

Sur IE ça marche bien et sans erreur
j'ai une erreur sur firefox et je peux pas mettre -moz-opacity:0.8

watchabongo · 12/12/2007, 14h21

j'ai changé un peu j'ai rajouté des ' entre conteneur et ça passe mieux mais quand je veux mettre l'opacity de firefox toujours un bug :/

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
function Save(){
	new Insertion.Top('conteneur', "<div id='chargement'><img src='plugins/savexhtml/images/progress.gif'></div>");
 
	$('conteneur').setStyle({
	  -moz-opacity: 0.8
	  opacity: 0.8
	});
 
	var res = "";
	ParserXhtml.clear();
	res = ParserXhtml.getAllXHTML("mce_editor_0");
	alert(res);
 
	$('chargement').remove();
 
	$('conteneur').setStyle({
		-moz-opacity: 1
		opacity: 1
		});
}

watchabongo · 12/12/2007, 14h30

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
function Save(){
	new Insertion.Top('conteneur', "<div id='chargement'><img src='plugins/savexhtml/images/progress.gif'></div>");
 
	$('conteneur').setStyle({
	  '-moz-opacity': 0.8,
	  opacity: 0.8
	});
 
	var res = "";
	ParserXhtml.clear();
	res = ParserXhtml.getAllXHTML("mce_editor_0");
	alert(res);
 
	$('chargement').remove();
 
	$('conteneur').setStyle({
		'-moz-opacity': 1,
		opacity: 1
		});
}

ça marche sous firefox mais pas sur IE quelqu'un sait pourquoi ?
dsl pour le multi post

kangaxx · 12/12/2007, 15h51

Je ne sais pas si ca réglera le pb, mais tu peux essayer de passer par des classes en css, ca te fera un code plus lisible déjà, et peut etre que c'est les apostrophe que IE aime pas.

12/12/2007, 15h51	#6
kangaxx Membre habitué Inscription : septembre 2007 Messages : 169 Détails du profil Informations forums : Inscription : septembre 2007 Messages : 169 Points : 116 Points : 116	Je ne sais pas si ca réglera le pb, mais tu peux essayer de passer par des classes en css, ca te fera un code plus lisible déjà, et peut etre que c'est les apostrophe que IE aime pas. __________________ Cartes Pokémon, Yugioh, Magic ? Communauté d'échange
	00

12/12/2007, 13h33	#2
watchabongo Candidat au titre de Membre du Club Inscription : novembre 2007 Messages : 88 Détails du profil Informations forums : Inscription : novembre 2007 Messages : 88 Points : 14 Points : 14	j'ai réussi à mettre mon image pendant l'execution et la supprimer à la fin. Maintenant je voudrai mettre en opacity 0,5 mon textarea pendant que mon image loading est là. function Save(){ new Insertion.Top('conteneur', "<div id='chargement'><img src='plugins/savexhtml/images/progress.gif'></div>"); var res = ""; ParserXhtml.clear(); res = ParserXhtml.getAllXHTML("mce_editor_0"); //$('chargement').remove(); alert(res); }
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email