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

Я хочу изменить указатель мыши на символ "Подождите", когда мы запустим вызов AJAX и вернемся к указателю по умолчанию после завершения вызова. Я пробовал следующим образом, но моя проблема заключается в том, что он просто работает над Firefox, пока я не нажму/не нажму кнопку мыши. Вот мой код:

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";
    }
}

Может кто-нибудь, пожалуйста, помогите, как изменить выше, чтобы решить проблему soo, чтобы она работала в Firefox и IE тоже.

Ответ 1

Посмотрите на метод get jQuery. Он очень прост в использовании и обрабатывает обратный вызов, так что у вас не будет проблем с добавлением кода для установки указателя мыши...

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

Пример...

$('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

});

Ответ 2

Как jQuery 1.9, вот как это можно сделать:

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

}).ajaxComplete(function () {

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

});

CSS

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

Ответ 3

Это сообщение здесь имеет отличное решение проблемы.

Здесь его решение:

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, который пытается изменить курсор только на $(this).addClass('busy');, а затем, когда вы хотите изменить курсор обратно, просто вызовите $(this).removeClass('busy');

Ответ 4

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

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

И CSS:

.ajaxLoading {  
  cursor: progress !important;  
}

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

Ответ 5

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

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

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

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

И будет работать потрясающе:)

Ответ 6

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

Посмотрите мое решение здесь: fooobar.com/questions/90853/...

Ответ 7

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

Итак, я пошел "Хорошо - новые вещи не работают. А как насчет старой школы?" Я знаю, что это неудобно - но это не какая-то большая программа, над которой я работаю. Это просто маленький редактор, поэтому несколько человек могут редактировать нашу базу данных одновременно. Никогда не увидишь свет в Интернете. Только интрасеть.:-) Так или иначе, это работает и работает ужасно. Вам нужно предоставить свой собственный указатель ожидания. Я просто взял один из изображений 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% или любую половину высоты экрана минус половина высоты изображения. Но, как я уже сказал, это просто для простой внутренней программы. Дело в том, что это работает во всех браузерах, не пытаясь перепрыгнуть через множество обручей, чтобы они появились. Я видел нечто подобное на других крупных сайтах. Таким образом, очевидно, что другие стали кормить из-за браузеров, не отображая курсор ожидания, когда это необходимо, и правду рассказать - я вспомнил это и подумал, насколько трудно было бы тиражировать. Теперь я знаю - это совсем не сложно.

Удачи!

Ответ 8

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

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

Тогда:

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

В функции успеха

Пример:

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