stefanvd priority asked 3 months ago


Expected behavior Able to init a modal.

Actual behavior Not working.

Hi, I used to work with modals like this: in functions.php I register and enqueue the file like:

wp_register_script( 'mdb', site_url() . '/MDB5-STANDARD-UI-KIT-Pro-Advanced-6-4-1/js/mdb.min.js', array(), _S_VERSION, true );

In my html:

data-mdb-toggle="modal"

Now I noticed updated documentation - with things like 'ES', 'UMD' and

import { Modal, initMDB } from "mdb-ui-kit";

initMDB({ Modal });

For me as a beginner it is hard because I don't find any explanation on the MDB website like:

  • where do I need to exactly put the import code?
  • why has this changed and can't I use data-mdb-toggle="modal" anymore?

For me it feels like only half of the required info is explained, even in the /learn page nothing is told about how to import exactly.

I tried to use the sandbox but that also gives errors like

Cannot use import statement outside a module

I am a bit disappointed because every time I want to use MDB for an (at 1st sight) easy job, like the simplest possible modal, I get stuck in importing issues. Note: I don't use bundlers etc, just enqueueing the minified js file.

Some help would be appreciated!


Kamila Pieńkowska staff answered 3 months ago


Firs of all. Do you want to swtch to v7. It you want to keep working on current version you still can access previous documentation:

Here is a link to legacy docs: https://v5-standard-6.legacydocs.mdbootstrap.com/docs/standard/

You can access it from the changelog.

If yo prefer to upgrade to v7 but use umd format you do not need to add this in your code

import { Modal, initMDB } from "mdb-ui-kit";

initMDB({ Modal });

This import "mdb-ui-kit" need to be dded in the JS file of your choice. Preferably file that agregate all imports.

If you want to see example setup be have Vite starter that shows and explains import: https://mdbootstrap.com/docs/standard/getting-started/vite-integration/#section-vite-starter


stefanvd priority commented 3 months ago

Hi Kamila,

Thanks for your support. And thanks for the way to access the legacy docs, very helpful. About import "mdb-ui-kit" - the string between the "" (so: mdb-ui-kit): what I do is extracting my download and then the name of the folder is: MDB5-STANDARD-UI-KIT-Pro-Advanced-6-4-1

Does this mean: import "MDB5-STANDARD-UI-KIT-Pro-Advanced-6-4-1" ?

Or in other words, how can ' import "mdb-ui-kit" ' do something in my situation?

Finally, thanks for the link to the starter documentation!

Kind regards, Stefan


Kamila Pieńkowska staff commented 3 months ago

Here is how you can import mdb: https://v5-standard-6.legacydocs.mdbootstrap.com/docs/standard/pro/installation/


stefanvd priority answered 3 months ago


ps, I noticed the page

https://mdbootstrap.com/docs/standard/getting-started/migration-guide/

accidentally. I totally missed this... apologies!

Is it a good idea to add to the pages like this one:

https://mdbootstrap.com/docs/standard/components/modal/

that this info is for V7, with a link to the migration page?

For me, still the question remains, where to exactly put this code:

import { Modal, initMDB } from "mdb-ui-kit";

initMDB({ Modal });

or:

import "mdb-ui-kit"

Thanks!



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

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 6.4.1
  • Device: pc
  • Browser: chrome
  • OS: windows 10
  • Provided sample code: No
  • Provided link: No