Изменить указатель мыши при вызове 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";
}
}
Может кто-нибудь, пожалуйста, помогите, как изменить выше, чтобы решить проблему, так что это должно работать в Firefox и IE тоже.
9 ответов
Посмотрите на метод 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
});
Начиная с 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, который пытается изменить курсор на $(this).addClass('busy'); тогда, когда вы хотите изменить курсор назад просто позвоните $(this).removeClass('busy');
Простое и легкое решение, просто добавьте следующий код на каждую страницу, на которую вы хотите повлиять:
$(document).ajaxStart(function(){
$("body").addClass('ajaxLoading');
});
$(document).ajaxStop(function(){
$("body").removeClass('ajaxLoading');
});
И CSS:
.ajaxLoading {
cursor: progress !important;
}
Конечно, вы можете изменить это в соответствии с вашими потребностями, но для простого эффективного способа отображения курсора загрузки при каждом вызове ajax, это путь (или, по крайней мере, так, как я бы это сделал).
Ни один из ответов, представленных здесь на Stack Overflow, не сработает для меня. Я использую новейший и лучший FireFox для разработки, а другие используют IE, Chrome и т. Д. Каждый раз, когда я звонил в AJAX jQuery, ничего не происходило, и ТОЛЬКО когда возвращался вызов 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% или любую другую половину высоты экрана минус половина высоты изображения. Но, как я уже сказал, это просто для простой внутренней программы. Дело в том, что это работает во всех браузерах, не пытаясь перепрыгнуть через множество обручей, чтобы он появился. Я видел нечто подобное на других крупных сайтах. Очевидно, что другим надоело то, что браузеры не показывали курсор ожидания при необходимости и правду, чтобы сказать - я вспомнил, увидев это, и удивился, насколько сложно будет воспроизвести. Теперь я знаю - это совсем не сложно.
Повеселись!
В вашей основной функции добавьте следующее:
$('html, body').css("cursor", "wait");
затем объявите эту функцию (которая является результатом ajax):
function returnedValues () {
if (xmlhttp.readyState==4)
{
$('html, body').css("cursor", "auto");
}
}
И будет работать потрясающе:)
$('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);
}
});
Мне не нравится решение, которое просто добавляет свойство css к тегу body: оно не будет работать, если у вас уже есть курсор, назначенный вашему элементу.
Посмотрите мое решение здесь: /questions/47175626/kak-izmenit-kursor-na-ozhidanie-pri-ispolzovanii-jquery-load/47175688#47175688