Topic: MDB5 Import Toast Module

wardiam free asked 1 month ago


Hi,

I am developing a web application in Xojo and I want to incorporate the MDB5 Toast notifications. I have created in Typescript all the code but I get a debugging error: error TS2304: Cannot find name 'mdb'.

I have defined in the HTML Header:

<!-- MDB CSS ESSENTIAL -->
<link rel="stylesheet" href="http://IP/mdb5/css/mdb.min.css" />

<!-- MDB CSS PLUGINS -->
<link rel="stylesheet" href="http://IP/mdb5/plugins/css/all.min.css" />

<!-- MDB ESSENTIAL -->
<script type="text/javascript" src="http://IP/mdb5/js/mdb.min.js"></script>

<!-- MDB PLUGINS -->
<script type="text/javascript" src="http://IP/mdb5/plugins/js/all.min.js"></script>

But I think I have to import the library and/or module in the typescript.

Could you help me to include it, please?. I have a remote server where I have MDB5 (Pro), would it be possible to import the library/module directly from that remote address or do I necessarily need to have MDB5 locally?.

Thank you very much.
Wardiam


wardiam free commented 1 month ago

This is my code in typescript:https://jsfiddle.net/wardiam/b1pc6wqg/1/#&togetherjs=EnHNPPtwOb


wardiam free answered 1 month ago


Thanks for your help kpienkowska,

One last question, how could I use 'hide' and 'disponse' events to hide and remove the Toast message?.

In bootstrap 4.x (when using jquery) I used this code:

            $(`#$#{toastId}`) .toast({}) .toast('show') .on('hidden.bs.toast', (el: Event) => { if (!el.target) { return; }

            $(el.target).toast('dispose');
            const target = <HTMLDivElement>el.target;
            target.remove();
        });

But what would be the alternative in MDBootstrap (without jquery). The truth that the events are described in the 'Toast' page but there is no example. I need:

Code to use in javascript to close the Bootstrap modal.

Code to use over the 'Close' button to close the Bootstrap modal.

I attach my example in a snippet:https://mdbootstrap.com/snippets/standard/wardiam/4240552

I don't know how to make the 'stacking' but also the 'Hide' and 'Dispose' buttons work. Could you help me, please?.

Wardiam


kpienkowska staff answered 1 month ago


We do not provide help with using our package with every possible integration but I will try to help as much as possible.

With typical use of our package you link CSS in the head of HTML file and your script in the body. The error you get means you are trying to use code you did not defined properly. Try moving this at the bottom of the body in your HTML file.

<!-- MDB ESSENTIAL -->
<script type="text/javascript" src="http://IP/mdb5/js/mdb.min.js"></script>
<!-- MDB PLUGINS -->
<script type="text/javascript" src="http://IP/mdb5/plugins/js/all.min.js"></script>

If it doesn't help troubleshoot linking custom js in Xojo on Stack Overfolw.


wardiam free commented 1 month ago

Hi @kpienkowska,

Thank you very much for trying to help me. Just like in Angular or React to create a "stacking toast" inside the typescript I create the instance of Toast like this:

element.classList.add('toast', 'fade');

            document.body.appendChild(element);

            const toastInstance = new mdb.Toast(element, {
            stacking: true,
            hidden: true,
            width: '450px',
            position: 'top-right',
            autohide: false,
            delay: 5000,
            });

            toastInstance.show();

But when I compile the ts file to js I get the following error:

"error TS2304: Cannot find name 'mdb'."

I need to define and import the mdbootstrap library inside the typescript but I have several doubts. From what I have read I think it would be something like this:

import * as mdb from 'mdb-ui-kit'; // lib
import { Input } from 'mdb-ui-kit'; // module
@import '~mdb-ui-kit/css/mdb.min.css'; // CSS

The questions would be:

  1. would these lines of code be enough to make 'Toast' work or do I need to add something else?

  2. In the 2nd line (module), would I have to indicate only 'Toast'?

  3. This code is for the mdb-ui-kit but I am premium and I have the MDB5 Pro version, what folder and files do I need to copy to the typescript folder.

    • MDB5Pro/js/mdb.min.js
    • MDB5Pro/js/mdb.min.js.map
    • MDB5Pro/js/modules/toast.min.js
    • MDB5Pro/js/modules/toast.min.js.map

Thank you very much.
Sergio


kpienkowska staff commented 1 month ago

ad.1 This should be enough to create Tost with js: https://mdbootstrap.com/snippets/standard/kpienkowska/4229060

ad. 2 This I do not know. But you can troubleshoot this by searching Stack Overflow. Import of our package is like import of any custom js. There should be multiple threads about this.

ad. 3 MDB5Pro/js/mdb.min.js is all you need



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 4.3.0
  • Device: Web-Desktop
  • Browser: Chrome v103.0.5060.134 (x64)
  • OS: MacOS Monterey v12.4
  • Provided sample code: No
  • Provided link: No