/ / Comment créer une icône de curseur de chargement lorsque ajax est appelé - jquery, ajax

Comment créer une icône de curseur de chargement lorsque ajax est appelé - jquery, ajax

J'essaie d'avoir un curseur de chargement chaque fois qu'unLa demande ajax est appelée. Cependant, tout autre élément sur lequel le curseur se trouve arrêtera le curseur affichant une icône de chargement. L'ajout de! Important n'a pas semblé faire de différence non plus. Comment faire en sorte que le curseur se charge sur chaque élément survolé?

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

Réponses:

0 pour la réponse № 1

Pour répondre à votre question, je vous suggère de configurer des styles, avec le! Important, puis d'utiliser ces styles au lieu d'ajouter le css en ligne. Je n'ai pas testé cela, mais je crois que cela fonctionnera.

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

Ensuite, dans votre code, ajoutez et supprimez simplement ceci:

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

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

Cependant, je suggère une alternative qui seraitd'utiliser un plugin css qui affichera un indicateur de progression pour vous et empêchera l'utilisateur d'interagir en mettant un div au-dessus de tout. Vous pouvez ensuite inclure un joli indicateur de progression.


0 pour la réponse № 2

Vous devrez non seulement ajouter et supprimer unClasse "inProgress" sur la balise body, mais aussi sur chaque balise ayant un curseur prédéfini. Sur mon site, j'ai des curseurs de pointeur définis pour des balises et des boutons sur tout mon site. J'ajoute et je supprime donc également la classe inProgress sur tous ces éléments. Vous devrez peut-être également le faire pour les images si l'une d'entre elles a un style css déclarant quel curseur est affiché lorsque vous passez la souris dessus.