jQuery: событие ajax

Question

ОК, вот мой код

$("#content_Div").ajaxStart(function () {
    $(this).css('cursor', 'wait')
}).ajaxComplete(function () {
    $(this).css('cursor', 'default')
});

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

lol dat была моей проблемой, но когда я писал это, я понял, что после ajaxComplete, если вы нажмете, он вернется к значению по умолчанию, поэтому единственная причина, по которой курсор изменяется немедленно на ajaxStart, заключается в том, что вы должны дважды щелкнутьЭлемент в content_Div, чтобы запустить запрос, чтобы событие click вызывало изменение курсора после начала события ajaxStart.так что я хочу, чтобы способ перейти к курсору без необходимости перемещать его или щелкнуть снова.

очевидно, я хочу использовать курсор, чтобы сообщить пользователю, когда запрос будет выполнен.

заранее спасибо

за Томаса:

function DF() { //Deletes selected File
if (selectedfiles.length == 0) {
    alert("No file slected!");
    return
};
var selectedtxt = (selectedfiles.length == 1) ? "'" + basename(selectedfiles[0]) + "'?" : 'these ' + selectedfiles.length + ' files?';
if (confirm("Are you sure you want to delete " + selectedtxt)) {
    $.each(selectedfiles, function () {
        $.post("server/editfile.php", {
            user: user,
            oper: "del",
            path: "../" + this
        }, function (res) {
            if (res) {
                alert(res);
            }
            else LT(dirHistory[current]);
        });
    })
}

}

Answer 1

Похоже, что пользователю придется передвигать курсор, прежде чем он изменится, но в дополнение к этому есть еще одна проблема.Если пользователь перемещает курсор от #content_Div, он не может видеть, загружаются ли данные или нет, поскольку CSS применяется только при наведении курсора на этот конкретный DIV.

Метод, который четко показывает, чтоДанные, которые выбираются независимо от того, что пользователь делает, должны использовать анимированный GIF, надпись «Загрузка ...» или и то, и другое.Это решение также немного менее навязчиво, чем изменение курсора пользователя.

Если при запросе данных вы добавляете загрузочное изображение в div, где будут отображаться данные, то это загрузочное изображение естественным образом исчезнет один раз.данные загружены.Например:

$("#content_Div").ajaxStart(function () {
    $("#content_Div").append('<img src="loading.gif" />');
});

В этом случае ajaxStop не требуется, поскольку загруженные данные заменяют изображение.

Вот пример jsFiddle, который используети изображение, и надпись.

jsFiddle с несколькими кнопками и загрузочным делителем в центре страницы.

Answer 2

Я бы предпочел сделать это более элегантно, вот так:

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

CSS:

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

Источник: http://postpostmodern.com/instructional/global-ajax-cursor-change/

Answer 3

ОК. Прошло около 5 часов с тех пор, как я отправил этот вопрос, и никто даже не попытался ответить на него.Так что я просто опубликую то, что нашел.

Это Google Chrome и Safari Bug. хром

Во всех других браузерах вы можете динамически менять курсор мыши без необходимости нажимать или перемещать мышь.

Ведьма победила то, что я пыталсяделать.Сообщите пользователю, когда запрос был выполнен, если пользователь убирает руку с мыши и ждет, пока курсор не изменится, он будет ждать весь день и ночь, или пока он не попытается уйти, потому что сообщил, что моя веб-страница заморожена.нет исправления, потому что если вы проверите ссылку выше, ошибка все еще не подтверждена.я не нашел никакой работы вокруг, так что это то, что я сделал

$("#content_Div").ajaxStart(function () {
    if(!$.browser.safari)//ignores ajaxStart if browser is safari or chrome
    $(this).css('cursor', 'wait')
}).ajaxComplete(function () {
    $(this).css('cursor', 'default')
});