MDB5 Import Toast Module

Topic: MDB5 Import Toast Module

wardiam priority asked 1 year 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 priority commented 1 year ago

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

Add comment

wardiam priority answered 1 year ago

0 0 Best answer

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:

<pre class="prettyprint"><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();
 });
</code></pre>

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:<a href="https://mdbootstrap.com/snippets/standard/wardiam/4240552" target="_blank">https://mdbootstrap.com/snippets/standard/wardiam/4240552</a>

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

Wardiam

Please insert min. 20 characters.

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

Add comment

Kamila Pieńkowska staff answered 1 year ago

0 0 Best answer

Please insert min. 20 characters.

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 priority commented 1 year 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:

would these lines of code be enough to make 'Toast' work or do I need to add something else?
In the 2nd line (module), would I have to indicate only 'Toast'?
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

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:

<pre class="prettyprint"><code>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();
</code></pre>

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

<blockquote>
 "error TS2304: Cannot find name 'mdb'."
</blockquote>

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:

<pre class="prettyprint"><code>import * as mdb from 'mdb-ui-kit'; // lib
import { Input } from 'mdb-ui-kit'; // module
@import '~mdb-ui-kit/css/mdb.min.css'; // CSS
</code></pre>

The questions would be:

<ol>
<li>would these lines of code be enough to make 'Toast' work or do I need to add something else?</li>
<li>In the 2nd line (module), would I have to indicate only 'Toast'?</li>
<li>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.

<ul><li>MDB5Pro/js/mdb.min.js</li>
<li>MDB5Pro/js/mdb.min.js.map</li>
<li>MDB5Pro/js/modules/toast.min.js</li>
<li>MDB5Pro/js/modules/toast.min.js.map</li></ul></li>
</ol>

Thank you very much. 
Sergio

Please insert min. 15 characters.

Kamila Pieńkowska staff commented 1 year 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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Priority
Premium support: Yes
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

wardiam

5Support score
2Questions 1Answers 3Snippets