Topic: Stepper does not work, throws error, when jQuery is included ion the page
*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!
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-initinitialize 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!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: Yes
- Technology: TW Elements
- MDB Version: 2.0.0
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No