0

Olá! Eu sei que parece boba a pergunta, mas não entendo o motivo de não estar funcionando.

Eu quero que ao enviar o formulário via ajax, enquanto a requisição é feita, o botão fique disabled e o nome(texto) do botão seja alterado para salvando..., sendo que, assim que a requisição for completada, o botão volte para o estado original.

Porem não está funcionado e não vi motivos para não funcionar.

* HTML *

<div class="modal fade" id="modal_operador" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div style="background-color: #337ab7" class="modal-header bg-primary no-border">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title"><i class="fa fa-flash"></i> Operador</h4>
            </div>
            <form id="frm_operador">
                <div class="modal-body">
                    <div class="row">
                        <div class="form-group col-md-12">
                            <label for="nome">Nome</label>
                            <input type="text" id="txt_nome" class="nome form-control input-sm" name="nome" autocomplete="off" placeholder="Nome">
                        </div>
                        <div class="form-group col-md-12">
                            <label for="cpf">CPF</label>
                            <input type="text" id="txt_cpf" class="cpf form-control input-sm" name="cpf" autocomplete="off" placeholder="000.000.000-00">
                        </div>
                        <div class="form-group col-md-12">
                            <label for="login">Login</label>
                            <input type="text" id="txt_login" class="login form-control input-sm" name="login" autocomplete="off" placeholder="login.usuario">
                        </div>
                        <div class="form-group col-md-12">
                            <label for="senha">Senha</label>
                            <input type="password" id="txt_senha" class="senha form-control input-sm" name="senha" autocomplete="off" placeholder="******">
                        </div>
                        <div class="form-group col-md-12">
                            <label for="confirma_senha">Confirma Senha</label>
                            <input type="password" id="txt_confirma_senha" class="confirma_senha form-control input-sm" name="confirma_senha" autocomplete="off" placeholder="******">
                        </div>
                        <div class="form-group col-md-12">
                            <label for="situacao">Situação</label>
                            <select id="sel_situacao" name="situacao" class="situacao form-control input-sm">
                                <option value="1">Ativo</option>
                                <option value="2">Inativo</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer clearfix">
                    <button type="button" id="btn_salvar" class="btn btn-primary btn-flat pull-left"><i class="fa fa-save"></i> Salvar</button>
                    <button type="button" id="btn_cancelar" class="btn btn-default btn-flat" data-dismiss="modal"><i class="fa fa-times"></i> Cancelar</button>
                </div>
            </form>
        </div>
    </div>
</div>

$('#btn_salvar').click(function () {
   form.validate();        
   if (form.valid()) {
      salvar();
   }
});

//Função Salvar
function salvar() {
    form_objeto();
    if (salvar_operador()) {        
	atualizar_tabela();
	$('#modal_operador').modal('hide');
	toastr.success('Operador salvo com sucesso');
     }
}

//Método Salvar
function salvar_operador() {
  var url;
  if (_metodo_salvar == 'novo') {
    url = "operador/novo";
  } else {
    url = "operador/atualizar";
  }

  $('#btn_salvar').html('<i class="fa fa-spinner fa-spin"></i> Salvando');
  $('#btn_salvar').attr('disabled', true);

  var ret;
  $.ajax({
    type: 'POST',
    async: false,
    datatype: 'json',
    url: url,
    data: {
      'objeto': JSON.stringify(_obj_operador)
    },
    success: (function(data) {
      _obj_operador = data;
      $('#btn_salvar').html('<i class="fa fa-save"></i> Salvar');
      $('#btn_salvar').attr('disabled', false);
      limpar_modal();
      ret = true;
    }),
    error: (function(erro) {
      //TrataErroAjax(erro);
      alert(erro);
      ret = false;
    })
  });
  return ret;
}

9
  • Dá algum erro? E porque usas JSON.stringify? o jQuery já faz isso.
    – Sergio
    Commented 20/09/2017 às 12:25
  • Não dá erro e eu uso JSON.stringify para para serializar o objeto para JSON. Commented 20/09/2017 às 12:27
  • O jQuery já faz JSON.stringify, basta passares data: _obj_operador. Dá algum erro na consola? podes ver o ajax na consola se está pendente ou resolve?
    – Sergio
    Commented 20/09/2017 às 12:30
  • @Sergio, inclusive vou ter que alterar o JSON.stringify pois vou ter que enviar arquivo pelo formulário e então usar o multipart/form-data e no ajax vou ter que fazer mais ou menos assim var formData = new FormData($('#form')[0]);. Aproveitando, sabe se é possivel serializar de forma que eu possa fazer upload de arquivos ? Commented 20/09/2017 às 12:33
  • O FormData aceita ficheiros também.
    – Sergio
    Commented 20/09/2017 às 12:34

2 Respostas 2

1

apenas como complemento, eu uso ajaxStart e ajaxStop para mostrar um gif de loading durante minha requisição, e quando a mesma termina, o gif sumir:

$(document).ajaxStart(function () {
        $('#loadingImage').show();
    }).ajaxStop(function () {
        $('#loadingImage').hide();
    });
0

Altere sua função colocando um beforeSend e complete no Ajax.

//Método Salvar
function salvar_operador() {
var url;
if (_metodo_salvar == 'novo') {
  url = "operador/novo";
} else {
  url = "operador/atualizar";
}

var ret;
$.ajax({
type: 'POST',
async: false,
datatype: 'json',
url: url,
data:  _obj_operador,
beforeSend:function() { 
    $('#btn_salvar').html('<i class="fa fa-spinner fa-spin"></i> Salvando');
    $('#btn_salvar').attr('disabled', true);
 },
success: (function(data) {
  _obj_operador = data;
  limpar_modal();
  ret = true;
}),
complete:function() {
    $('#btn_salvar').html('<i class="fa fa-save"></i> Salvar');
    $('#btn_salvar').attr('disabled', false);
 },
error: (function(erro) {
  //TrataErroAjax(erro);
  alert(erro);
  ret = false;
})
});
return ret;
}
7
  • Lucas, concordo que usar beforeSend e complete é boa ideia. Mas o código do AP tinha algum bug para não funcionar como está?
    – Sergio
    Commented 20/09/2017 às 12:35
  • @Lucas era pra funcionar desta forma e da forma que coloquei, porem não funciona nem de um jeito e nem com beforeSend. Commented 20/09/2017 às 12:47
  • @Sergio não tinha bug não, mas acho que seria o correto deixar o Ajax tratar já que está usando ele Commented 20/09/2017 às 12:57
  • @WagnerFilho Sim, era para funcionar das duas formas.. Apresenta algum erro no console? E chega a alterar o texto do botão pelo menos? Commented 20/09/2017 às 12:58
  • Não altera nada! Embora a requisição seja rapida, é notável a alteração do texto e o disabled. Não dá erro, a não ser, a mensagem de que foi salvo com sucesso, algo que estou usando na função salvar. Vou atualizar a pergunta para voce ver. Commented 20/09/2017 às 13:01

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .