Cannot get the editor working.

classic12

I have the following js & css added to my project

buttons.html5.min.js
buttons.print.min.js
buttons.dataTables.min.css
dataTables.buttons.min.js
dataTables.responsive.js
responsive.dataTables.css
editor.dataTables.min.css
dataTables.editor.js
dataTables.min.css
dataTables.select.min.js
select.dataTables.min.css

I make an Ajax call and bring back some json data and populate the datatable. I have this working okay. I have now added the following to my code to show the Editor.

        var editor; 
        editor = new $.fn.dataTable.Editor( {
        table: '#dtQuotes',
        fields: [
        { label: 'First name', name: 'first_name' },
        { label: 'Last name',  name: 'last_name'  }
        // etc
    ]
    } );

I then add

        select: true,
        buttons: [
        { extend: 'create', editor: tableObject },
        { extend: 'edit',   editor: tableObject },
        { extend: 'remove', editor: tableObject }
    ],

I get the following error

TypeError: null is not an object (evaluating 'config[(T7x+s30+P5J)][K8]').
line 1002 column 160

If I just use select:true I don't see any row selectors.
I presume I have not got it configured properly.

Cheers

Steve Warby.

kthorngren

I think this:
{ extend: 'create', editor: tableObject },

Should be this:
{ extend: 'create', editor: editor },

You want to use your editor variable instead of tableObject. Not sure what tableObject is in your config.

Take a look at this example:
https://editor.datatables.net/examples/simple/simple.html

Kevin

classic12

Thanks kthorngren,

I'd tried too many options and lost track....

When I try and an edit a row I get the error

Unable to find row identifier For more information, please refer to https://datatables.net/tn/14.
line 532 column 273

As I am making an Ajax call first then populating the datatable with data: dataQuotes ( my returned data).

What is the syntax to replace ' ajax: "../php/staff.php", ' with my dataQuotes.

I cannot see anything in the docs or in the forum on this.

I have a unique key so I know I can use

idSrc: 'quoteID'

Cheers

Steve Warby

kthorngren

What is the syntax to replace ' ajax: "../php/staff.php", ' with my dataQuotes.

Here is the docs for the Editor ajax option:
https://editor.datatables.net/reference/option/ajax

The URL used should point to the code that can handle your editor updates to the database.

Kevin

classic12

I used the following and it works.

 req = Ajax("http://www.xxx.com/techy/my.php", "GET", 'someData',quotesReturned);

then get the data dataQuotes = JSON.parse(req.responseText);

editor = new $.fn.dataTable.Editor( {
        ajax : req,
        idSrc: 0,
        table: '#dtQuotes',
        fields: [
        { label: 'Title', name: '5' },
        { label: 'Internal',  name: '6'  }
        // etc
    ]
} );
        
        
        $("#dtQuotes").dataTable().fnDestroy(); 
        $('#dtQuotes').empty();
        tableObject  =  $('#dtQuotes').DataTable( {
        data: dataQuotes,
 columns: [
            { title: "QuoteID" },
            { title: "CustID" },
            { title: "Date" },
            { title: "Image" },
            { title: "Title" },
            { title: "Desc" },
            { title: "Internal" }
  ],
   dom: 'Bfrtip',
    select: true,
        buttons: [
        { extend: 'create', editor: editor },
        { extend: 'edit',   editor: editor },
        { extend: 'remove', editor: editor }
    ]


} );

When I select a row and edit the popup editor shows the as expected but when I select update I get the error

TypeError: undefined is not an object (evaluating 'opts[(f4P+t0J)][(P5J+r7Q.d3J+X40+x70)]').
line 621 column 32

So I am presuming my 'guess' of idSrc: 0 is not correct.

I have based this on the structure of the datatable where I can use

data :  dataQuotes
"targets": 0,
 "data": 0

Cheers

Steve Warby

classic12

I have tried
idSrc: "0" in the editor options and
rowId: "0" in the datable options.

allan

What does your Ajax function return - another function or a string?

Allan

kthorngren

TypeError: undefined is not an object (evaluating 'opts[(f4P+t0J)][(P5J+r7Q.d3J+X40+x70)]').
line 621 column 32

What does this line contain? Sounds like it references and undefined variable.

According to the docs idSrc: 0, should reference the first element in the array.

Kevin

classic12

Okay I have tried a different approach so I have the columns in the Jason that is returned.
I followed this example
http://itsolutionstuff.com/post/php-jquery-datatables-with-mysql-database-example-from-scratchexample.html

Swapping out my field names etc.

I now have this

        editor = new $.fn.dataTable.Editor( {
        ajax : 'http://www.toolfolks.com/techy/getSurplusQuotes2.php',
        idSrc: "InvID",
        table: '#dtQuotes',
        fields: [
        { label: 'Title', name: 'firstImage' },
        { label: 'Internal',  name: 'notesInternal'  }
    ]
} );

        $("#dtQuotes").dataTable().fnDestroy(); 
        $('#dtQuotes').empty();
        tableObject  =  $('#dtQuotes').DataTable( {
        rowId: 'InvID',
        "bProcessing": true,
        "sAjaxSource": "http://www.toolfolks.com/techy/getSurplusQuotes2.php",
        "aoColumns": [
              { mData: 'InvID' } ,
              { mData: 'CustID' },
              { mData: 'firstImage' },
              { mData: 'quoteTitle' },
              { mData: 'notesInternal' }
            ],

   dom: 'Bfrtip',
    select: true,
        buttons: [
        { extend: 'create', editor: editor },
        { extend: 'edit',   editor: editor },
        { extend: 'remove', editor: editor }
    ]


} );

It all works apart from when I change data in the editor and select update the datatable does not update ( but no errors).

I have added rowId: 'InvID' & idSrc: "InvID" but it does not resolve the problem.

example here http://www.toolfolks.com/editor/ hit button 'setData2' to test.

So near yet so far.

What am I missing here please.

Cheers

Steve Warby

kthorngren

Looks like your code at http://www.toolfolks.com/techy/getSurplusQuotes2.php is returning the full set of data. Does that script update your data when the editor sends the request?

For example I changed record 524 and the Editor sent this:

action:edit
data[524][firstImage]:http://www.toolfolks.com/techy/quoteImages/awaitingImage.png
data[524][notesInternal]:r

But the response was the full set of data and when I looked at the data 524 did not have the updated internal notes which should have been r. Does your script process the action edit from the HTTP request?

The response should be just the updated record. This doc explains the data interaction expected:
https://editor.datatables.net/manual/server

What server scripts are you using?

Kevin

classic12

Sorry guys I was approaching it completely the wrong way.

I have just purchased the editor and following the instructions there.