edit works in live.datatables but, not at home

kenrights

Hi Guys,

Thanks to some help from @kthorngren and @colin, I was able to get my live.datatables.net project working. Based on my working project on this web site and the directions on this datatables example page I attempted to make it work at home. I know my comments are verbose, please don't pick on me too much for that.

The two sections that are giving me trouble are below. Does anything look obviously wrong?

// get updates from : http://live.datatables.net/nofodaxu/1/edit
var editor; // use a global for the submit and return data rendering in the examples
$(document).ready( function () {
  editor = new $.fn.dataTable.Editor({
    // odd that ajax needs to be in twice: https://editor.datatables.net/examples/simple/simple.html
    ajax: {
        url: "http://192.168.1.4/datatable/json/sample-data.json",  // ip changes periodically
        dataSrc: ''  // tell ajax where to find the data in the json https://datatables.net/manual/ajax
    },
    table: "#table_id",
    ////////////////////////////////////////////////
    // had to disable the section below // 
    ///////////////////////////////////////////////
    /*fields: [
            {
                label: 'Name:',
                name: 'name'
            },
            {
                label: 'Position:',
                name: 'position'
            },
            {
                label: 'Salary:',
                name: 'salary'
            },
            {
                label: 'Start date:',
                name: 'start_date',
                type: 'datetime',
                                format: 'YYYY/M/D'
            },
            {
                label: 'Office:',
                name: 'office'
            },
                        {
                label: 'Phone:',
                name: 'phone'
            }
    ]*/
    ////////////////////////////////////////////////
    //            end section             // 
    ///////////////////////////////////////////////
  });
  $('#table_id').DataTable({
    dom: 'Bfript',  // can't include t because it moves info to the bottom
    // odd that ajax needs to be in twice: https://editor.datatables.net/examples/simple/simple.html
    ajax: {
      url: "http://192.168.1.4/datatable/json/sample-data.json",  // ip changes periodically
      dataSrc: ''  // tell ajax where to find the data in the json https://datatables.net/manual/ajax
    },
    columns: [     // tell ajax what data to slurp in https://datatables.net/manual/ajax
      { data: 'name' },
      { data: 'position' },
      { data: 'salary' },
      { data: 'start_date' },
      { data: 'office' },
      { data: 'phone' }
    ],
    language: {
      search: '', // removed the word 'search' from the left of search
    },
    initComplete: function() {
      $('div.dataTables_filter input').attr('placeholder', 'Search'); // put 'search' inside of search box
    },
    responsive: true, //https://datatables.net/reference/option/responsive
    "orderClasses": true, // default value but, added. highlights sorted column
    "pagingType": "simple", // removed pagination but, left prev & next. it should probably be in responsive css
    //stateSave: true, // remember how the user left the table last - bad during QA
    colReorder: true, // ability to move columns around
    select: true, // highlight what is selected
    "pageLength": 25,  // list more than the default 10
    fixedHeader: true,  //makes header sticky as you scroll down
    select: true, // highlight what is selected
    buttons: [   //https://datatables.net/reference/button/collection
      {
        extend: 'collection',
        autoClose: 'true',
        text: '',
        tag: 'span',
        className: 'fa fa-cog fa-2x',
        buttons: [
          'copy', 'csv', 'print', 'excel', 'pdf',
          { extend: "create", editor: editor },
          { extend: "edit", editor: editor },
          { extend: "remove", editor: editor }
        ]
      }
    ]
  });
    ////////////////////////////////////////////////
    // had to disable the section below // 
    ///////////////////////////////////////////////  
  //$('#table_id').on('click', 'tbody tr td', function() {
    //editor.inline(this);
  //});
    ////////////////////////////////////////////////
    //            end section             // 
    ///////////////////////////////////////////////
});

Here's some of my sample json:

[
  {
    "name": "Melissa Blair",
    "position": "ZOARERE",
    "salary": "$2,772.50",
    "start_date": "1979/08/22",
    "office": "Spelter",
    "phone": "2407"
  },
  { ...

Thank you for your continued insight.

tangerine

"giving me trouble" isn't much help. What is actually happening? Are any errors reported?

kenrights

good point, sorry @tangerine. I can't create, edit or delete entries in the table.

kthorngren

Do you get any errors in your browser's console?

Are you unable to select the row to edit?

What specifically happens when you click Create?

Why did you need to "disable" the editor code sections?

Kevin

kenrights

@kthorngren : Why I didn't think to check my console escapes me. So I did and I saw an issue with format: 'YYYY/M/D' so I commented it out:

{
    label: 'Start date:',
    name: 'start_date',
    type: 'datetime' /*,
        format: 'YYYY/M/D'*/
},

I was then able to uncomment both sections. As a result, I get no errors when I refresh the page. When I click on a row however, I get the attached error in my console:

Thanks for the "check the console" inspiration. Sorry about that. Am I possibly missing a library that I should be loading?

kthorngren

Many errors include a link with troubleshooting info. I believe the "please refer to" link is:
https://datatables.net/manual/tech-notes/14

This will explain the error and steps to resolve.

Kevin

kenrights

@kthorngren Thanks for pointing me in the right direction instead of just giving me the answer. I'm sorry I didn't click on that link. I shouldn't have assumed that it was "just something I didn't understand". I read the page, edited my json file and added a "DT_RowId" to each object. That fixed the problem.

Thank you very much.