Изменить указатель мыши, когда Ajax вызовет

Question

Я хочу изменить указатель мыши на символ «подожди», когда мы запускаем вызов 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";
    }
}

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

Answer 1

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

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

});

Answer 2

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

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

}).ajaxComplete(function () {

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

});

CSS

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

Answer 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');

Answer 4

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

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

И CSS:

.ajaxLoading {  
  cursor: progress !important;  
}  

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

Answer 5

Ни один из ответов, предоставленных здесь на переполнении стека, не будет работать для меня. Я использую последнюю и лучшую Firefox для разработки, а другие здесь используют IE, Chrome и т. Д. ... Каждый раз, когда я звонил в Ajax от JQUERY, и только когда вызов Ajax вернулся - изменится курсор. Тогда это застряло бы в курсоре ожидания. Итак - вызов сделан, сервер вернул новую информацию, была отображена информация, а затем Wham! Подождите, курсор, и не уйдет. Я попробовал все ответы. Был вызван .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% или каким -то образом половины высоты экрана, минус половина высоты изображения. Но, как я уже сказал, это просто для простой внутренней программы. Дело в том, что это работает на всех браузерах, не пытаясь прыгать через много обручей, чтобы заставить его появиться. Я видел нечто подобное на других крупных сайтах. Так что, очевидно, другие сыграли на горло от браузеров, которые не показывают курсор ожидания, когда это необходимо, и правда, чтобы сказать - я вспомнил, что видел это и подумал, насколько сложно было бы воспроизвести. Теперь я знаю - это совсем не сложно.

Веселиться!

Answer 6

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

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

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

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

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

Answer 7

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

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

Answer 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);
                                   }
                                });      

Answer 9

$ ('html, body'). css ("cursor", "ждать"); работает отлично