title: New event notification without refreshing a page using PHP and AJAX
body: <p>I show a notification to my users every time a new event is added to my database. I have a small icon on my top page and a red square to show the number of new events that were added. Now I just want to know what the best way is to display new events without refreshing the page.</p>
  
  <p><a href="https://i.stack.imgur.com/OrQBX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OrQBX.png" alt="notification element screenshot"></a> </p>
  
  <p>Here is my code</p>
  
  <pre class="lang-php prettyprint-override"><code>&lt;li&gt;&lt;i class="fa fa-warning  fa-2x"&gt;&lt;/i&gt;
      &lt;?php if ($totalRows_event &gt; 0) { ?&gt;
          &lt;span class="label label-danger blink"&gt;&lt;?php echo $totalRows_event ?&gt;&lt;/span&gt;
      &lt;?php } ?&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>My PHP query is basically when the total of events is > 0, display a <code>&lt;span&gt;</code> and the total inside, but this only shows when the page is refreshed or load.</p>
  
  <p>I was looking at an AJAX request like the one below that will display the PHP query result into a inner html.</p>
  
  <pre class="lang-js prettyprint-override"><code>function testAjax() {
      var result = "";
      $.ajax({
          url: "data.php",
          async: false,
          success: function (data, textStatus) {
              $("#preview").html(data);
          },
          error: function () {
              alert('Not OKay');
          }
      });
      return result;
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;li&gt;
    &lt;i class="fa fa-warning fa-2x"&gt;&lt;/i&gt;
    &lt;span class="label label-danger blink" id="preview"&gt;&lt;/span&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>But how do I call the function every time a new event is added to my database without refreshing or loading the page? I think using a set interval or delay will slow my page because of frequent server queries so I am looking for other options.</p>