Tenho o seguinte jQuery
script:
$.ajax({
url: "_scripts/_php/_validacoes/cadastrarCelulaMembro.php",
type: "POST",
dataType: "json",
data: {
idPastor : $("#idPastor").val(),
idRede : $("#idRede").val(),
idRegiao : $("#idRegiao").val(),
idArea : $("#idArea").val(),
idSetor : $("#idSetor").val(),
idCelula : $("#idCelula").val(),
idMembro : $("#idMembro").val()
},
beforeSend: function() {
$("#buttonCadastrarCelulaMembro").attr('display','none');
$("#imgCarregando").attr('display','block');
},
success: function (result) {
$("#buttonCadastrarCelulaMembro").attr('display','block');
$("#imgCarregando").attr('display','none');
if (result[0] == "Erro")
$(".resposta").html(result[1]);
else
$(".resposta").html(result[1]);
}
});
}
A ideia é ao entrar no $.ajax
e antes de enviar o form, dar um display: none
no button e um display: block
em uma imagem de loader
beforeSend: function() {
$("#buttonCadastrarCelulaMembro").attr('display','none');
$("#imgCarregando").attr('display','block');
},
E, depois de receber o retorno do PHP, fazer o processo inverso.
success: function (result) {
$("#buttonCadastrarCelulaMembro").attr('display','block');
$("#imgCarregando").attr('display','none');
...
Mas não está ocorrendo isso.
Onde estou errando?
Eis o final do formulário:
...
<button id="buttonCadastrarCelulaMembro" class="button">Cadastrar Membro na Célula</button>
<img id="imgCarregando" style="display: none" src="_imgs/carregando.gif" />
<br />
<div class="resposta"></div>
</div>
<div class="dadosMembro"></div>
Classe buuton CSS
.button {
width: 250px;
height: 30px;
margin: 3px;
}