"Uncaught TypeError: $(...).modal is not a function" when trying to open modal from Tabulator

Question

This question has already been answered, but those answers don't work for me. I've already tried to update my dependencies and I've even added some.

I am using tabulator to do the management of the users. When I click a cell in tabulator, I want it to open a modal so that I can auto-populate it.

How can I open the modal on row/cell click? I know for the row click I am not using the right function, I am only using cell click for testing.

I'm getting the following error:

gestaoutilizadores:338 Uncaught TypeError: $(...).modal is not a function at t.cellClick (gestaoutilizadores:338) at HTMLDivElement. (tabulator.min.js:4)

Dependencies

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>

Modal

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Javascript (Tabulator)

var table = new Tabulator("#example-table", {
  height: "100%", // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
  data: tabledata, //assign data to table
  layout: "fitColumns", //fit columns to width of table (optional)
  pagination: "local", //enable local pagination.
  paginationSize: 5, // this option can take any positive integer value (default = 10)
  columns: [ //Define Table Columns
    {
      title: "ID",
      field: "id",
      width: 150
    },
    {
      title: "Tipo Utilizador",
      field: "type",
      align: "center",
      /*, align:"left", formatter:"progress"*/ formatter: "lookup",
      formatterParams: {
        "0": "Super User",
        "1": "Admin",
        "2": "Utilizador Normal",
      }
    },
    {
      title: "Username",
      field: "username",
      align: "center",
      cellClick: function(e, cell) {
        var data = cell.getData();
        $('#exampleModal').modal('toggle');
        console.log(data);

        console.log("username")
      },
    },
    {
      title: "Password",
      field: "password",
      align: "center"
    },
    {
      title: "Empresa",
      field: "empresa",
      align: "center"
    },
    {
      title: "Data de Criacao",
      field: "createDate",
      sorter: "date",
      align: "center"
    },
  ],
});

Answer 1

You will need to import the jQuery library before the bootstrap library.

This is because the bootstrap library will register the modal plugin with jQuery when the package loads, if jQuery is not there when this happens then the modal plugin will not be loaded and your code will error.