web-dev-qa-db-fra.com

Changer le pointeur de la souris lors d'un appel ajax

Je souhaite remplacer le pointeur de la souris par le symbole "Attendre" lorsque nous exécutons l'appel AJAX et que nous revenons au pointeur par défaut une fois l'appel terminé. J'ai essayé ce qui suit, mais mon problème est que cela fonctionne uniquement sur Firefox jusqu'à ce que je ne clique pas/n'appuie pas sur le bouton de la souris. Voici mon code:

function initializeAjax(url){
    $('html, body').css("cursor", "wait");

    try {
        if (url.substring(0,4) == ".mdf") {
            var database = window.location.pathname.slice(0,window.location.pathname.lastIndexOf('.mdf'));
            var url = database + url;
        }

        initRequest(url);
        returnedValues = null;
        req.onreadystatechange = returnedValues;
        nocache = Math.random();
        req.open("GET", url+"&nocache = "+nocache, false);
        req.send(null);

        $('html, body').css("cursor", "auto");
        return req.responseText;
    }
    catch(err) {
        return "Error 8";
    }
}

Quelqu'un pourrait-il s'il vous plaît aider comment changer ci-dessus pour résoudre le problème soo qu'il devrait fonctionner dans Firefox et IE aussi.

javascriptjqueryajaxmousemouse-pointer
21
Somi Meer

Regardez la méthode get jQuery. Il est très simple à utiliser et gère également les rappels, vous n'aurez donc aucun problème à ajouter le code pour redéfinir le curseur de la souris ...

http://api.jquery.com/jQuery.get/

Exemple...

$('html, body').css("cursor", "wait");
$.get("yourajaxcall.url", function(data) {
    $('html, body').css("cursor", "auto");

    //  Success - do something with "data" here

}).error(function() {
    $('html, body').css("cursor", "auto");

    //  There was an error - do something else

});
11
Archer

À partir de jQuery 1.9 , voici comment procéder:

$(document).ajaxStart(function ()
{
    $('body').addClass('wait');

}).ajaxComplete(function () {

    $('body').removeClass('wait');

});

CSS

body.wait *, body.wait
{
    cursor: progress !important;
}
36
Leniel Maccaferri

Ce post ici a une excellente solution pour le problème. 

Voici sa solution: 

function globalAjaxCursorChange() 
{
  $("html").bind("ajaxStart", function(){
     $(this).addClass('busy');
  }).bind("ajaxStop", function(){
     $(this).removeClass('busy');
  });
}

Et puis dans le CSS:

html.busy, html.busy * {  
  cursor: wait !important;  
}

J'aime l’approche CSS et le changement de classe plutôt que de changer le CSS en Javascript. On dirait une approche plus propre pour moi.

Pour appliquer cela à votre code de manière spécifique, vous devez modifier le code Javascript qui tente de modifier le curseur en $(this).addClass('busy');, puis lorsque vous souhaitez modifier le curseur, appelez simplement $(this).removeClass('busy');

6
Joel

Solution simple et facile, ajoutez simplement le code suivant à chaque page que vous souhaitez affecter:

$(document).ajaxStart(function(){ 
    $("body").addClass('ajaxLoading');
});
$(document).ajaxStop(function(){ 
    $("body").removeClass('ajaxLoading');
});

Et le CSS:

.ajaxLoading {  
  cursor: progress !important;  
}

Bien sûr, vous pouvez modifier cela en fonction de vos besoins, mais pour un moyen simple et efficace d’afficher un curseur de chargement sur chaque appel ajax, c’est la voie à suivre (ou du moins, comme je le ferais).

2
Joe

Je n'aime pas la solution qui ajoute simplement la propriété css à la balise body: ça ne marchera pas si un curseur est déjà assigné à votre élément.

Regardez ma solution ici: https://stackoverflow.com/a/26183551/1895428

0
pmrotule

Aucune des réponses fournies ici sur Stack Overflow ne fonctionnerait pour moi. J'utilise le dernier et le meilleur FireFox pour le développement et d'autres ici, comme IE, Chrome, etc. Chaque fois que j'ai fait appel à AJAX de jQuery, rien ne se produirait et UNIQUEMENT lorsque l'appel de AJAX est revenu - le curseur serait-il changé? Ensuite, il serait bloqué dans le curseur d'attente. Donc, l'appel est passé, le serveur a renvoyé les nouvelles informations, les informations ont été affichées, puis WHAM! Attendez que le curseur s'affiche et ne disparaisse pas. J'ai essayé TOUTES les réponses données. Les affaires .ajaxXXXX étaient appelées. (Je mets une ALERTE ("ICI"); dans les fonctions et ces "ICI" sont affichés tout le temps. Chaque appel unique. Très déprimant.

Alors je suis allé "Ok - les nouvelles choses ne fonctionnent pas. Pourquoi ne pas aller à la vieille école?" Je sais que c'est maladroit de le faire - mais je ne travaille pas sur un très gros programme. C'est juste un petit éditeur pour que plusieurs personnes puissent éditer notre base de données en même temps. Ne jamais aller voir la lumière de l'internet. Seul l'intranet. :-) Quoi qu'il en soit, cela fonctionne et fonctionne de façon terrifiante. Vous devez fournir votre propre curseur d'attente. Je viens de récupérer une image de Google Images à utiliser.

Tout d'abord - le HTML:

<div id='wait' name='wait'
style='position:absolute;top:-9999px;left:-9999px;background-color:rgba(0,0,0,0.3);'>
<table border='0' cellspacing='0' cellpadding='0' style='width:100%;height:100%;'><tbody>
<tr><td style='width:100%;height:50%;'> </td></tr>
<tr><td align='center'><img id='cursor' name='cursor' src="images/wait.gif"></td></tr>
</tbody></table>
</div>

Puis le jQuery:

function waitCursor()
{
    $('#wait').css({
        'top' : '0px',
        'left' : '0px',
        'width' : '100%',
        'height' : '100%'
        });
}

function defCursor()
{
    $('#wait').css({
    'top': '-9999px',
    'left' : '-9999px',
    'width' : '0%',
    'height' : '0%'
    });

et

$(document).ajaxStart(function(){ waitCursor(); })
    .ajaxComplete(function(){ defCursor(); })
    .ajaxStop(function(){ defCursor(); });

Old school mais simple aussi. Il y a juste une DIV avec une table. La table n'a que des lignes. Le premier représente 50% de la hauteur de tout l’écran. Le second centre simplement le curseur d'attente sur l'écran. Vous pouvez toujours faire la hauteur du premier 45% ou quelle que soit la moitié de la hauteur de l'écran soit moins de la moitié de la hauteur de l'image. Mais comme je l’ai dit, il ne s’agit que d’un simple programme interne. Le problème, c’est - cela fonctionne sur tous les navigateurs sans essayer de sauter dans un grand nombre d’obstacles pour le faire apparaître. J'ai vu quelque chose de similaire sur d'autres sites majeurs. Il est donc évident que d’autres en ont marre que les navigateurs ne montrent pas le curseur d’attente au moment voulu ni la vérité à dire - je me suis souvenu de cela et je me suis demandé à quel point il serait difficile de reproduire. Maintenant je sais - ce n'est pas difficile du tout.

S'amuser!

0
Mark Manning

Dans votre fonction principale, ajoutez ce qui suit:

$('html, body').css("cursor", "wait");

puis déclarer cette fonction (qui est le résultat ajax):

function returnedValues () {    
  if (xmlhttp.readyState==4) 
  {      
     $('html, body').css("cursor", "auto");   
  }  
}

Et fonctionnera à merveille :)

0
GingerHead

$ ('html, body'). css ("curseur", "attendre"); fonctionne parfaitement

0
tani
  $('html, body').css("cursor", "wait");

Utilisez ce code avant d'appeler AJAX

Ensuite:

  $('html, body').css("cursor", "default");

Dans la fonction de réussite 

Exemple:

  $('html, body').css("cursor", "wait"); 
               $.ajax({
                       url://your url  ,
                       type: //your type post or get 
                       dataType: "html",
                       data: //data send by ajax
                       success: function(returnData){
                       $('html, body').css("cursor", "default");
                                   //any other actions ....
                                   },
                                   error: function(e){
                                     alert(e);
                                   }
                                });
0
Yaser Saffo