/ / Como criar um ícone de cursor de carregamento quando o ajax é chamado - jquery, ajax

Como criar um ícone de cursor de carregamento quando o ajax é chamado - jquery, ajax

Estou tentando ter um cursor de carregamento sempre que umsolicitação ajax é chamada. No entanto, qualquer outro elemento sobre o qual o cursor está parado irá parar o cursor mostrando um ícone de carregamento. Adicionar! Important também não pareceu fazer diferença. Como você faz o cursor carregar sobre cada elemento pairado?

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

Respostas:

0 para resposta № 1

Para responder sua pergunta, sugiro que você configure estilos, com o! Important, e use esses estilos em vez de adicionar o CSS embutido. Eu não testei isso, mas acredito que funcionará.

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

Em seguida, no seu código, basta adicionar e remover isso:

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

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

No entanto, sugiro uma alternativa que seriapara usar um plug-in css que mostrará um indicador de progresso para você e evitará que o usuário interaja colocando uma div em cima de tudo. Você pode incluir um bom indicador de progresso.


0 para resposta № 2

Você precisará não apenas adicionar e remover umclasse "inProgress" na tag body, mas também em todas as tags com um cursor predefinido. No meu site, tenho cursores de ponteiro definidos para tags e botões em todo o site. Portanto, também estou adicionando e removendo a classe inProgress em todos esses elementos. Talvez seja necessário fazer isso também para imagens, se alguma delas tiver um estilo css, declarando qual cursor é mostrado quando você passa o mouse sobre elas.