it-swarm.com.de

Ändern Sie den Mauszeiger bei einem Ajax-Aufruf

Ich möchte den Mauszeiger in das "Wait" -Symbol ändern, wenn wir den Aufruf AJAX ausführen und nach Beendigung des Aufrufs zum Standardzeiger zurückkehren. Ich habe es wie folgt versucht, aber mein Problem ist, dass es nur mit Firefox funktioniert, bis ich die Maustaste nicht drücke/drücke. Hier ist mein Code:

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

Könnte jemand bitte helfen, wie man oben ändert, um das Problem so zu lösen, dass es in Firefox und IE funktionieren sollte.

21
Somi Meer

Schauen Sie sich die jQuery-Methode get an. Es ist sehr einfach zu bedienen und behandelt auch den Rückruf, sodass Sie problemlos den Code hinzufügen können, um den Mauszeiger zurückzusetzen.

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

Beispiel...

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

});
11
Archer

Ab jQuery 1.9 können Sie dies folgendermaßen tun:

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

}).ajaxComplete(function () {

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

});

CSS

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

Dieser Beitrag hier hat eine großartige Lösung für das Problem. 

Hier ist seine Lösung: 

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

Und dann im CSS:

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

Ich mag den CSS-Ansatz und das Umschalten einer Klasse, anstatt das CSS in Javascript tatsächlich zu ändern. Scheint mir eine sauberere Herangehensweise zu sein.

Um dies speziell auf Ihren Code anzuwenden, ändern Sie das Javascript, das versucht, den Cursor in $(this).addClass('busy'); zu ändern. Wenn Sie den Cursor zurück ändern möchten, rufen Sie $(this).removeClass('busy'); auf.

6
Joel

Einfache und einfache Lösung, fügen Sie einfach den folgenden Code zu jeder Seite hinzu, die betroffen sein soll:

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

Und das CSS:

.ajaxLoading {  
  cursor: progress !important;  
}  

Natürlich können Sie dies je nach Ihren Bedürfnissen ändern. Um jedoch auf einfache Weise einen Ladecursor bei jedem Ajax-Aufruf anzuzeigen, müssen Sie dies tun (oder zumindest so, wie ich es tun würde).

2
Joe

Ich mag die Lösung nicht, die einfach die css -Eigenschaft zum body-Tag hinzufügt: Sie wird nicht funktionieren, wenn Ihrem Element bereits ein Cursor zugewiesen ist.

Sehen Sie sich meine Lösung hier an: https://stackoverflow.com/a/26183551/1895428

0
pmrotule

Keine der Antworten auf Stack Overflow würde für mich funktionieren. Ich verwende den neuesten und besten FireFox für die Entwicklung, und andere hier verwenden IE, Chrome usw. .... Jedes Mal, wenn ich bei AJAXvon jQuery anrief, würde nichts passieren und NUR wenn AJAX Anruf kam zurück - würde sich der Cursor ändern. Dann würde es im Wartecursor stecken. Also - der Anruf wird getätigt, der Server hat die neuen Informationen zurückgegeben, die Informationen wurden angezeigt und dann WHAM! Warten Sie, bis der Cursor angezeigt wird und verschwindet nicht. Ich habe ALLE Antworten ausprobiert. Das .ajaxXXXX-Zeug wurde gerufen. (Ich gebe eine Warnung ("HIER"); in den Funktionen und diesen "HIER" sind die ganze Zeit aufgetaucht. Jeder einzelne Anruf. Sehr deprimierend.

Also ging ich "Ok - neues Zeug geht nicht. Was ist mit der alten Schule?" Ich weiß, dass es schwerfällig ist, aber das ist kein großartiges Programm, an dem ich gerade arbeite. Es ist nur ein kleiner Editor, sodass mehrere Personen gleichzeitig unsere Datenbank bearbeiten können. Nie das Licht des Internets sehen. Nur das Intranet. :-) Egal, das funktioniert und funktioniert hervorragend. Sie müssen Ihren eigenen Wartezeiger angeben. Ich habe mir gerade eines von Google Images ausgesucht, um es zu verwenden.

Erstens - das 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>

Dann die 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%'
    });

und

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

Alte Schule, aber auch einfach. Nur hat ein DIV mit einem Tisch darin. Die Tabelle hat nur Zeilen. Der erste ist 50% der Höhe des gesamten Bildschirms. Die zweite zentriert einfach den Wartecursor auf dem Bildschirm. Sie können immer die Höhe des ersten auf 45% setzen, oder die Hälfte des Bildschirms ist minus die Hälfte des Bildes. Aber wie gesagt - dies ist nur für ein einfaches Inhouse-Programm. Die Sache ist - das funktioniert auf allen Browsern, ohne zu versuchen, durch viele Reifen zu springen, damit es angezeigt wird. Ich habe auf anderen großen Websites etwas Ähnliches gesehen. Offensichtlich sind andere über die Browser satt geworden, ohne dass ein Warten-Cursor angezeigt wird, wenn sie benötigt werden, und um die Wahrheit zu sagen - ich erinnerte mich, wie ich das gesehen hatte, und fragte mich, wie schwer es sein würde, sich zu replizieren. Jetzt weiß ich - es ist überhaupt nicht schwer.

Habe Spaß!

0
Mark Manning

Fügen Sie in Ihrer Hauptfunktion Folgendes hinzu:

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

dann deklarieren Sie diese Funktion (was das Ajax-Ergebnis ist):

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

Und wird erstaunlich gut funktionieren :)

0
GingerHead

$ ('html, body'). css ("Cursor", "wait"); funktioniert einwandfrei

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

Verwenden Sie diesen Code, bevor Sie AJAX aufrufen

Dann:

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

In der Erfolgsfunktion 

Beispiel:

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