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>

**GxiGlon** · 19/12/2012, 15h00

Le post initial date, mais pour ceux qui sont confrontés au même souci, la solution est de passer l'option global à false aux requêtes AJAX pour lesquels on ne veut pas déclencher l'appel aux méthodes ajaxStart et ajaxStop

Source : http://stackoverflow.com/questions/1...active#tab-top

**Khleo** · 19/12/2012, 15h09

Salut,

J'utilise depuis une technique beaucoup plus simple :

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
function ChangerPage (NoPage)
{
    // On cache le conteneur de réception
    $("#ConteneurPrincipal").hide();
    // On affiche la div qui contient le loader souhaité
    $(".Loader").show();
 
    // On exécute un requete ajax 
    $.ajax({
        type: 'POST',
        url: 'ajax/ChangerPage.php',
        data: 't='+$("#pagination").attr("data-t")+'&p='+$("#pagination").attr("data-p"),
        dataType: 'text',
        success: function (result)
        {
            // On rempli notre conteneur du résultat
            $("#ConteneurPrincipal").html(result);
            // On cache le loader
            $(".Loader").hide();
            // Et on réaffiche le conteneur du résultat
            $("#ConteneurPrincipal").show();
        }
    });
}

C'est peut être plus "amateur" comme solution mais ça fonctionne très bien.

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

jQuery

Discussions similaires

Partager

Partager