Topic: mdb select not appearing - pro version

Shanmugham Sundaram pro asked 6 years ago


HI - I have purchased mdb pro version of Bootstrap. I am using this pro version on a angular 6 project with cli. I have issue with mdb-select, I have copied all css,js,font and img folders to assets folder of angular project, and have added entries in the angular.json file as follows:
"assets": [
"src/favicon.ico",
"src/assets/pro/css/",
"src/assets/pro/img/",
"src/assets/pro/font/",
"src/assets/pro/js/",
"src/assets/pro/js/modules/",
"src/assets/pro/js/addons/"
],
in  the index file i have added all the required css and js files as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<basehref="/">
<!-- Required meta tags always come first -->
<metacharset="utf-8">
<metaname="viewport"content="width=device-width, initial-scale=1, shrink-to-fit=no">
<metahttp-equiv="x-ua-compatible"content="ie=edge">
<title>Material Design Bootstrap Template</title>
<link href="assets/pro/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="assets/pro/css/mdb.min.css" rel="stylesheet">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="assets/pro/js/jquery-3.3.1.min.js"></script>
<script src="assets/pro/js/bootstrap.min.js"></script>
<script src="assets/pro/js/popper.min.js"></script>
</head>
<body>
<div class="wrapper">
<app-root></app-root>
</div>
<script src="assets/pro/js/mdb.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
$(this).toggleClass('active');
});
$('.mdb-select').material_select();
});
</script>
<script type="text/javascript">
// Animations initialization
newWOW().init();
</script>
</body>
</html>
but I never see the select control on the browser.. Can you please help here and point to right direction to using this control

                
                  

Sebastian Kaczmarek staff commented 6 years ago

Does your `select` control has `mdb-select` class? Also, can you confirm that `mdb.min.css` is loaded on the page?

Shanmugham Sundaram pro commented 6 years ago

Yes it has all requried - `mdb-select` class added mdb.min.css as well.. and gets loaded when I view the page source

Sebastian Kaczmarek staff answered 6 years ago


I think it can be caused by Angular lifecycle hooks. You are calling .material_select() as soon as the index.html is served, while your actual <select> control is rendered after this function call- in <app-root>. Try calling $('.mdb-select').materialSelect() on OnInit or AfterViewInit hook. At this time your <select> element is already rendered and you can call .materialSelect() on it to render it properly. Also, if you want to implement MDB into your Angular project I would kindly recommend you to use MDB Angular. It is created to be used with Angular and is much easier to use in Angular project than MDB jQuery.

Shanmugham Sundaram pro commented 6 years ago

Hi Thanks for the response. since I have purchased Jquery version, can I still use the pro version of Angular? or should it be another new purchase? Please clarify Thanks.

Sebastian Kaczmarek staff commented 6 years ago

If you want to have both Angular and jQuery versions available you need to make two purchases. But if you would like to switch from jQuery to Angular version of MDB please reach our customer support at f.kapusta@mdbootstrap.com

ppulfer pro answered 6 years ago


Same here: Console Error:
jquery-3.3.1.min.js:2 jQuery.Deferred exception: $(...).material_select is not a function TypeError: $(...).material_select is not a function
at HTMLDocument.<anonymous> (https://HOST/:86:18)
at l (https://HOST/js/jquery-3.3.1.min.js:2:29375)
at c (https://HOST/js/jquery-3.3.1.min.js:2:29677) undefined

Shanmugham Sundaram pro commented 6 years ago

I did not get this error. But can MDB support can answer whats is wrong in using this select control of JQuery variant in an angular project?? am I missing something ???


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.5.10
  • Device: laptop
  • Browser: chrome,firefox,opera
  • OS: MAC
  • Provided sample code: Yes
  • Provided link: No