web-dev-qa-db-fra.com

Comment appeler .ajaxStart () sur des appels ajax spécifiques

J'ai des appels ajax sur le document d'un site qui affichent ou cachent une barre de progression en fonction de l'état ajax

  $(document).ajaxStart(function(){ 
        $('#ajaxProgress').show(); 
    });
  $(document).ajaxStop(function(){ 
        $('#ajaxProgress').hide(); 
    });

Je voudrais essentiellement remplacer ces méthodes sur d'autres parties du site où de nombreux petits appels ajax rapides sont effectués et n'ont pas besoin que la barre de progression apparaisse et sorte. J'essaie de les attacher ou de les insérer dans d'autres appels $ .getJSON et $ .ajax. J'ai essayé de les enchaîner mais apparemment ce n'est pas bon.

$.getJSON().ajaxStart(function(){ 'kill preloader'});
jqueryajaxprogress-barpreloader
47
kevzettler

2018 REMARQUE: Cette réponse est obsolète; n'hésitez pas à proposer une modification de cette réponse qui fonctionnera.

Vous pouvez lier ajaxStart et ajaxStop à l'aide d'un espace de noms personnalisé:

$(document).bind("ajaxStart.mine", function() {
    $('#ajaxProgress').show();
});

$(document).bind("ajaxStop.mine", function() {
    $('#ajaxProgress').hide();
});

Ensuite, dans d'autres parties du site, vous les dissociez temporairement avant vos appels .json:

$(document).unbind(".mine");

J'ai eu l'idée de ici lors de la recherche d'une réponse.

EDIT: Je n'ai pas eu le temps de le tester, hélas.

35
montrealist

Si vous mettez ceci dans votre fonction qui gère une action ajax, elle ne se liera que si cela est approprié:

$('#yourDiv')
    .ajaxStart(function(){
        $("ResultsDiv").hide();
        $(this).show();
    })
    .ajaxStop(function(){
        $(this).hide();
        $(this).unbind("ajaxStart");
    });
15
Jason Rikard

Il y a un attribut dans l'objet options .ajax () prend appelé global.

S'il est défini sur false, il ne déclenchera pas l'événement ajaxStart pour l'appel.

    $.ajax({
        url: "google.com",
        type: "GET",
        dataType: "json",
        cache: false,
        global: false, 
        success: function (data) {
15
Hasnat Safder

Utiliser les événements Ajax locaux étendus

                success: function (jQxhr, errorCode, errorThrown) {
                    alert("Error : " + errorThrown);
                },
                beforeSend: function () {
                    $("#loading-image").show();
                },
                complete: function () {
                    $("#loading-image").hide();
                }
9
Ramya Muthukumar

De plus, si vous souhaitez désactiver les appels à .ajaxStart() et .ajaxStop(), vous pouvez définir global option pour false dans vos requêtes .ajax();)

Voir plus ici: Comment appeler .ajaxStart () sur des appels ajax spécifiques

7
GxiGloN

Malheureusement, l'événement ajaxStart ne contient aucune information supplémentaire que vous pouvez utiliser pour décider d'afficher ou non une animation.

Quoi qu'il en soit, voici une idée. Dans votre méthode ajaxStart, pourquoi ne pas démarrer l'animation après environ 200 millisecondes? Si les requêtes ajax se terminent en 200 millisecondes, vous n'affichez aucune animation, sinon vous affichez l'animation. Le code peut ressembler à:

var animationController = function animationController()
{
    var timeout = null;
    var delayBy = 200; //Number of milliseconds to wait before ajax animation starts.

    var pub = {};

    var actualAnimationStart = function actualAnimationStart()
    {
        $('#ajaxProgress').show();
    };

    var actualAnimationStop = function actualAnimationStop()
    {
        $('#ajaxProgress').hide();
    };

    pub.startAnimation = function animationController$startAnimation() 
    { 
        timeout = setTimeout(actualAnimationStart, delayBy);
    };

    pub.stopAnimation = function animationController$stopAnimation()
    {
        //If ajax call finishes before the timeout occurs, we wouldn't have 
        //shown any animation.
        clearTimeout(timeout);
        actualAnimationStop();
    }

    return pub;
}();


$(document).ready(
    function()
    {
        $(document).ajaxStart(animationController.startAnimation);
        $(document).ajaxStop(animationController.stopAnimation);
    }
 );
4
SolutionYogi

utilisez beforeSend ou complétez les fonctions de rappel dans un appel ajax comme ceci ..... L'exemple en direct est ici https://stackoverflow.com/a/34940340/5361795

Source ShoutingCode

2
Zigri2612

J'ai une solution. J'ai défini une variable js globale appelée showloader (définie comme false par défaut). Dans l'une des fonctions que vous souhaitez afficher, le chargeur doit simplement être défini sur true avant d'effectuer l'appel ajax.

function doAjaxThing()
{
    showloader=true;
    $.ajax({yaddayadda});
}

Ensuite, j'ai ce qui suit dans ma section de tête;

$(document).ajaxStart(function()
{
    if (showloader)
    {
        $('.loadingholder').fadeIn(200);
    }
});    

$(document).ajaxComplete(function() 
{
    $('.loadingholder').fadeOut(200);
    showloader=false;
});
1
Ollie Brooke
<div class="Local">Trigger</div>

<div class="result"></div>
<div class="log"></div>

$(document).ajaxStart(function() {
$( "log" )text( "Trigger Fire successfully." );
});

$( ".local" ).click(function() {
$( ".result" ).load("c:/refresh.html.");
});

Parcourez cet exemple pour vous faire une idée. Lorsque l'utilisateur clique sur l'élément de classe Local et que la demande Ajax est envoyée, le message du journal s'affiche.

0
Praveen04

Utilisez ajaxSend et ajaxComplete si vous souhaitez croiser la demande avant de décider quoi faire. Voir ma réponse ici: https://stackoverflow.com/a/15763341/117268

0
Emil Stenström