Désactiver ajaxStart() et ajaxStop() pour certaines fonctions

Khleo · 31/01/2011, 19h56

Bonjour,

J'utilise ajaxStart() et ajaxStop() pour gérer une image de chargement.

Le problème c'est que l'image de chargement s'affiche pour n'importe quel chargement Ajax alors que je voudrais qu'elle s'affiche uniquement pour certaines de mes fonctions.

Est-il possible de le désactiver pour certaines fonction ?

Merci

Code :

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

1
2
3
4
5
6
$('#charge').ajaxStart(function () {
	$(this).show();
});
$('#charge').ajaxStop(function () {
	$(this).hide();
});

danielhagnoul · 03/02/2011, 22h39

Bonsoir

C'est un comportement normal et je ne vois pas comment y remédier, car ces méthodes ne reçoivent pas en paramètres les informations qui permettraient de traiter le problème.

Mais on peut se servir des nouvelles possibilités de jQuery 1.5 pour terminer l'animation. Pour la démarrer on doit le faire avant d'appeler la transaction AJAX. Voici un exemple avec $.getJSON(), mais le principe est le même pour tous les types de transaction AJAX.

À cause des restrictions imposées par : Cross-Origin Resource Sharing, cette page est une page PHP traitée par WampServer

Je n'arrive plus à travailler correctement sur mon ordinateur avec un simple fichier JSON et une page HTML affichée dans Firefox 3.6.13 ou Chrome 9.0.597.86, c'est fou ! Sans un serveur pour donner les réponses attendues par le navigateur on n'obtient plus que des erreurs et des avertissements.

Cet exemple nécessite jQuery 1.5

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!doctype html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal;
		font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
		div#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF;
		color:#000000; border:1px solid #666666; }
 
		/* TEST */
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<div id="conteneur">
 
<button id="dvjhBtnID">Get JSON</button>
 
	</div>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.min.js"></script>
	<script>
		$(function(){
 
/*
À cause des restrictions imposées
par : "Cross-Origin Resource Sharing : http://www.w3.org/TR/cors/"
cette page est une page PHP traitée par un serveur (WampServer 2.0
sur mon ordinateur).
 
Je n'arrive plus à travailler correctement sur mon
ordinateur avec un simple fichier JSON et une page HTML
affichée dans Firefox 3.6.13 ou Chrome 9.0.597.86, c'est fou !
 
Sans un serveur pour donner les réponses attendues par le
navigateur on n'obtient plus que des erreurs et des avertissements.
 
Cet exemple nécessite jQuery 1.5
*/
$("#dvjhBtnID").click(function(){
	// code pour lancer l'animation
 
	$.getJSON('dateJSON.js', function(data, textStatus, jqXHR) {
		console.log(data, textStatus, jqXHR);
 
		// succès de la transaction, traité le contenu de data
 
	}).error(function(jqXHR, textStatus, errorThrown){
		console.log(jqXHR, textStatus, errorThrown);
 
		// échec de la transaction, gèrer la catastrophe
 
	}).complete(function(jqXHR, textStatus){
		console.log(jqXHR, textStatus);
 
		// la transaction s'est terminée par un succès ou par un échec
		// code pour terminer l'animation
 
	});
});
		});
	</script>
</body>  
</html>

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