Javascript Edit Inline without Ajax backend datasource -- error

ttataryn

Going off a previously asked question: https://datatables.net/forums/discussion/29646/inline-edit-javascript-datatable-without-ajax-backend-datasource#Comment_79611

The user only really provided the Ajax code that he added in his DataTable definition, but I'm not quite sure what else I need to add to my code. For reference, I am converting a DataFrame to HTML then converting that over to a DataTable. Everything works fine, but I tried adding some of the code in for the inline editor -- javascript and css only, and tried including the CDN and storing it locally -- but I keep getting the error: Uncaught TypeError: $.fn.dataTable.Editor is not a constructor.

I've looked at some articles online about this error, but nothing has helped. Can provide rest of code if need be.

For instance I have the DataTable definition, then inside it I have this:

      rowId: 'id',
        select: true,
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]

and the editor fn:

editor = new $.fn.dataTable.Editor( {
    //     ajax: function ( method, url, data, success, error ) {
    //       if ( data.action === 'edit' ) {
    //         out = { data: [] };
    //         $.each( data.data, function ( key, val ) {
    //           val.id = key;
    //           out.data.push( val );
    //         } );
    //         success( out );
    //       }
    //     },
    //     idSrc: 'id',
    //     table: ".dataframe",
    //     fields: [ {
// and the fields go here

colin

Hi @ttataryn ,

You'd get that if you're not including the Editor files, so it would be worth checking you have both the JS and CSS being loaded.

Cheers,

Colin

ttataryn

@Colin thanks, that's what I figured was the issue, and tried different ways of including files but nothing has changed...

Here's what I last tried (combined the DataTable files from download page):

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/sl-1.2.6/datatables.min.css"/>

 <script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/sl-1.2.6/datatables.min.js"></script>
        <link rel="stylesheet" type="text/css" href="{{url_for('static', filename='Editor-1.7.4/css/editor.dataTables.css')}}">
    <script type="text/javascript" src="{{ url_for('static', filename='Editor-1.7.4/js/dataTables.editor.js')}}"></script>

Am I missing something? I'm including the main js file so don't see why I'm getting this error.

EDIT: the url_for jazz is flask/jinja stuff, and it's not an issue as when I inspect this element on HTML it looks like this:

<link rel="stylesheet" type="text/css" href="/static/Editor-1.7.4/css/editor.dataTables.css">

ttataryn

@Colin sort of answered my own question here. I found I had jQuery loaded twice. That fixed that issue -- no error in console. However, nothing is working in terms of editing nothing is working. I also noticed I don't have any buttons loaded -- this still isn't working for me for some reason as I tried to include the Excel export buttons and they never showed up.

colin

Hi @ttataryn ,

If you're not seeing the buttons, that could be because you haven't set dom, try setting it to dom: "Bfrtip" as in the example here.

If still no joy, it would be worth linking to your page or creating a test case so we can take a look. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin