How to show notify top right corner few seconds on click glyphicon?

Question

I've implemented successfuly this Bootstrap notify tutorial with buttons:

Tutorial

Demo

I would like to change a small thing, instead of a button, a glyphicon (from Font Awesome) on click it shows the success notify.

I was thinking doing that with an id on my code like :

<i class=\"fas fa-cart-arrow-down\" id=\"panier\">

Full code :

 echo "<h4 align=\"center\"> <a href=\"$softname?additem\"><i class=\"fas fa-cart-arrow-down\" id=\"panier\"></i> $a_photo_exp[0]</a></h4>";

I tryed modify JavaScript multiples times without success and now it is like that not working:

function myFunction() {
  document.getElementById("panier").bootstrapGrowl('Added to cart',{
        type: 'success',
        delay: 2000,
        });
}

My JavaScript is limited could you please explain me how to make it works please?

Answer 1

It seems that you need to use jQuery to open the notification, you can do something like this to make it work:

PHP code

Add a event.preventDefault() to block redirection after clicking the link.

 echo "<h4 align=\"center\"> <a href=\"$softname?additem\" onclick=\"event.preventDefault(); myFunction();\"><i class=\"fas fa-cart-arrow-down\" id=\"panier\"></i> $a_photo_exp[0]</a></h4>";

JS

function myFunction() {

  $.bootstrapGrowl('Added to cart',{
        type: 'success',
        delay: 2000,
  });
}