Topic: Stepper - mdb not defined

devicecreates priority asked 1 year ago

Following the examples in the documents but can't get the buttons to work.

using mdb.min.js file via script link. Link is placed before the script for the next buttons.

*Expected behavior*Buttons allow you to move through the steps.

*Actual behavior*Error - mdb is not defined

*Resources (screenshots, code snippets etc.)*const stepper = new mdb.Stepper(document.getElementById('stepper-form-example'));

document.getElementById('form-example-next-step').addEventListener('click', () => { stepper.nextStep();});

document.getElementById('form-example-prev-step').addEventListener('click', () => { stepper.previousStep();});


PianoMaster88 priority commented 1 year ago

Do you put your mdb.min.js file and your other script where you add your event listeners before your buttons or after?

Do you by chance have a full snippet you could share of your page where you have the issue? I'm wondering if it's just a simple script location issue (in terms of where you're putting your scripts).

devicecreates priority commented 1 year ago

I added the min file in the footer before the script for the buttons. Same in the snippet that demonstrates the buttons

devicecreates priority commented 1 year ago

Copied from this example

PianoMaster88 priority commented 1 year ago

Sorry I should have been more clear. In order for MDB to work properly, the mdb.min.js file must be at the end of the HTML body (right before the closing body tag). I was wondering where you put the mdb.min.js file in relation to your actual button or a tags (if you put it before or after the buttons themselves). Can you clarify where you placed your scripts in relation to the rest of your HTML?

devicecreates priority commented 1 year ago

mdb.min file is right before closing tag for body.

The buttons are at the end of the stepper after the tag

Grzegorz Bujański staff answered 1 year ago

Probably the first error you get in the console is causing the MDB error. I need an example where this error occurs to see why it doesn't work. please prepare a snippet in which this error will occur. I'll check it.

devicecreates priority commented 1 year ago

It was the first error that was causing the issue. I hadn't thought anything of this error because all the other components that I'd added from mdb were working on other pages with same first error. There was a conflict with a stepper progress library. Once that was sorted, it works fine.

Thanks for pointing me in the right direction.

Please insert min. 20 characters.


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



Specification of the issue

  • User: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 5.0.0
  • Device: desktop
  • Browser: chrome
  • OS: windows 11
  • Provided sample code: No
  • Provided link: No