Изменение указателя мыши при вызове ajax

по состоянию на jQuery 1.9, вот как это можно сделать:

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

}).ajaxComplete(function () {

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

});

в CSS

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

этот пост здесь есть отличное решение для этой проблемы.

вот его решение:

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

а затем в CSS:

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

мне нравится подход CSS и переключение класса, а не фактическое изменение CSS в Javascript. По-моему, это более чистый подход.

чтобы применить это к вашему коду конкретно, вы бы изменили Javascript, который пытается изменить курсор на just $(this).addClass('busy'); затем, когда вы хотите измените курсор назад, просто вызовите $(this).removeClass('busy');

простое и простое решение, просто добавьте следующий код на каждую страницу, которую вы хотите затронуть:

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

и CSS:

.ajaxLoading {  
  cursor: progress !important;  
}  

конечно, вы можете изменить это в соответствии с вашими потребностями, но для простого эффективного способа отображения курсора загрузки при каждом вызове ajax это путь (или, по крайней мере, способ, которым я бы это сделал).

в вашей основной функции добавьте следующее:

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

затем объявите эту функцию (которая является результатом ajax):

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

и будет работать удивительно:)

Мне не нравится решение, которое просто добавляет свойство css в тег body: оно не будет работать, если у вас уже есть курсор, назначенный вашему элементу.

посмотрите на мое решение здесь: https://stackoverflow.com/a/26183551/1895428

ни один из ответов здесь, на переполнение стека, будет работать для меня. Я использую последний и самый большой FireFox для разработки, а другие здесь используют IE, Chrome и т. д.... Каждый раз, когда я делал вызов AJAX jQuery, ничего не происходило, и только когда вызов AJAX возвращался - курсор менялся. Тогда он застрянет в курсоре ожидания. Итак-звонок сделан, сервер вернул новую информацию, информация была отображена и тут бац! Подождите, курсор отображается и не будет идти прочь. Я перепробовал все ответы. Этот.назывались вещи ajaxXXXX. (Я поставил предупреждение ("здесь"); в функции и те"здесь" появлялись все время. Каждый звонок. Очень угнетающе.

поэтому я сказал: "Ок-новый материал не работает. Как насчет старой школы?- Я знаю, что это неуклюже, но это не какая - то большая программа, над которой я работаю. Это всего лишь небольшой редактор, чтобы несколько человек могли редактировать нашу базу данных одновременно. Никогда не увижу свет. интернета. Только интранет. :- ) Во всяком случае, это работает и работает потрясающе. Вам нужно предоставить свой собственный курсор ожидания. Я просто взял один из изображений Google для использования.

сначала-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>

затем 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%'
    });

и

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

старая школа, но простой тоже. Просто есть DIV со столом в нем. Таблица имеет только строки. Первый - 50% высоты всего экрана. Второй просто центрирует подождите курсор на экране. Вы всегда можете сделать высоту первого 45% или любую другую половину высоты экрана минус половина высоты изображения. Но как я сказал - это просто для простой программы. Дело в том, что это работает во всех браузерах, не пытаясь прыгать через много обручей, чтобы заставить его появиться. Я видел нечто подобное на других крупных сайтах. Так что, очевидно, другие устали от браузеров, не показывая курсор ожидания, когда это необходимо, и правда Телль-я вспомнил, что видел это, и задался вопросом,насколько трудно будет воспроизвести. Теперь я знаю - это совсем не трудно.

удачи!

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

используйте этот код перед вызовом AJAX

затем:

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

в функции success

пример:

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

$('html, body').css ("курсор", " подождите"); работает отлично