Warning: Use of undefined constant MDB_STRIPE_SUB_WEBHOOK_SECRET - assumed 'MDB_STRIPE_SUB_WEBHOOK_SECRET' (this will throw an Error in a future version of PHP) in /var/www/acc01/wp-content/themes/mdbootstrap4/inc/mdb-subscriptions/mdb-payments/stripe/class-mdb-stripe-webhook.php on line 26

Notice: Undefined index: HTTP_REFERER in /var/www/acc01/wp-content/themes/mdbootstrap4/inc/cookie-setter.php on line 8
Javascript Notifications - Material Design for Bootstrap

Javascript Notifications

Topic: Javascript Notifications

BizRTC pro asked 2 years ago

I want to use MDB's Javascript notifications.But I am not sure how to use them! As they are just plain HTML code. How do I trigger them using jQuery or Javascript.

I am reffering to this :Javascript Notifications

Can you please provide a tutorial or snippet which we can reffer.

Krzysztof Wilk staff answered 2 years ago


You have to make something, that when you click on it (or make other event), it will trigger the notification. For example you're making button with id="button1", then you have to make eventListener on this button and in the function you must paste this trigger code $('.toast').toast('show');. You can use other options in brackets instead of 'show' if you want. Everything in <script> tags of course. In HTML you have to paste content of your notification, as you can see in documentation. I made a snippet some time ago with notifications and it placement, so you can see how it works and how to place your notification wherever you want.

Snippet: https://mdbootstrap.com/snippets/jquery/krzysztof-wilk/634541

BizRTC pro commented 2 years ago

how can i set options to this ? like changing the color or autohide or time using javascript ? I want to hide this notfication after 10 seconds how do I control that ? Also how do i add animation to the notification

Piotr Obrebski staff commented 2 years ago

Hi, to show you proper way of working with styled popup I modified snipped with example of styling popup on click. https://mdbootstrap.com/snippets/jquery/pjoter-2-0/743662 I commented JS code to make everything clear but if you have any further questions I'm here for you. Best regards, Piotr

Faraj answered 2 years ago

Dear Support,

i want to use the notifications as error

For example :

if user left the email input form is blank , i want to show the notification without pressing a button . is it possible ?

NOTE: i am using php for backend

Krzysztof Wilk staff answered 2 years ago

I think you should use "Blur" event and conditional instruction to check if input is empty or not. "Focus" and "Blur" are basic events for inputs handling. "Focus" event is triggered, when you click on input/textarea and make it active, I mean you can write inside it etc. "Blur" event is opposite, it is triggered, when you click outside of the input/textarea". I think your script should check if user wrote something inside the input and show popover only, when this value is empty, I mean input is empty. You can use "if" conditional to do it. Everything you can make using JavaScript/jQuery.

Please insert min. 20 characters.


Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: jQuery
  • MDB Version: 4.7.7
  • Device: Windows 10 PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes