Topic: mdb is not defined
i need use a sideNav, but have this error:
When put this lines in js: const sidenav = document.getElementById("sidenav-1"); const sidenavInstance = mdb.Sidenav.getInstance(sidenav);
the error is: mdb is not defined
code snipet @ViewBag.Title - Contabilidad y bancos web
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" />
<script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.full.min.js"></script>
<!-- MDB icon -->
<link rel="icon" href="~/Content/Imagenes/favicon.ico" type="image/x-icon" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
<!-- Google Fonts Roboto -->
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />
<!-- MDB ESSENTIAL -->
<link href="~/MDB/css/mdb.min.css" rel="stylesheet" />
<!-- MDB PLUGINS -->
<link href="~/MDB/plugins/css/all.min.css" rel="stylesheet" />
<!-- Custom styles -->
<link href="~/Content/Site.css" rel="stylesheet" />
@RenderSection("Head", false)
@RenderBody()
</div>
</main>
<script src="~/MDB/js/mdb.min.js"></script>
<!-- MDB PLUGINS -->
<script src="~/MDB/plugins/js/all.min.js"></script>
<!-- Custom scripts -->
<script src="~/MDB/js/cyb.js"></script>
Thanks
Are you using asp.net? It looks like a script where you're trying to get an instance of the sidenav is being executed before MDB import.
You should find a way to delay executing the script wchich includes getInstance() method.
This may be a good solution:
_Layout.cshtml
<!-- MDB ESSENTIAL -->
<script src="~/MDB/js/mdb.min.js"></script>
<!-- MDB PLUGINS -->
<script src="~/MDB/plugins/js/all.min.js"></script>
@RenderSection("Scripts", required: false)
index.cshtml
@section Scripts {
<script type="text/javascript" src="~/mdb-pro/sidenav-code.js"></script>
}
It should force executing code in expected order.
jzambranoMDB pro premium priority commented 2 years ago
Hi, Thanks for you help. I made that but not work for me. maybe i not undesrstand.
My project is in asp.net with MVC
I can`t find: sidenav-code.js"
Note: The side nav work well when launch project (Home / Index), but when open another controller say: mdb is not defined.
Thanks again.
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 6.1.0
- Device: computer
- Browser: chrome
- OS: windows 11
- Provided sample code: No
- Provided link: No