Discussion :

[omar24]

Salut tout le monde;

Je voudrais afficher un massage d'attente, comme par exemple loading..., lorsque j'envoie une requete ajax avec jquery.
Donc ce messsage doit apparaitre lorsque succes de $.ajax est en cours d'execution.

J’attends vos propositions car je n'ai la moindre idée.
Merci infiniment.

[SpaceFrog]

Ben c'est simple
au moment ou tu lances l'ajax tu fais un show d'un message d'attente ou d'un gif animé, et dans le success tu en fais un hide

[Pilru]

Rien de plus simple :

1. Créer une div :

Code :

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

$("<div id=\"divLoading\" style=\"display:none; width: 130px; text-align: center; padding: 5px 0px 5px 0px;\">chargement...</div>").appendTo(document.body);

2. Liéer les évènement AjaxSend et AjaxStop :

Code :

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

1
2
3
 
$("#divLoading").bind("ajaxSend", function() { $(this).show(); });
$("#divLoading").bind("ajaxStop", function() { $(this).fadeOut(); });

Et voilà. A toi de styler et placer la div et d'y ajouter un gif animé...

[omar24]

Merci pour vos réponses je commence à voir les choses
Pilru: mon problème c'est que dans ma page il y a plusieurs boutons et un clic sur chacun d'eux engendre une requête AJAX est ce qu'il n y a pas un moyen pour filtrer les boutons sur lesquels je veux executer ajaxsend et ajaxstop??

[Pilru]

A la place de ajaxSend et ajaxStop, il est possible d'ajouter des callback sur les évènement beforeSend et complete de chaque appel ajax :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "...",
        data: "..."
        dataType: "json",
        beforeSend: function () { $("#divLoading").show(); },
        complete: function () { $("#divLoading").fadeOut(); },
        success: function(data) { ... }
    });

[omar24]

Merci bien en fait j'ai combiné les deux complete dans la requete ajax directement avec

Code :

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

 $(this).bind("ajaxSend", function() { mark.setVisible(true); });

et sa marche très bien merci infiniment .