mdb is not defined

Topic: mdb is not defined

jzambranoMDB priority asked 1 year ago

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

Add comment

Mateusz Lazaru staff answered 1 year ago

0 0 Best answer

Please insert min. 20 characters.

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 priority commented 1 year 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.

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: Priority
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

jzambranoMDB

0Support score
6Questions 4Answers 1Snippets