Change button text in AJAX request

Question

Change button text in AJAX request

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

Hello! I know the question seems silly, but I do not understand the reason it's not working.

I want to send the form via ajax while the request is made, the button is disabled and the name (text) of the button is changed to salvando... , and once the request is completed, the button returns to the original state.

But it is not working, and I saw no reason not to work.

* 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;
}

jquery ajax

asked by anonymous 20.09.2017 / 14:22

2 answers

Condition not to send field in ajax How can I copy an android studio machine to another machine, without having to install android studio?

score 1 · Answer 1

Just as a complement, I use ajaxStart and ajaxStop to show a loading gif during my request, and when it ends, the gif disappears:

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

score 0 · Answer 2

Change your function by putting a beforeSend and complete in 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;
}