Ajax et chargement

Version imprimable

Ajax et chargement

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:

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>  <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>  </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>

12/12/2007, 13h33
watchabongo

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);
}

Code:

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

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:

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
		});
}

Code:

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

12/12/2007, 15h51
kangaxx

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.