Material Select not showing in Jquery Version

Topic: Material Select not showing in Jquery Version

BizRTC pro asked 6 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

Add comment

Josip Tomašev priority answered 6 years ago

2 0 Best answer

I created test file:
<pre><!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>
 
 <link href="css/bootstrap.min.css" rel="stylesheet">
 
 <link href="css/mdb.min.css" rel="stylesheet">
 
 <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>

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
 
 <script type="text/javascript" src="js/popper.min.js"></script>
 
 <script type="text/javascript" src="js/bootstrap.min.js"></script>
 
 <script type="text/javascript" src="js/mdb.min.js"></script>

</body>
</html></pre>

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

Please insert min. 20 characters.

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 6 years ago

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

BizRTC pro commented 6 years ago

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

Add comment

Mikołaj Smoleński staff answered 6 years ago

1 0 Best answer

Hi,

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 –>)
Then You have to add bootstrap.js file to Your project (just after jquery and before popper)
In mdb.js file there is 'material_select' function (not mdb select)

Regards

BizRTC pro commented 6 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 priority commented 6 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 6 years ago

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

Josip Tomašev priority commented 6 years ago

???

Mikołaj Smoleński staff commented 6 years ago

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

Josip Tomašev priority commented 6 years ago

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

Mikołaj Smoleński staff commented 6 years ago

OK, thanks Josip for Your contribution.

Add comment

BizRTC pro answered 6 years ago

0 0 Best answer

<p>hi,</p>
<p>Instead of bootstrap.min.js I am using datatables.js.</p>
<p>But it still show the error, Can you please help, below is my code</p>
<p>All mentioned files are attached</p>
<p><!DOCTYPE html><br />
<html lang="en"></p>
<p><head><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><br />
<meta http-equiv="x-ua-compatible" content="ie=edge"></p>
<p><title>Customer Management Portal</title></p>
<p><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"></p>
<p><link href="<?php echo site_url('./assets/css/bootstrap.css'); ?>" rel="stylesheet"><br />
<link href="<?php echo site_url('assets/css/mdb.css'); ?>" rel="stylesheet"><br />
<link href="<?php echo site_url('assets/css/style.css'); ?>" rel="stylesheet"><br />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"><br />
<link rel="stylesheet" type="text/css" href="<?php echo site_url('assets/datatables/datatables.css'); ?>"/><br />
<script type="text/javascript" src="<?php echo site_url('assets/js/jquery-3.2.1.min.js'); ?>"></script></p>
<p> </p>
<p> </p>
<p>Some HTML PHP Content</p>
<p> </p>
<p> </p>
<p><br />
<script type="text/javascript" src="<?php echo site_url('assets/js/popper.min.js'); ?>"></script></p>
<p><br />
<script type="text/javascript" src="<?php echo site_url('assets/js/mdb.min.js'); ?>"></script></p>
<p><script type="text/javascript" src="<?php echo site_url('assets/datatables/datatables.js') ?>"></script></p>
<p><script type="text/javascript"><br />
// Material Select Initialization<br />
$(document).ready(function() {<br />
$('.mdb-select').material_select();<br />
});<br />
</script></p>
<p></body><br />
</html></p>

Please insert min. 20 characters.

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">

<title>Customer Management Portal</title>

Some HTML PHP Content

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

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

</body>
</html>

Josip Tomašev priority commented 6 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 priority commented 6 years ago

& gt; with >

BizRTC pro commented 6 years ago

Yes this worked for me thanks

BizRTC pro commented 6 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

Add comment

Josip Tomašev priority answered 6 years ago

0 0 Best answer

Are you putted second part in JS:

<pre class="code-toolbar language-javascript"><code class=" language-javascript"><span class="token comment">// Material Select Initialization</span>
 <span class="token function">$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">ready</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.mdb-select'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">material_select</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>

Please insert min. 20 characters.

Are you putted second part in JS:

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

BizRTC pro commented 6 years ago

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

Josip Tomašev priority commented 6 years ago

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

BizRTC pro commented 6 years ago

See i have placed my files like this still it shows error ::    <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>  <script type="text/javascript" src="/codeigniter/assets/js/popper.min.js"></script>   <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>

See i have placed my files like this still it shows error ::

<script type="text/javascript" src="/codeigniter/assets/js/popper.min.js"></script>

<script type="text/javascript" src="/codeigniter/assets/js/mdb.min.js"></script>

$( 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>

Please insert min. 15 characters.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

BizRTC

Pro User 95Support score
18Questions 2Answers 2Snippets