title: PHP - Ajax Auto Refresh Page when Data is Fetch
body: <p>Here I have a <strong>set interval</strong>, which I think will reload the page automatically when data is fetched.</p>
  
  <p>here please look my UI and how am i displaying the modal without refresh,and i have database connection so there is a basis on how i will trigger the <strong>modal</strong> when i submit the button it will insert an <strong><code>id</code></strong> and that <code>id</code> will be save in the modal so the modal will <strong>trigger</strong> and <strong>display</strong>.</p>
  
  <p><code>clickModal.php</code>  - here is where the button should click and will trigger the modal and display it without refresh on my <code>home.php</code></p>
  
  <p><a href="https://i.stack.imgur.com/i8pIF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/i8pIF.png" alt="Click model"></a></p>
  
  <p><code>home.php</code>  - here is where the modal should <strong>popup</strong> or display when I click the button on <code>clickModal.php</code></p>
  
  <p>for now it is working but I need to <strong>refresh</strong> the page on <code>home.php</code> before the modal will display or pop up here is my code.</p>
  
  <p><code>clickModal.php</code> button click / ajax success. </p>
  
  <pre><code>            Yes: 
                                          btnClass: 'btn-green',
                                          action: function () {
                                              $.ajax({
                                                  type: "POST",
                                                  url: "announcement.php",
                                                  data: {
                                                      addInfo: addInfo
                                                  },
                                                  dataType: "text",
                                                  success: function (data) {
                                                      window.location.replace("change-password.php");
  
                                                  },
                                                  error: function (err) {
                                                      console.log(err);
  
                                                  }
  
                                              });
  
                                          }
  </code></pre>
  
  <p><code>home.php</code> </p>
  
  <p>my database connection</p>
  
  <pre><code> $data = mysqli_query($con,"SELECT * FROM announcement");
    $count = mysqli_num_rows($data);
  </code></pre>
  
  <p>my <strong>script</strong></p>
  
  <pre><code>    &lt;script&gt;
  
  
  var still_fetching = false;
  
  //fetch data every 3 seconds (3000)
  setInterval(function(){ 
       if (still_fetching) {
           return;
       }
       still_fetching = true;
       loadUsers();
  }, 3000);
  
  //need to update a bit this function
  function loadUsers(){
          var xhr = new XMLHttpRequest();
          xhr.open('GET', 'home.php', true);
  
          xhr.onload = function(){
              if(this.status == 200){
                  var users = JSON.parse(this.responseText);
  
                  var output = '';
  
                  for(var i in users){
                  output += '&lt;div id="myModal" class="modal" style="position:fixed;  display: none; padding-top: 100px;'+
                  'left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.9); "&gt;'+
                  '&lt;div class="container" style="width: 100%"&gt;'+
                  '&lt;div class="card col-12" style="background-color: red; color: white;"&gt;'+
                  '&lt;div class="card-header"&gt;'+
                      '&lt;p&gt;&lt;h3 class="text-center"&gt;Announcement&lt;/h3&gt;&lt;/p&gt;'+
                  '&lt;/div&gt;'+
                    '&lt;div class="card-body text-center"&gt;'+
  
                        '&lt;p&gt;Please click refresh button to resume after the announcement&lt;/p&gt;'+
                    '&lt;/div&gt;'+
                   '&lt;/div&gt;'+
                  '&lt;/div&gt;'+
                  '&lt;img class="modal-content" id="img01"&gt;'+
                  '&lt;/div&gt;';
                  }
  
                   document.getElementById('myModal').style.display='block';
                  still_fetching = false;
              }
          }
  
          xhr.send();
    }
  
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p>what I just need is to display the modal without any refresh when it is   triggered.</p>