Comment ajouter un message de chargement dans l'appel AJAX?

Question

J'ai une fonction AJAX comme ceci:

function change_session(val) {
    var change_session_id=document.getElementById('select_path').value;
      $.ajax({
                type: "GET",
                url: "/change_path/",
                async: false,
                data: {change_session_id:change_session_id},
                success: function(data){
                    document.getElementById('transfer1').innerHTML=data;
                    document.getElementById('transfer1').style.display="block";
                }
            });

}

Je suis en train d'appliquer AJAX dans une déclaration de sélection:

              {{ active }}
              {% for i in session_info %}
              {{ i.session_name }}
               {% endfor %}

Tout fonctionne bien mais lors du changement de l'option dans la déclaration de sélection, le contenu prend du temps à se charger et la déclaration d'option se fige jusqu'à ce que la fonction change_path soit terminée. J'aimerais donc ajouter le message "Chargement" dans l'élément div pendant que le chargement se termine.

Answer 1

Vous devez changer async:false en async:true parce que le mettre à false n'est plus une requête asynchrone.

Vous pouvez utiliser les méthodes de rappel de JQuery pour faire quelque chose avant d'envoyer la requête AJAX dans le bloc beforeSend et après l'achèvement, vous pouvez utiliser le rappel complete pour masquer le message de chargement.

function change_session(val) {
    var change_session_id=document.getElementById('select_path').value;
      $.ajax({
                type: "GET",
                url: "/change_path/",
                async: true,
                data: {change_session_id:change_session_id},
                beforeSend: function ( xhr ) {    
                     $("#loadingDIV").show();
                },
                success: function(data){
                    document.getElementById('transfer1').innerHTML=data;
                    document.getElementById('transfer1').style.display="block";
                },
                complete : $("#loadingDIV").hide()
            });

}

Answer 2

Vous devriez supprimer le async:false qui bloque la fenêtre. Ensuite, avant de faire l'appel AJAX, affichez le message de chargement dans le DOM, et masquez-le en cas de succès :

function change_session(val) {
var change_session_id=document.getElementById('select_path').value;

$("#transfer1").html("Chargement en cours...");

  $.ajax({
            type: "GET",
            url: "/change_path/",
            data: {change_session_id:change_session_id},
            success: function(data){

                $('#transfer1').html(data)
                    .css("display", "block");

            }
        });

 }

Et puisque vous utilisez déjà jQuery, vous pourriez utiliser des sélecteurs/fonctions jQuery au lieu du JavaScript brut. :)

Answer 3

JQuery a quelques événements intégrés pour cela.

/**
 * onAjax -> Indicateur de chargement
 */
$("body").on({
    ajaxStart: function() { 
        $(this).addClass("loading"); // Je l'utilise principalement. Cela ajoute une classe au body.
    },
    ajaxStop: function() { 
        $(this).removeClass("loading"); 
    }    
});

Donc dans le CSS vous pourriez faire quelque chose comme :

#loading-ind {position:absolute; top:0; left:0; height:100%; width:100%; display:none;}
body.loading #loading-ind {display:block;}

Ces règles CSS ne sont qu'un exemple, la propriété importante est display. Le reste vous pouvez le configurer comme vous le souhaitez.

Cependant, vous pouvez faire toutes sortes de choses au lieu de supprimer/ajouter une classe ;) Dans votre cas, ce serait d'ajouter le texte 'loading..' à la div. Gardez à l'esprit que ces événements se déclenchent sur TOUS les appels ajax, donc je ne sais pas si c'est la meilleure option.

Answer 4

Code CSS :

.loadingMask {  
    background: url(loader.gif) center 50% no-repeat #000000; 
    top:0; 
    left:0; 
    position:fixed; 
    height:100%; 
    width:100%; 
    opacity:0.7;
    filter:alpha(opacity=70); 
    z-index:12030   
 }

Ce css va générer une superposition de chargement sur votre page web..

Dans la propriété de fond donnez n'importe quel chemin d'image de chargement.. vous pouvez générer vos images de chargement avec le Générateur ajaxload.info.

HTML :

JavaScript :

function change_session(val) {
    var change_session_id=document.getElementById('select_path').value;
      $.ajax({
                type: "GET",
                url: "/change_path/",
                async: false,
                beforeSend :function(){
                    $("#loadingMask").css('visibility', 'visible');
                },
                data: {change_session_id:change_session_id},
                success: function(data){
                    $("#loadingMask").css('visibility', 'hidden');
                    document.getElementById('transfer1').innerHTML=data;
                    document.getElementById('transfer1').style.display="block";
                }
            });

}

Answer 5

Une solution de contournement consiste à ajouter un Bootstrap Tooltip à tout élément du DOM qui invoquera change_session(val), avec un message sur le temps de chargement (potentiel) en cas de clic.

Ce n'est pas le meilleur moyen, mais si vous supposez que votre utilisateur est prêt à cliquer sur l'entrée et donc survoler, vous saurez que le message s'affichera.