Display success message after registration is completed via AJAX

Question

I want to display a message like "loading" while processing the registration and another with "Registration completed", this is my AJAX code

$.ajax({
    type: "POST",
    url: "http://localhost:5001/v1/enterprise",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    data: JSON.stringify(data),
    crossDomain: true,
    success: function(data) {

        guid = data;


        $(".cad_sucesso").css({
            display: 'block'
        })

        setTimeout(function() {
            $(".cad_sucesso").fadeOut();
            $(".processo_sucesso").css({
                display: 'block'
            })
            setTimeout(function() {
                window.location.href = "/dataImmobile/DataImmobile/NewImmobile";
            }, 1000);
        }, 3000);

    },
    failure: function(data) {
        alert(data.responseText);
    },
    error: function(data) {
        alert(data.responseText);
    }
});

What am I doing here? Displaying first a div with a message 'Loading', and after a few seconds displays the div with the message 'Registration completed', but it is not dynamic because I am setting the time to display the messages. How I take the time of this requisition?

Answer 1

You can use the event beforeSend to display your progress div and hide it in success. Instead of the .css({display: 'block');you could simply use the method show();

$.ajax({
  type: "POST",
  url: "http://localhost:5001/v1/enterprise",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  data: JSON.stringify(data),
  crossDomain: true,
  beforeSend: function() {
    //Exibe a div de progresso
    $(".cad_sucesso").show();
    
  },
  success: function(data) {

    guid = data;

    $(".cad_sucesso").fadeOut(function() {
      //exibe a div do sucesso após o fadeout do progresso
      $(".processo_sucesso").show();
      
      setTimeout(function() {
        window.location.href = "/dataImmobile/DataImmobile/NewImmobile";
      }, 1000);

    });

  },
  failure: function(data) {
    alert(data.responseText);
  },
  error: function(data) {
    alert(data.responseText);
  }
});