Topic: Can't get MDB 7+ to work in Blazor WASM project
I've had MDB 6+ working in my Blazor WASM project for a while. I just upgraded to 7.1, and it seems that the MDB javascript no longer functions. To keep things simple I am just using your CDN. When using 6.4.2 of your CDN and the v6 version of your basic Dropdown code, it works fine. When I switch to 7.1.0 of your CDN and the v7 version of your basic Dropdown code, the button appears, the ripple works, but no dropdown menu appears on click.
Have you made the necessary changes to the design? v7 is not compatible with v6 and design changes need to be made. More information can be found at this link: https://mdbootstrap.com/docs/standard/getting-started/migration-guide/
If the component still does not work properly, let me know. Also, provide more details. Do you have any errors in the console? What way did you choose to init the component? Init using the data attribute or using JS?
Yes. I read the migration guide. I was using the data attribute init pattern. Instructions to reproduce the problem: 1) create a new Blazor WASM project in Visual Studio, 2) add the css and js CDN links to the index.html file, 3) copy the Dropdown component sample code from your website and paste into the Home page of the Blazor app. When you run the app the Dropdown component will not function. (In my latest attempt at this procedure I used your new 7.2 CDN links.)
Grzegorz Bujański staff commented 9 months ago
Do you have any errors in the console?
shrensky pro premium priority commented 9 months ago
No errors in the console.
It appears that the dropdown has not been initiated. Do init via JS and everything should start working.
shrensky pro premium priority commented 9 months ago
I'm not using modules. My understanding is that I should be able to init through data attribute.
shrensky pro premium priority commented 9 months ago
Can you please provide clear and specific instructions on how to get v7 to work where the css and js are incorporated through CDN references and following the UMD (as opposed to ES) pattern?
shrensky pro premium priority commented 9 months ago
To be clear, I am able to use the CDN and UMD pattern in a ASP.NET web project. I cannot make it work in a Blazor project. Can you provide an example where v7 works in a Blazor WASM project?
Grzegorz Bujański staff commented 9 months ago
Unfortunately, we do not have such an example. The init data attribute only works if the element is available on the page when the js file is loaded. In the case of a Blazor project, it is possible that the element is not yet added in the DOM when the MDB js code loads. Therefore, it is required to perform init manually.
shrensky pro premium priority commented 9 months ago
As a user who has paid for pro support I am surprised by your answer "we do not have such an example." You guys are the experts who created the v7 javascript library and initialization scheme. I have spent far too much time trying to get my project back on track after the switch to v7 to no avail. All I am asking is that you show me how v7 works in a Blazor WASM project. I think that is a reasonable support request from a paying customer who up until your moved to v7 was successfully using your product.
Grzegorz Bujański staff commented 9 months ago
We understand your frustration, and we apologize for any inconvenience caused. Unfortunately, providing assistance with external tools, that are not directly integrated into the documentation, like Blazor, is out of scope for our support forum. We don't have an "out of pocket" integration boilerplate for Blazor yet. Any tool that is official integrated with MDB will always be linked in the documentation. However, we're more than willing to offer personalized assistance. If you are able to do so, pleas share you full source code - including the parts that encompass the external tooling (Blazor) to services@mdbootstrap.com. Our team will analyze it to provide you with an estimation on what kind of tailored support are we able to provide in this specific integration case. Thank you for your understanding and cooperation in this matter. We look forward to receiving your source code and assisting you further. Should you have any questions or concerns in the meantime, please don't hesitate to reach out to us.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 7.1.0
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No