$(...).chips is not a function

Topic: $(...).chips is not a function

dab213 premium asked 3 years ago

Hi, i'm newbie with MDB and I'm trying to implementation a simple Chips, but I have the following error:

$(...).chips is not a function

I know I forgot to import some file, but I don't know which one.

My code:

<!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 for Bootstrap</title>
  <!-- MDB icon -->
  <link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
  <!-- Google Fonts Roboto -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
  <!-- Bootstrap core CSS -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <!-- Material Design Bootstrap -->
  <link rel="stylesheet" href="css/mdb.min.css">
  <!-- Your custom styles (optional) -->
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

  <!-- Start your project here-->  
    <div class="chips chips-placeholder"></div>
  <!-- End your project here-->

  <!-- jQuery -->
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <!-- Bootstrap tooltips -->
  <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>
  <!-- Your custom scripts (optional) -->
  <script type="text/javascript">
    $(document).ready(function() { 
        $('.chips').chips();
    });
  </script>

</body>
</html>

Add comment

SKONSOFT priority answered 2 years ago

0 0 Best answer

Please insert min. 20 characters.

Hello,

I have the same problem with MDB 5.

i followed the documentation and tried to create a chip but got the same error.

I'm new with MDB. I use jquery 3.6.

$('#chipsInputid').chips();

Error:

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

Have you any example of code or documentation for how to add chips programatically ?

Regards,

Michał Duszak staff commented 2 years ago

Issue moved to https://mdbootstrap.com/support/standard/how-to-add-chips-programatically/

Add comment

Marcin Luczak staff answered 3 years ago

1 1 Best answer

Hi,

Everything is ok with your imports, the problem is you are using syntax from the MDB5 Standard inside the older MDB4 version. If you would like this syntax to work I would recommend using it inside your MDB5 package, otherwise please use documentation for the older version of the chips component.

Keep coding, Marcin

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Premium
Premium support: Yes
Technology: MDB jQuery
MDB Version: MDB4 4.19.2
Device: PC
Browser: Chrome
OS: Linux/Ubuntu
Provided sample code: No
Provided link: No

dab213

Premium support 15Support score
3Questions 0Answers 1Snippets