Material Select not showing in Jquery Version

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Material Select not showing in Jquery Version

BizRTC pro asked 7 years ago

Hi, Material Select is not working for me. 
Start your code here
<select class="mdb-select colorful-select dropdown-primary initialized">
 <option value="1">Option 1</option>
 <option value="2">Option 2</option>
 <option value="3">Option 3</option>
 <option value="4">Option 4</option>
 <option value="5">Option 5</option>
 </select>


Its does not show on my browser 
Even simple select is not shown

Josip Tomašev pro premium priority answered 7 years ago

I created test file: 
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <meta http-equiv="x-ua-compatible" content="ie=edge">
 <title>Material Design Bootstrap</title>
 <!-- Bootstrap core CSS -->
 <link href="css/bootstrap.min.css" rel="stylesheet">
 <!-- Material Design Bootstrap -->
 <link href="css/mdb.min.css" rel="stylesheet">
 <!-- Template styles -->
 <style rel="stylesheet">
 </style>
</head>
<body>
<header></header>
<main>
<select class="mdb-select colorful-select dropdown-primary initialized">
 <option value="1">Option 1</option>
 <option value="2">Option 2</option>
 <option value="3">Option 3</option>
 <option value="4">Option 4</option>
 <option value="5">Option 5</option>
</select>

</main>
<footer></footer>

<!-- SCRIPTS -->
<!-- JQuery -->
 <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
 <!-- Bootstrap dropdown -->
 <script type="text/javascript" src="js/popper.min.js"></script>
 <!-- Bootstrap core JavaScript -->
 <script type="text/javascript" src="js/bootstrap.min.js"></script>
 <!-- MDB core JavaScript -->
 <script type="text/javascript" src="js/mdb.min.js"></script>

 <script>
 // Material Select Initialization
 $(document).ready(function() {
 $('.mdb-select').material_select();
 });
 </script>

</body>
</html>
  And everything works perfectly Can you check if all JS files are included? As I can see in your code, ther missing bootstrap.js. And one jquery.js is enough, you don't need to include two or more version of them And, of course, material select is part of MDB Pro version, so check do you included proper version

BizRTC pro commented 7 years ago

See i have added my code below, check if there is something missing

BizRTC pro commented 7 years ago

I am using MDB 4.4.5 also i opened mdb.js file, I could not find the "mdb-select" function

Mikołaj Smoleński staff answered 7 years ago

Hi,
  1. You should move this: <script type=”text/javascript” src=”<?php echo site_url(‘assets/js/jquery-3.2.1.min.js’); ?>”></script> to the scripts part (before <!– Bootstrap tooltips –>)
  2. Then You have to add bootstrap.js file to Your project (just after jquery and before popper)
  3. In mdb.js file there is 'material_select' function (not mdb select)
Regards

BizRTC pro commented 7 years ago

yeah but if i do so it give me error for datatables, maybe thats because I initalize the datatables before the script linking,

Josip Tomašev pro premium priority commented 7 years ago

Hi Mikolaj, There is no harm if jquery is in the head of page, sometimes this can prevent problem with scripts which are smaller and load faster than jquery when it is in the footer of page. Regards Josip

Mikołaj Smoleński staff commented 7 years ago

But have You added bootstrap.js script? Without that select won't work correctly.

Josip Tomašev pro premium priority commented 7 years ago

???

Mikołaj Smoleński staff commented 7 years ago

If Your select is still not working, please send me Your zipped project via mail: m.smolenski@mdbootstrap.com.

Josip Tomašev pro premium priority commented 7 years ago

As I can see, BizRTC wrote that his page works now :)

Mikołaj Smoleński staff commented 7 years ago

OK, thanks Josip for Your contribution.

Josip Tomašev pro premium priority answered 7 years ago

Are you putted second part in JS:   
// Material Select Initialization
 $(document).ready(function() {
    $('.mdb-select').material_select();
  });

BizRTC pro commented 7 years ago

it says : Uncaught TypeError: $(...).material_select is not a function

Josip Tomašev pro premium priority commented 7 years ago

You must include mdb.min.js in your page, before you can call this function.

BizRTC pro commented 7 years ago

See i have placed my files like this still it shows error :: <!-- Bootstrap tooltips --> <!-- Bootstrap core JavaScript --> <!-- MDB core JavaScript --> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="/codeigniter/assets/js/jquery-3.2.1.min.js"></script> <!-- Bootstrap tooltips --> <script type="text/javascript" src="/codeigniter/assets/js/popper.min.js"></script> <!-- Bootstrap core JavaScript --> <!-- MDB core JavaScript --> <script type="text/javascript" src="/codeigniter/assets/js/mdb.min.js"></script> <script type="text/javascript" src="/codeigniter/assets/datatables/datatables.js"></script> <script type="text/javascript"> $( document ).ready( function () { $( '.dropdown-menu a.dropdown-toggle' ).on( 'click', function ( e ) { var $el = $( this ); var $parent = $( this ).offsetParent( ".dropdown-menu" ); if ( !$( this ).next().hasClass( 'show' ) ) { $( this ).parents( '.dropdown-menu' ).first().find( '.show' ).removeClass( "show" ); } var $subMenu = $( this ).next( ".dropdown-menu" ); $subMenu.toggleClass( 'show' ); $( this ).parent( "li" ).toggleClass( 'show' ); $( this ).parents( 'li.nav-item.dropdown.show' ).on( 'hidden.bs.dropdown', function ( e ) { $( '.dropdown-menu .show' ).removeClass( "show" ); } ); if ( !$parent.parent().hasClass( 'navbar-nav' ) ) { $el.next().css( { "top": $el[0].offsetTop, "left": $parent.outerWidth() - 4 } ); } return false; } ); } ); </script> <script type="text/javascript"> // Material Select Initialization $(document).ready(function() { $('.mdb-select').material_select(); }); </script>

BizRTC pro answered 7 years ago

hi,

Instead of bootstrap.min.js I am using datatables.js.

But it still show the error, Can you please help, below is my code

All mentioned files are attached

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">

<title>Customer Management Portal</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<link href="<?php echo site_url('./assets/css/bootstrap.css'); ?>" rel="stylesheet">
<link href="<?php echo site_url('assets/css/mdb.css'); ?>" rel="stylesheet">
<link href="<?php echo site_url('assets/css/style.css'); ?>" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="<?php echo site_url('assets/datatables/datatables.css'); ?>"/>
<script type="text/javascript" src="<?php echo site_url('assets/js/jquery-3.2.1.min.js'); ?>"></script>

 

 

Some HTML PHP Content

 

 

<!-- Bootstrap tooltips -->
<script type="text/javascript" src="<?php echo site_url('assets/js/popper.min.js'); ?>"></script>

<!-- MDB core JavaScript -->
<script type="text/javascript" src="<?php echo site_url('assets/js/mdb.min.js'); ?>"></script>

<script type="text/javascript" src="<?php echo site_url('assets/datatables/datatables.js') ?>"></script>

<script type="text/javascript">
// Material Select Initialization
$(document).ready(function() {
$('.mdb-select').material_select();
});
</script>

</body>
</html>

Josip Tomašev pro premium priority commented 7 years ago

I suppose you using datatables.js from https://datatables.net/download/? Do you included Bootstrap4 JS in your concatenated/minified version? If yes, I suggest to put datatables.js after popper.min.js and before mdb.min.js in your source. If not, add boostrap.min.js before mdb.min.js And repeating - material select are part of MDB Pro, you must found function 'material_select' in mdb.js ('.mdb-select' is CSS class, not function) Small tips: you do not need font-awesome.css twice in page header, and replace '>' with '>' - this can help

Josip Tomašev pro premium priority commented 7 years ago

& gt; with >

BizRTC pro commented 7 years ago

Yes this worked for me thanks

BizRTC pro commented 7 years ago

@Josip Tomosev, Select works for me in normal cases, but for datatables it does not. The generated HTML for datatables select number of rows is this : <div class="col-sm-12 col-md-6"><div class="dataTables_length" id="example_length"><label>Show <select name="example_length" aria-controls="example" class="form-control form-control-sm"><option value="10">10</option><option value="25">25</option><option value="50">50</option><option value="75">75</option><option value="100">100</option></select> entries</label></div></div> entries Still the select number of rows in now shown
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
BizRTC
Pro User
95Support score
18Questions 2Answers
0Snippets likes 2Snippets