Solution 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.

Problem :

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)


<link rel="stylesheet" href="" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src=""></script>
<script type="text/javascript" src="[email protected]/dist/js/tabulator.min.js"></script>


<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>
      <div class="modal-body">
      <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>

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();

      title: "Password",
      field: "password",
      align: "center"
      title: "Empresa",
      field: "empresa",
      align: "center"
      title: "Data de Criacao",
      field: "createDate",
      sorter: "date",
      align: "center"


Comment posted by Tyler Roper

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

Comment posted by Ricardo Barbosa

Sorry and thanks, I’ve already updated and added the dependencies I think it’s necessary to the report

Comment posted by Ricardo Barbosa

I’ve imported those but didn’t post it on the question.. but even though it doesn’t work.

Comment posted by Niels Bosman

Make sure you are importing

Comment posted by Ricardo Barbosa

@NielsBosman Thanks anyway, but the dependecies are ordered just like you told but doesn’t work anyway