1

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?

BackTrack57
  • 395
  • 1
  • 5
  • 16

1 Answers1

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,
  });
}
Abdelkarim EL AMEL
  • 1,515
  • 1
  • 10
  • 10
  • It works but it's not working with the redirection of href. I need href redirection for it adds item to his Cart. If it could do that also without the redirection block it would be perfect. – BackTrack57 Apr 02 '19 at 18:01
  • you can perform some ajax request to add item into the cart after clicking on the link. – Abdelkarim EL AMEL Apr 02 '19 at 19:44
  • I see. I don't have skills in Ajax. I think I have to call the JavaScript function to show the notify after item is successfully added after the redirection. I will try this night thank you. – BackTrack57 Apr 03 '19 at 07:47