Before refreshing the page show a message to the user

Question

I have the following code for the user to register attendance at work. This registration is done by reading a card with a bar code.

let $scannerInput = $(".scanner-input");
  
$(document).ready(function(){
  $scannerInput.focus();
});

function inserir_assid()
  {
  
    var ColabAssid = $("input[name='ColabAssid']").val();
  
    var dadosajax = {
      'ColabAssid' : $("#ColabAssid").val()
    };
  
    $.ajax({
      url: 'insertAssid.php',
      type: 'POST',
      cache: false,
      data: dadosajax,
      error: function(){
  
      },
      success: function(result)
      { 
        $.ajax({
          url:"entradacol.php",  
          method:"POST",
          cache: false,
          data: {ColabAssid:ColabAssid},                                
          dataType:"json",  
          success:function(data){
  
            if(data[i][0] == '' && data[i][1] == ''){
  
              var linha = ``;
  
              for (var i = 0; i < data.length; i++) {
                Entrada = data[i][0];
                HoraEntrada = data[i][1];
  
                linha += `Entrada em ${Entrada} às ${HoraEntrada}`;
              }
              $('#minhaDiv99').hide();
              $('#minhaDiv100').show();
              $(".horaentrada").html(linha);
            }else{
              var linha = ``;
  
            for (var i = 0; i < data.length; i++) {
              Saida = data[i][0];
              HoraSaida = data[i][1];
  
              linha += `Saída em ${Saida} às ${HoraSaida}`;
            }
            }
            
            $('#minhaDiv99').hide();
            $('#minhaDiv101').show();
            $(".horasaida").html(linha);
          }
        })
      }
    });
  }

.lnr {
  margin-top: 5%;
  font-size: 1000% !important;
}

<link href="https://cdn.jsdelivr.net/npm/pixeden-stroke-7-icon@1.2.3/pe-icon-7-stroke/dist/pe-icon-7-stroke.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form name="form" method="post" action="">
  <input type="text" name="ColabAssid" class="scanner-input" id="ColabAssid" value="" style="opacity: 0; position: absolute; top: 0; left: 0">
  <button type="submit" class="btn btn-success btn-xl" onclick="inserir_assid();"> <i class="pe-7s-look lnr"></i></button>
</form>

Everything works fine, but I intended, after inserting it into the database, to show the message that is inside the success, returned by json.

But as the button is of type submit, it does not return the message that is inside the success. I wanted it to show the message and only update after 5 seconds.

Is it possible to do that?

You can cancel the submit, do your ajax, then submit programmatically. What is the correct order of events you would like to happen when user click "submit"? — IT goldman, Aug 08 '22 at 21:01
the way how this is written now, there is no guarantee, that your second ajax call will ever run, as you are not preventing the form submission, and not making the ajax calls synchronous. — Adam Baranyai, Aug 08 '22 at 21:03
@IT goldman When I clicked send, I wanted it to be inserted into the database. Then make the event within the success. Went to consult the database and according to the information returned or showed the if or else message and after 5 seconds the page was updated — Bruno, Aug 08 '22 at 21:09
@Adam Baranyai So I could help improve and reach the goal I want. The click on send is done by the reader when reading the barcode. The user has no direct interaction with the form — Bruno, Aug 08 '22 at 21:11
Is there a purpose for using the `
` tag? or only the ajax calls are needed? — IT goldman, Aug 08 '22 at 21:36
@IT goldman Yes, but I don't know how to do it. Can you post an example? — Bruno, Aug 08 '22 at 22:27

IT goldman · Accepted Answer · 2022-08-08T22:59:54.717

So you want to make 3 ajax calls instead of 1 submit + 2 ajax calls.

In your case, we convert the form submit to an ajax call.

let $scannerInput = $(".scanner-input");

$(document).ready(function() {
  $scannerInput.focus();
});


function start_sequence() {
  var dadosajax = {
    'ColabAssid': $("#ColabAssid").val()
  };

  $.ajax({
    url: '',
    type: 'POST',
    cache: false,
    data: dadosajax,
    success: inserir_assid
  })
}

function inserir_assid() {

  var ColabAssid = $("input[name='ColabAssid']").val();

  var dadosajax = {
    'ColabAssid': $("#ColabAssid").val()
  };

  $.ajax({
    url: 'insertAssid.php',
    type: 'POST',
    cache: false,
    data: dadosajax,
    success: function(result) {
      $.ajax({
        url: "entradacol.php",
        method: "POST",
        cache: false,
        data: {
          ColabAssid: ColabAssid
        },
        dataType: "json",
        success: function(data) {

          if (data[i][0] == '' && data[i][1] == '') {

            var linha = ``;

            for (var i = 0; i < data.length; i++) {
              Entrada = data[i][0];
              HoraEntrada = data[i][1];

              linha += `Entrada em ${Entrada} às ${HoraEntrada}`;
            }
            $('#minhaDiv99').hide();
            $('#minhaDiv100').show();
            $(".horaentrada").html(linha);
          } else {
            var linha = ``;

            for (var i = 0; i < data.length; i++) {
              Saida = data[i][0];
              HoraSaida = data[i][1];

              linha += `Saída em ${Saida} às ${HoraSaida}`;
            }
          }

          $('#minhaDiv99').hide();
          $('#minhaDiv101').show();
          $(".horasaida").html(linha);

          setTimeout(function() {
            // location reload?
            // remove message?
          }, 5000)
        }

      })
    }
  });
}

.lnr {
  margin-top: 5%;
  font-size: 1000% !important;
}

<link href="https://cdn.jsdelivr.net/npm/pixeden-stroke-7-icon@1.2.3/pe-icon-7-stroke/dist/pe-icon-7-stroke.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form name="form" method="post" action="" onsubmit="start_sequence(); return false">
  <input type="text" name="ColabAssid" class="scanner-input" id="ColabAssid" value="" style="opacity: 0; position: absolute; top: 0; left: 0">
  <button type="submit" class="btn btn-success btn-xl"> <i class="pe-7s-look lnr"></i></button>
</form>

See 2 short examples about submitting a form and possibly canceling in my recent answer

I removed the form, but that way it doesn't insert into the database or do anything. Can you post an example with my complete code? — Bruno, Aug 08 '22 at 22:43

Before refreshing the page show a message to the user

1 Answers1