Stepper does not work, throws error, when jQuery is included

Topic: Stepper does not work, throws error, when jQuery is included ion the page

kickstarting2025 premium asked 1 week ago

*Expected behavior*Stepper should work even with jQuery included in the page.

*Actual behavior*Other components (including Carousel for instance, even on the same page as Stepper) work fine, however Stepper throws the following error.main.ts:13 ERROR TypeError: Cannot set properties of undefined (setting 'Constructor') at SelfRegisterForAppComponent.ngAfterViewInit (self-register-for-app.component.ts:61:12)

When I comment out jQuery inclusion, Stepper loads fine! I can comment, reload - works fine. Uncomment, reload - broken. Clear and consistent.

*Resources (screenshots, code snippets etc.)*I have a bunch of screenshots however it appears that image upload is broken on this site (/wp-admin/admin-ajax.php:1 returns a 400 bad request) :(

Please look into this very soon, I need to use stepper, thank you!

Add comment

Bartosz Cylwik staff answered 6 days ago

0 0 Best answer

Hi! Thank you for letting us know about this. We cannot give you an ETA about the fix but we've found a workaround for the stepper that should work.

You can initialize the stepper by hand and it doesn't show the issue with jquery

remove the data attribute for auto initdata-twe-stepper-init
initialize the stepper via js

like this if you are using the umd version:

  <script type="text/javascript">
    new twe.Stepper(document.getElementById("stepper"));
  </script>

or like this if you are using the es version:

  <script type="module">
    import * as twe from "./js/tw-elements.es.min.js"; //or just import the Stepper from the package if using npm
    new twe.Stepper(document.getElementById("stepper"));
  </script>

Hope that helps!

Please insert min. 20 characters.

Hi! Thank you for letting us know about this. We cannot give you an ETA about the fix but we've found a workaround for the stepper that should work.

You can initialize the stepper by hand and it doesn't show the issue with jquery

remove the data attribute for auto init data-twe-stepper-init
initialize the stepper via js

like this if you are using the umd version:

  <script type="text/javascript">
    new twe.Stepper(document.getElementById("stepper"));
  </script>

or like this if you are using the es version:

  <script type="module">
    import * as twe from "./js/tw-elements.es.min.js"; //or just import the Stepper from the package if using npm
    new twe.Stepper(document.getElementById("stepper"));
  </script>

Hope that helps!

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: Premium
Premium support: Yes
Technology: TW Elements
MDB Version: 2.0.0
Device: PC
Browser: Chrome
OS: Windows
Provided sample code: No
Provided link: No

kickstarting2025

Premium support 0Support score
1Questions 0Answers 0Snippets