Gestion bouton de chargement [Résolu]

Khleo · 13/01/2011, 16h37

Bonjour,

Je souhaiterais afficher un bouton de chargement pendant qu'une fonction ajax s'éxécute :

Code :

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

<div id="charge" style="visibility:hidden;">Chargement en cours</div>

Code :

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

1
2
3
4
5
6
7
function Verif ()
{
	$.colorbox({href:"ajax/verif.php"});
	//-
	$('#charge').ajaxStart(function(request, settings) { $(this).css("visibility", "visible") });
	$('#charge').ajaxStop(function(request, settings) { $(this).css("visibility", "hidden") });
}

L’exécution prend 2 ou 3 secondes et j'aimerai que la div "Charge" s'affiche pendant le chargement.

Merci

thunder75 · 13/01/2011, 21h16

Avec ce code ca fonctionne.

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
<html>
<head>
<script type="text/javascript">
$(document).ready(function(){
 $('#ajaxBusy').ajaxStart(function(){
  $(this).show();
 }).ajaxStop(function(){
  $(this).hide();
 });
});
</script>
</head>
<body>
<div id="ajaxBusy" style="display:none"><p><img src="ajax-loading.gif"></p></div>
</body>
</html>

Khleo · 14/01/2011, 14h58

Ok merci,

En faite il ne fallait pas mettre les AjaxStart et AjaxStop dans la fonction.

Cependant, ça fonctionne sous Opera et Firefox mais pas sous Safari, IE et Chome, ce problème est-il connu ?

Merci

scourjean · 14/01/2011, 15h19

Et si tu utilises les paramètres de colorbox ça ne serait pas mieux:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function(){
	$.colorbox({
		href:"ajax/verif.php",
		onOpen: function(){
			$('#ajaxBusy').show();
		},
		onComplete: function(){
			$('#ajaxBusy').hide();
		}
	});
});

Khleo · 14/01/2011, 15h29

Citation:

Envoyé par scourjean

Et si tu utilises les paramètres de colorbox ça ne serait pas mieux:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function(){
	$.colorbox({
		href:"ajax/verif.php",
		onOpen: function(){
			$('#ajaxBusy').show();
		},
		onComplete: function(){
			$('#ajaxBusy').hide();
		}
	});
});

Merci, mais toujours pareil, ça fonctionne sous Firefox mais pas sous Chrome.

Sous Chrome, IE et Safari il y a une sensation de "Freeze" de la page très désagréable.

J'ai un peu modifié mon code :

Code :

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

1
2
3
4
5
6
7
8
function Verif ()
{
	$.ajax({
		type: 'GET',
		url: 'ajax/verif.php', 
		async: false
	});
}

Code :

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

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

Ce qui est bizarre, c'est que l'image loading ne s'affiche pas lors du 1er chargement, mais lorsque que je reclic sur le bouton une fois le 1er chargement passé, l'image s'affiche bien.

Merci

Khleo · 14/01/2011, 16h01

Le problème viendrait de :

Code :

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

async: false

Car quand celui ci est retiré, le bouton loading apparaît bien.

Citation:

async (booléen): par défault, toutes les requêtes sont asynchrones (ce paramètres vaut true par défaut). Si vous avez besoin de requêtes synchrones, passez cette fonction à false. A noter que les requêtes synchrones bloque temporairement le naviguateur de l'utilisateur tant que la requête n'est pas terminée.

http://jquery.developpeur-web2.com/d...jax/$.ajax.php

Le problème viendrait-il de là ?

Merci

thunder75 · 14/01/2011, 16h26

il faut peut etre ajouté un .ajaxSend(function(){$(this).show();})

Code :

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

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

mais c'est pas garanti

Khleo · 14/01/2011, 16h48

Citation:

Envoyé par thunder75

il faut peut etre ajouté un .ajaxSend(function(){$(this).show();})

Code :

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

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

mais c'est pas garanti

Non, il ne se passe rien mais merci pour la proposition

thunder75 · 14/01/2011, 16h50

N'ayant jamais testé async:false je suis à cours d'idées pour le moment.

Khleo · 14/01/2011, 16h54

Citation:

Envoyé par thunder75

N'ayant jamais testé async:false je suis à cours d'idées pour le moment.

Je vais essayer d'utiliser la propriété success d'ajax pour éviter d'avoir des requêtes synchrones.

Khleo · 14/01/2011, 17h52

Voilà ça fonctionne maintenant, et c'est beaucoup plus logique comme ça.

Merci

thunder75 · 14/01/2011, 17h57

14/01/2011, 14h58	#3
Khleo Membre habitué Développeur Web Inscription : janvier 2008 Messages : 365 Détails du profil Informations personnelles : Sexe : Âge : 24 Localisation : France Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2008 Messages : 365 Points : 140 Points : 140	Ok merci, En faite il ne fallait pas mettre les AjaxStart et AjaxStop dans la fonction. Cependant, ça fonctionne sous Opera et Firefox mais pas sous Safari, IE et Chome, ce problème est-il connu ? Merci
	00

14/01/2011, 16h50	#9
thunder75 Membre à l'essai Inscription : avril 2008 Messages : 18 Détails du profil Informations forums : Inscription : avril 2008 Messages : 18 Points : 21 Points : 21	N'ayant jamais testé async:false je suis à cours d'idées pour le moment.
	00

14/01/2011, 17h52	#11
Khleo Membre habitué Développeur Web Inscription : janvier 2008 Messages : 365 Détails du profil Informations personnelles : Sexe : Âge : 24 Localisation : France Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2008 Messages : 365 Points : 140 Points : 140	Voilà ça fonctionne maintenant, et c'est beaucoup plus logique comme ça. Merci
	00

14/01/2011, 17h57	#12
thunder75 Membre à l'essai Inscription : avril 2008 Messages : 18 Détails du profil Informations forums : Inscription : avril 2008 Messages : 18 Points : 21 Points : 21
	00

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