How to make notifications in real time with AJAX, PHP and MySQL?

Question

I would like to make real-time notification on my website. I have the notification bar:

<div class="alert alert-info alert-with-icon" data-notify="container">
  <button type="button" aria-hidden="true" class="close">
     <i class="nc-icon nc-simple-remove"></i>
  </button>
  <span data-notify="icon" class="nc-icon nc-bell-55"></span>
  <span data-notify="message"><h6>TEXT HERE</h6></span>
</div>

I would like to place my text in the space provided above.

I created a JS function to call a PHP file that will read in the database the last message.

JS code in index.php :

function charger() {

      setTimeout( function(){
        $.ajax({
          url : "charger.php",
          type : GET,
          success : function(html){
            $("h6").prepend(html);
          }
        });

        charger();

      },5000);
    }

    charger();

PHP File in charger.php :

<?php

  $servername = "localhost";
  $username = "scanner";
  $password = "valentin";
  $dbname = "Scanner3D";

  try {
    $bdd = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
    $bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  }
  catch(PDOException $e)
  {
  }

  // Recuperation des notifications du Scanner
  $requete = $bdd->query('SELECT message FROM notifications ORDER BY id DESC');

  $messages = null;

  while($donnees = $requete->fetch()){
    $messages = $donnees['message'];
  }

  echo $messages;

?>

But I can not display the text I read in my database in my notification location.

Can you use Chrome devtools to make a breakpoint in your ajax Success callback? See what value html has there and experiment if using 'prepend' is the appropriate function — TKoL
– TKoL, Commented Feb 26, 2019 at 12:33
@TKol In Chrome I have : Uncaught ReferenceError: GET is not defined — ValentinDP
– ValentinDP, Commented Feb 26, 2019 at 12:41

Serge K. · Accepted Answer · 2019-02-26 12:44:05Z

1

GET is not defined as you should have it surrounded by quotes since it's the name of the HTTP method you'll use, not a variable in your code.

$.ajax({
    url: "charger.php",
    type: "GET",
    success: function(html){
        $("h6").prepend(html);
    }
});

BTW, you should throw an eye on setInterval.

answered Feb 26, 2019 at 12:44

Serge K.

5,3331 gold badge23 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to make notifications in real time with AJAX, PHP and MySQL?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related