Modifier le pointeur de la souris lorsque ajax appel

Question

Je veux changer le pointeur de la souris sur le symbole « Wait » quand nous courons l'appel AJAX et revenir à pointeur par défaut après avoir terminé l'appel. J'ai essayé comme suit, mais mon problème est qu'il est en train de travailler jusqu'à ce que Firefox je ne clique / appuyez 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 vous plaît aider comment changer ci-dessus pour résoudre le problème soo qu'il shud travailler dans Firefox et IE aussi.

Answer 1

Jetez un oeil à la méthode get jQuery. Il est très simple à utiliser et poignées callback aussi bien, de sorte que vous aurez aucun problème à ajouter le code pour définir le dos du 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

});

Answer 2

de jQuery 1.9 , voici comment cela peut être fait:

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

}).ajaxComplete(function () {

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

});

CSS

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

Answer 3

Ce message 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 une classe plutôt basculer que de changer réellement le CSS dans le Javascript. On dirait une approche plus propre pour moi.

Pour appliquer cela à votre code spécifique, vous changeriez le Javascript qui tente de changer le curseur juste $(this).addClass('busy'); puis quand vous voulez changer le curseur juste appeler $(this).removeClass('busy');

Answer 4

Une solution simple et facile, il suffit d'ajouter le code suivant à chaque page que vous voulez être affecté:

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

Et le CSS:

.ajaxLoading {  
  cursor: progress !important;  
}  

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

Answer 5

Aucune des réponses fournies ici sur Stack Overflow travaillerait pour moi. J'utilise le dernier et le plus grand FireFox pour le développement et d'autres utilisent ici IE, Chrome, etc .... Chaque fois que je fait un appel au rien AJAX jQuery se passerait-il et seulement quand l'appel AJAX est revenu - serait le changement de curseur. Ensuite, il serait coincé dans le curseur d'attente. Ainsi, - l'appel est effectué, le serveur a renvoyé les nouvelles informations, les informations ont été affichées, puis WHAM! Attendez curseur affiche et ne va pas disparaître. J'ai essayé toutes les réponses données. Les choses .ajaxXXXX étaient appelés. (Je mets un ALERT ( « ICI »), dans les fonctions et les « ICI » est montré en tout le temps chaque appel très déprimant

...

Alors je suis allé « Ok - de nouvelles choses ne fonctionne pas Qu'en est-il d'aller vieille école.? » Je sais qu'il est maladroit de le faire - mais ce n'est pas un grand grand programme que je travaille. Il est juste un petit éditeur plusieurs personnes peuvent modifier notre base de données en même temps. Ne jamais aller voir la lumière de l'Internet. Seul l'intranet. :-) En tout cas, cela fonctionne et fonctionne formidablement. Vous devez fournir votre curseur d'attente. Je viens attrapé un hors 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>

Alors 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. Juste a un DIV avec une table en elle. Le tableau a seulement aux lignes. La première est 50% de la hauteur de l'écran. Le second centres simplement le curseur d'attente sur l'écran. Vous pouvez toujours faire la hauteur du premier 45% quelle que soit la moitié de la hauteur de l'écran est moins la moitié de la hauteur de l'image. Mais comme je l'ai dit - cela est juste pour un simple programme interne. La chose est - cela fonctionne sur tous les navigateurs sans essayer de sauter à travers beaucoup de cerceaux pour obtenir de se présenter. Je l'ai vu quelque chose de similaire sur d'autres sites majeurs. Alors, évidemment, d'autres ont obtenu marre sur les navigateurs ne montrant pas un curseur d'attente en cas de besoin et à vrai dire - je me suis souvenu avoir vu cela et je me demandais à quel point il serait difficile de reproduire. Maintenant, je sais - ce n'est pas difficile du tout

.

Amusez-vous!

Answer 6

Dans votre principale fonction ajouter ce qui suit:

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

déclare alors cette fonction (qui est le résultat Ajax):

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

Et fonctionne étonnamment:)

Answer 7

Je ne aime pas la solution qui ajoutent simplement la propriété css la balise body. Il ne va pas marcher si vous avez déjà un curseur attribué à votre élément

Jetez un oeil ici sur ma solution: https://stackoverflow.com/a/26183551/1895428

Answer 8

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

Utilisez ce code avant d'appeler AJAX

Alors:

  $('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);
                                   }
                                });      

Answer 9

$ css ( "curseur", "d'attente") ( 'html, body'). fonctionne parfaitement