Ajax et chargement

**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.

Ajax et chargement [Prototype]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager