Uncaught TypeError: $ (...). Pickadate не является функцией - PullRequest
Новая
       7

Uncaught TypeError: $ (...). Pickadate не является функцией

0 голосов
/ 27 августа 2018

Я сейчас занимаюсь разработкой простого веб-проекта. У меня есть страница, на которой есть простая форма, где человек ставит свое имя, свой день рождения и степень в университете. Я использую материализацию и JQuery. Но это был кошмар, потому что я не могу получить дату (день рождения) правильно с этими двумя. Я всегда получаю эту ошибку:

Uncaught TypeError: $(...).pickadate is not a function

Вот мой HTML: 

$(function() {

  $(document).ready(function() {
    $('.datepicker').pickadate({
      selectMonths: true,
      selectYears: 20
    });
    $('select').material_select();
  });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8" />
  <link type="text/css" rel="stylesheet" href="/materialize/css/materialize.min.css" media="screen,projection" />
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
  <title>EscolAlura</title>
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script type="text/javascript" src="/materialize/js/inicializar.js"></script>



</head>

<body class="grey lighten-3">
  <div id="formularioEdicao" class="container">
    <h3 class="main-title center">Cadastrar Aluno</h3>
    <div class="row">
      <form class="col s12" action="#" th:action="@{/aluno/salvar}" th:object="${aluno}" method="post">
        <div class="section">
          <h5>Dados Básicos</h5>
          <div class="row">
            <div class="input-field col s12">
              <input id="nome" type="text" th:field="*{nome}" />
              <label for="nome">Nome</label>
            </div>
          </div>
          <div class="row">
            <div class="input-field col s12">
              <input id="dataNascimento" type="date" class="datepicker" th:field="*{dataNascimento}" />
              <label for="dataNascimento">Dt. Nascimento</label>
            </div>
          </div>
          <div class="row">
            <div class="input-field col s12">
              <input id="curso" type="text" class="validate" th:field="*{curso.nome}" />
              <label for="curso">Curso</label>
            </div>
          </div>

        </div>
        <!-- Fim SECTION Dados Basicos -->

        <div class="row">
          <div class="input-field col s12 center">
            <button class="btn waves-effect waves-light" type="submit" name="action">Salvar Aluno</button>
          </div>
        </div>
      </form>
    </div>

  </div>
  <!-- Fim do formulario de edicao -->
  <script type="text/javascript" src="/materialize/js/materialize.js"></script>
</body>

</html>

Моя страница в хроме

Кто-нибудь знает, как решить эту проблему? Thx

1 Ответ

0 голосов
/ 27 августа 2018

Порядок загрузки ваших скриптов очень важен.

При использовании jQuery начинается с него, загружайте его раньше всех. То же самое касается других плагинов, а затем и ваших пользовательских файлов JS.

см. Ниже 

$(document).ready(function() {

    $('.datepicker').pickadate({
        selectMonths: true, 
        selectYears: 20 
      });
      
    $('select').material_select();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" />

<div id="formularioEdicao" class="container">
    <h3 class="main-title center">Cadastrar Aluno</h3>
    <div class="row">
        <form class="col s12" action="#" th:action="@{/aluno/salvar}" th:object="${aluno}" method="post">
            <div class="section">
                <h5>Dados Básicos</h5>
                <div class="row">
                    <div class="input-field col s12">
                        <input id="nome" type="text" th:field="*{nome}" />
                        <label for="nome">Nome</label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <input id="dataNascimento" type="date" class="datepicker" th:field="*{dataNascimento}"/>
                        <label for="dataNascimento">Dt. Nascimento</label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <input id="curso" type="text" class="validate" th:field="*{curso.nome}"  />
                        <label for="curso">Curso</label>
                    </div>
                </div>

            </div> <!-- Fim SECTION Dados Basicos -->

            <div class="row">
                <div class="input-field col s12 center">
                    <button class="btn waves-effect waves-light" type="submit" name="action">Salvar Aluno</button>
                </div>
            </div>
        </form>
    </div>

</div>
...