/ / So erstellen Sie ein Ladecursorsymbol, wenn Ajax aufgerufen wird - jquery, ajax

So erstellen Sie ein Ladecursor-Symbol, wenn Ajax aufgerufen wird - jquery, ajax

Ich versuche, einen Ladecursor zu haben, wann immer einAjax-Anfrage wird aufgerufen. Jedes andere Element, über dem sich der Cursor befindet, stoppt den Cursor mit einem Ladesymbol. Das Hinzufügen von! Important schien auch keinen Unterschied zu machen. Wie lässt sich der Cursor über jedes schwebende Element laden?

// cursor loading function
function start_request() {
$("body").css("cursor", "progress");
}

function end_request() {
$("body").css("cursor", "auto");
}


$(".new_filter_button").click(function(){ // when a feature button is selected
var serialize = $("#new_header_filters").serialize(); // takes all the values of the filter
$.ajax({
beforeSend: start_request(),
type : "POST",
url  : "http://localhost/carprice/ajax/new-filters.php",
data : serialize,
dataType : "json",
success : function(data) {
$("#new_results_toolbar").html(data.toolbar);
$("#new_results").html(data.models);
retain_css();
end_request();
}
});
});

Antworten:

0 für die Antwort № 1

Um Ihre Frage zu beantworten, schlage ich vor, dass Sie Stile mit dem! Wichtigen einrichten und diese Stile dann verwenden, anstatt das CSS inline hinzuzufügen. Ich habe dies nicht getestet, glaube aber, dass es funktionieren wird.

<style>
.inProgress {
cursor:progress!important;
}
</style>

Dann fügen Sie in Ihrem Code einfach Folgendes hinzu und entfernen es:

function start_request() {
$("body").addClass("inProgress");
}

function end_request() {
$("body").removeClass("inProgress");
}

Ich schlage jedoch eine Alternative vor, die wäreum ein CSS-Plugin zu verwenden, das eine Fortschrittsanzeige für Sie anzeigt und die Interaktion des Benutzers verhindert, indem Sie ein Div über alles setzen. Sie können dann eine hübsche Fortschrittsanzeige einfügen.


0 für die Antwort № 2

Sie müssen nicht nur a hinzufügen und entfernenKlasse "inProgress" für das Body-Tag, aber auch für jedes Tag, für das ein Cursor vordefiniert ist. Auf meiner Site sind Zeigercursor für Tags und Schaltflächen auf meiner Site festgelegt. Daher füge ich auch die inProgress-Klasse für all diese Elemente hinzu und entferne sie. Möglicherweise müssen Sie dies auch für Bilder tun, wenn eines davon einen CSS-Stil hat, der angibt, welcher Cursor angezeigt wird, wenn Sie den Mauszeiger darüber halten.