Thay đổi con trỏ chuột khi ajax gọi

Question

Tôi muốn thay đổi con trỏ chuột thành biểu tượng "Đợi" khi chúng tôi chạy cuộc gọi AJAX và quay lại con trỏ mặc định sau khi hoàn thành cuộc gọi. Tôi đã thử như sau nhưng vấn đề của tôi là nó chỉ làm việc trên Firefox cho đến khi tôi không bấm/nhấn nút chuột. Đây là mã của tôi:

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

Bất kỳ ai cũng có thể giúp thay đổi cách giải quyết vấn đề ở Firefox và IE.

Answer 1

Hãy xem phương thức nhận jQuery. Nó rất đơn giản để sử dụng và xử lý gọi lại là tốt, vì vậy bạn sẽ không có vấn đề thêm mã để thiết lập con trỏ chuột trở lại ...

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

Ví dụ ...

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

This post here có giải pháp tuyệt vời cho vấn đề này.

Đây là giải pháp của mình:

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

Và sau đó trong CSS:

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

Tôi thích cách tiếp cận CSS và chuyển đổi qua lại một lớp chứ không phải thực sự thay đổi CSS trong Javascript. Có vẻ như một cách tiếp cận sạch hơn với tôi.

Để áp dụng điều này để mã của bạn đặc biệt, bạn sẽ thay đổi Javascript rằng đang cố gắng để thay đổi con trỏ chỉ $(this).addClass('busy'); sau đó khi bạn muốn thay đổi con trỏ trở lại chỉ cần gọi $(this).removeClass('busy');

Answer 3

Trong chức năng chính của bạn thêm dòng sau :

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

sau đó tuyên bố chức năng này (đó là kết quả ajax):

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

Và sẽ làm việc đáng kinh ngạc :)

Answer 4

Tính đến jQuery 1.9, đây là cách này có thể được thực hiện:

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

}).ajaxComplete(function() { 

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

}); 

CSS

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

Answer 5

Tôi không thích những giải pháp mà chỉ cần thêm thuộc tính css vào thẻ body: nó sẽ không hoạt động nếu bạn đã có con trỏ được gán cho phần tử của bạn.

Có một cái nhìn vào giải pháp của tôi ở đây: https://stackoverflow.com/a/26183551/1895428

Answer 6

Không ai trong số các câu trả lời được cung cấp ở đây trên Stack Overflow sẽ làm việc cho tôi. Tôi đang sử dụng FireFox mới nhất và lớn nhất để phát triển và những người khác ở đây sử dụng IE, Chrome, v.v .... Mỗi khi tôi thực hiện cuộc gọi đến AJAX của jQuery, sẽ không có gì xảy ra và CHỈ khi cuộc gọi AJAX quay lại - con trỏ sẽ thay đổi. Sau đó, nó sẽ bị mắc kẹt trong con trỏ chờ. Vì vậy - cuộc gọi được thực hiện, máy chủ trả lại thông tin mới, thông tin được hiển thị và sau đó là WHAM! Chờ con trỏ hiển thị và sẽ không biến mất. Tôi đã thử TẤT CẢ những câu trả lời được đưa ra.Các công cụ .ajaxXXXX đã được gọi. (Tôi đặt một ALERT ("ĐÂY"), vào các chức năng và những "ĐÂY" đã xuất hiện tất cả các thời gian. Mỗi cuộc gọi duy nhất. Rất buồn.

Vì vậy, tôi đã "Ok - công cụ mới không Điều gì về việc đi học cũ? ”Tôi biết nó rất khó để làm như vậy - nhưng đây không phải là một chương trình lớn tuyệt vời mà tôi đang làm. Nó chỉ là một trình soạn thảo nhỏ để nhiều người có thể chỉnh sửa cơ sở dữ liệu của chúng tôi cùng một lúc. Không bao giờ đi để xem ánh sáng của internet Chỉ có mạng nội bộ. :-) Dù sao, điều này hoạt động và hoạt động tuyệt vời. Bạn cần cung cấp con trỏ đợi của riêng bạn. Tôi chỉ lấy một trong số Google Images để sử dụng.

Đệ Nhất - 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> 

Sau đó, 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%' 
    }); 

và

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

Cũ học nhưng đơn giản cũng có. Chỉ có một DIV với một bảng trong đó. Bảng chỉ có các hàng. Đầu tiên là 50% chiều cao của toàn bộ màn hình. Thứ hai chỉ đơn giản là trung tâm con trỏ chờ đợi trên màn hình. Bạn luôn có thể làm cho chiều cao của người đầu tiên 45% hoặc bất cứ điều gì nửa chiều cao của màn hình là trừ đi một nửa chiều cao của hình ảnh. Nhưng như tôi đã nói - đây chỉ là một chương trình nội bộ đơn giản. Vấn đề là - điều này hoạt động trên tất cả các trình duyệt mà không cố gắng nhảy qua rất nhiều vòng để làm cho nó hiển thị. Tôi đã nhìn thấy một cái gì đó tương tự trên các trang web lớn khác. Vì vậy, rõ ràng những người khác đã nhận được fed-up trên các trình duyệt không hiển thị một con trỏ chờ đợi khi cần thiết và sự thật để nói - Tôi nhớ nhìn thấy điều này và tự hỏi khó khăn như thế nào nó sẽ được nhân rộng. Bây giờ tôi biết - không khó chút nào.

Hãy vui vẻ!

Answer 7

giải pháp đơn giản và dễ dàng, chỉ cần thêm đoạn mã sau vào mỗi trang bạn muốn bị ảnh hưởng:

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

Và CSS:

.ajaxLoading { 
    cursor: progress !important; 
} 

Tất nhiên, bạn có thể thay đổi điều này theo nhu cầu của bạn, nhưng đối với một cách hiệu quả đơn giản để hiển thị một con trỏ tải trên mỗi cuộc gọi ajax, đây là cách để đi (Hoặc ít nhất, cách tôi sẽ làm điều đó).

Answer 8

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

Sử dụng mã này trước khi gọi AJAX

Sau đó:

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

Trong chức năng thành công

Ví dụ:

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