Search code examples
javascriptjqueryhtmlcssmaterialize

Materialize material_select is not a function error


This is my first time asking a question on here as I was unable to find an answer to my issue. I am using materialize and trying to use material_select(). Here is my main page that has the jQuery and materialize library as well as document.ready calls to both sidenav() and material_select(). Sidenav works just fine, yet material_select() is throwing an Uncaught TypeError.

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<script>
$(document).ready(() => {
    $("#slide-out").sidenav();
    $("select").material_select();
});
</script>

Here is the html where I use select:

<div class="row">
    <div class="input-field">
        <select name="status" id="selectedTest">
            <option value="public" selected>Public</option>
            <option value="private">Private</option>
            <option value="unpublished">Unpublished</option>
        </select>
        <label for="status">Status</label>
    </div>
</div>

This is the error I am getting:

Uncaught TypeError: $(...).material_select is not a function
at HTMLDocument.$.ready (dashboard:80)
at mightThrow (jquery-3.2.1.js:3583)
at process (jquery-3.2.1.js:3651)


Solution

  • it should be formSelect() rather than material_select() as you are using 1.0.0 if i am not wrong according to Docs

    $(document).ready(function() {
      $("#slide-out").sidenav();
      $("#selectedTest").formSelect();
    });
    Here is the html where I use select:
    
    <div class="row">
      <div class="input-field">
        <select name="status" id="selectedTest">
          <option value="public" selected>Public</option>
          <option value="private">Private</option>
          <option value="unpublished">Unpublished</option>
        </select>
        <label for="status">Status</label>
      </div>
    </div>
    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
    
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>