Problems to show success message after Ajax Call

Question

I have an html form, which, its data is sent through an AJAX post to a php File.

After the insert to a database, I need to show to the user that, the data they just sent, has been successfully inserted.

Everything works fine, but the real problem is that, the page refreshes so fast that I don't get to even see the content of the message.

Thing's to consider:

1. After the Ajax call I make a function call to the same page to refresh it, because if not, the page never does.
2. I have a <div> in this html form, that is hidden, intended to just unhide itself after the response of the server.

So I have two questions:

1. First of all, how I am doing it, is there an any better way?
2. Is it possible to make the message persistent after the refreshing of the page?

I leave some of the JS code (to make it short since everything works just fine), and the html part that contains the div here:

$('#MiForm').on('submit', function( event )
{
   //Creating the necessary instances and data
   //Here is where I put different messages for the div "alert"

   xhttp.onreadystatechange = function()
  {  //Response from the server.
      if (xhttp.readyState < 4)
      {// Waiting response from server.
          document.getElementById('Alert').hidden = false;    
          document.getElementById('Alert').innerHTML = "Sending Request...";
      }
      else if (xhttp.readyState === 4) 
      {// 4 = Response from server has been loaded
          if (xhttp.status == 200 && xhttp.status < 300)  // (200-299) is succesful.
             document.getElementById('Alerta').innerHTML = 'Everything OK!';
      }
   };
   //the Send function and data. 

   event.preventDefault(); //-->preventing the submit of the normal form cause I use AJAX.

   window.location.href = '../Ui/WorkerForm.php' //--->this is where I load the same page where I'm on, but it seems that it does it too fast.
  }); 

And the HTML:

<div id="Alert" class="alert alert-success" hidden="true" role="alert"></div>

One more thing, the PHP page that I send data to, does not return any value manually, It just get the data and calls the classes to make the insert.

Answer 1

First off, you're refreshing the page as soon as you send out the AJAX. You should move the refresh instruction inside the onreadystatechange function listener, so it happens after the AJAX is done, and you have the response.

If that doesn't help, you could add a small timed delay between displaying the message and refreshing:

setTimeout(function(){window.location.href = '../Ui/WorkerForm.php';}, TIMEOUT_IN_MILISECONDS);