No method named "Setting" when using CRUD buttons in Editor

No method named "Setting" when using CRUD buttons in Editor

rob1strob1st Posts: 43Questions: 8Answers: 0

Issue can be seen here: https://assettrack.cx/asset/displayAssets_ajax1.php
Tried to upload debugger code, says error occured. However on my visual no errors were shown.

DevTools failed to load source map: Could not load content for https://debug.datatables.net/index.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

The full error message for the issue that stop sme using CRUD buttons is:

Uncaught TypeError: No method named "setting"
    at HTMLDivElement.<anonymous> (modal.js:521)
    at Function.each (jquery.min.js:2)
    at S.fn.init.each (jquery.min.js:2)
    at S.fn.init.o.jQueryInterface [as modal] (modal.js:507)
    at Object.open (editor.semanticui.min.js:9)
    at a.jc [as _nestedOpen] (dataTables.editor.min.js:73)
    at a.xb [as open] (dataTables.editor.min.js:46)
    at Object.maybeOpen (dataTables.editor.min.js:61)
    at dataTables.editor.min.js:36
    at a.Xb [as _event] (dataTables.editor.min.js:64)
(anonymous) @   modal.js:521
each    @   jquery.min.js:2
each    @   jquery.min.js:2
o.jQueryInterface   @   modal.js:507
open    @   editor.semanticui.min.js:9
jc  @   dataTables.editor.min.js:73
xb  @   dataTables.editor.min.js:46
maybeOpen   @   dataTables.editor.min.js:61
(anonymous) @   dataTables.editor.min.js:36
Xb  @   dataTables.editor.min.js:64
Wa  @   dataTables.editor.min.js:36
action  @   dataTables.editor.min.js:148
g   @   dataTables.buttons.min.js:14
(anonymous) @   dataTables.buttons.min.js:15
dispatch    @   jquery.min.js:2
v.handle    @   jquery.min.js:2

My JS is:

<script type="text/javascript" language="javascript" class="init">
var editor;

$(document).ready(function() {
  var editor = new $.fn.dataTable.Editor( {
    ajax: "../ajax/controllers/assets.php",
    table: "#assets",
    fields: [ 
      { 
        label: 'ID', 
        name: 'userID' 
      }, { 
        label: 'Location', 
        name: 'location' 
      }, { 
          label: 'Design Tag',  
          name: 'dwgTag' 
      }, { 
          label: 'CTSC Tag',  
          name: 'MATPTag',
          multiEditable: false
      }, { 
          label: 'Room',  
          name: 'Room'
      }, {  
          label: 'Asset Type',  
          name: 'assetType'
      }, { 
          label: 'Entity',  
          name: 'entity'
      }, {  
          label: 'Drawing',  
          name: 'dwgNo'
      }, {  
          label: 'Status',  
          name: 'assetStatus'
      }, { 
          label: 'Old ID',  
          name: 'oldID',
          multiEditable: false
      }, {  
          label: 'Subsystem',  
          name: 'subsystem'
      }, {  
          label: 'PICO Status',  
          name: 'PR'
      }, {  
          label: 'SAT Status',  
          name: 'SR'
      }, {  
          label: 'PICO',  
          name: 'SAT'
      }, {  
          label: 'SAT',  
          name: 'PICO'  
      },
    ],
    formOptions: {
            main: {
                scope: 'cell' // Allow multi-row editing with cell selection
            }
        }
  } );

  $('#assets').DataTable( {
    dom: "lBfrtip",
    ajax: "../ajax/controllers/assets.php",
        columns: [
            { data: "A.assetID" },
      { data: "L.LocationName" },
      { data: "A.dwgTag" },
            { data: "A.MATPTag" },
            { data: "A.Room" },
            { data: "T.assetType" },
      { data: "E.entityTLA" },
      { data: "A.dwgNo" },
      { data: "S.assetStatus" },
      { data: "A.oldID" },
      { data: "PR" },
      { data: "SR" },
      { data: "subsystem" },
      { data: "PICO" },
      { data: "SAT" }
        ],
    select: true,
    buttons: [
        { extend: 'create', editor: editor },
        { extend: 'edit',   editor: editor },
        { extend: 'remove', editor: editor }
    ],
  } );
} );
</script>

My loaded JS is:

<!--JQUERY-->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>

<!--BOOTSTRAP 5-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

<!--AJAX-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!--ICONIFY-->
<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>

<!--DATATABLES-->
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/datetime/1.0.3/js/dataTables.dateTime.min.js"></script>
<!-- <script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.24/af-2.3.6/b-1.7.0/b-colvis-1.7.0/b-html5-1.7.0/b-print-1.7.0/cr-1.5.3/date-1.0.3/fc-3.3.2/fh-3.1.8/kt-2.6.1/r-2.2.7/rg-1.1.2/rr-1.2.7/sc-2.0.3/sb-1.0.1/sp-1.2.2/sl-1.3.3/datatables.min.js" defer></script> -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://assettrack.cx/ajax/js/dataTables.editor.js"></script>
<script type="text/javascript" src="https://assettrack.cx/ajax/js/dataTables.editor.min.js"></script>
<script type="text/javascript" src="https://assettrack.cx/ajax/js/editor.bootstrap.js"></script>
<script type="text/javascript" src="https://assettrack.cx/ajax/js/editor.bootstrap.min.js"></script>
<script type="text/javascript" src="https://assettrack.cx/ajax/js/editor.bootstrap5.js"></script>
<script type="text/javascript" src="https://assettrack.cx/ajax/js/editor.bootstrap5.min.js"></script>
<script type="text/javascript" src="https://assettrack.cx/ajax/js/editor.bulma.min.js"></script>
<script type="text/javascript" src="https://assettrack.cx/ajax/js/editor.foundation.js"></script>
<script type="text/javascript" src="https://assettrack.cx/ajax/js/editor.foundation.min.js"></script>
<script type="text/javascript" src="https://assettrack.cx/ajax/js/editor.jqueryui.js"></script>
<script type="text/javascript" src="https://assettrack.cx/ajax/js/editor.jqueryui.min.js"></script>
<script type="text/javascript" src="https://assettrack.cx/ajax/js/editor.semanticui.js"></script>
<script type="text/javascript" src="https://assettrack.cx/ajax/js/editor.semanticui.min.js"></script>

My loaded CSS is:

    <!-- Bootstrap core CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

    <!--DataTables-->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://assettrack.cx/ajax/css/editor.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.7.0/css/buttons.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.3/css/select.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/datetime/1.0.3/css/dataTables.dateTime.min.css">
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />
    <style type="text/css" class="init">
    
    a.buttons-select-rows,
    a.buttons-select-none {
        margin-left: 1em;
    }

    </style>
    <!--ICON JS Scripts-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    
    <!--ASSET TRACK CUSTOM STYLESHEET-->
    <link rel="stylesheet" href="<?php echo $path ?>/css/styles2.css" type="text/css"/>

Appreciate the help, purchased Editor today and I tried to copy the example for multi edit exactly, and the only items I have not included were the links to the demo JS & CSS.

Appreciate any help.

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 12,109Questions: 0Answers: 2,059
    Answer ✓

    It looks like you're including many copies of Editor for each of the styling libraries - you only need to include the one for the style you want to use. Look at the examples here, and choose the styling package you want, then ensure you have the necessary files listed on the Javascript and CSS tabs beneath the table.

    Colin

  • rob1strob1st Posts: 43Questions: 8Answers: 0

    Thank you. So simple.

Sign In or Register to comment.