Selecteditor not showing after file import modal.

Mr Arslan Jawed

Select editor not showing after I choose file. Can any one help.

Here is my js code.

• Editor client script for DB table customer
• Created by http://editor.datatables.net/generator
  */

var editor;

// Display an Editor form that allows the user to pick the CSV data to apply to each column
function selectColumns ( editor, csv, header ) {
var selectEditor = new $.fn.dataTable.Editor();
var fields = editor.order();

for ( var i=0 ; i<fields.length ; i++ ) {
    var field = editor.field( fields[i] );

    selectEditor.add( {
        label: field.label(),
        name: field.name(),
        type: 'select',
        options: header,
        def: header[i]
    } );
}

selectEditor.create({
    title: 'Map CSV fields',
    buttons: 'Import '+csv.length+' records',
    message: 'Select the CSV column you want to use the data from for each field.'
});

selectEditor.on('submitComplete', function (e, json, data, action) {
    // Use the host Editor instance to show a multi-row create form allowing the user to submit the data.
    editor.create( csv.length, {
        title: 'Confirm import',
        buttons: 'Submit',
        message: 'Click the <i>Submit</i> button to confirm the import of '+csv.length+' rows of data. Optionally, override the value for a field to set a common value by clicking on the field below.'
    } );

    for ( var i=0 ; i<fields.length ; i++ ) {
        var field = editor.field( fields[i] );
        var mapped = data[ field.name() ];

        for ( var j=0 ; j<csv.length ; j++ ) {
            field.multiSet( j, csv[j][mapped] );
        }
    }
} );

}

    // Upload Editor - triggered from the import button. Used only for uploading a file to the browser
var uploadEditor = new $.fn.dataTable.Editor( {
    fields: [ {
        label: 'CSV file:',
        name: 'csv',
        type: 'upload',
        ajax: function ( files ) {
            // Ajax override of the upload so we can handle the file locally. Here we use Papa
            // to parse the CSV.
            Papa.parse(files[0], {
                header: true,
                skipEmptyLines: true,
                complete: function (results) {
                    if ( results.errors.length ) {
                        console.log( results );
                        uploadEditor.field('csv').error( 'CSV parsing error: '+ results.errors[0].message );
                    }
                    else {
                        uploadEditor.close();
                        selectColumns( editor, results.data, results.meta.fields );
                    }
                }
            });
        }
    } ]
} );

Following are the code I imported.

  <!-- Custom fonts for this template-->
  <link href="css/fontawesome-all.css" rel="stylesheet" type="text/css">

  <!-- Page level plugin CSS-->
  <link href="css/datatable.min.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="css/editor.bootstrap4.min.css">

  <!-- Custom styles for this template-->
  <link href="css/sb-admin.css" rel="stylesheet">

<!-- <link rel="stylesheet" type="text/css" href="css/datatable.min.css"> -->
<link rel="stylesheet" type="text/css" href="css/generator-base.css">

  <!-- Bootstrap core JavaScript-->
  <script src="js/jquery-3.2.1.min.js"></script>
  <script type="text/javascript" charset="utf-8" src="js/ckeditor.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/bs4-4.1.1/jqc-1.12.4/moment-2.18.1/dt-1.10.18/b-1.5.6/sl-1.3.0/datatables.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/dataTables.editor.min.js"></script>

colin

Hi @Mr Arslan Jawed ,

Select editor not showing after I choose file. Can any one help.

I don't understand the problem. Can you give some more information, please, and if possible, link to your page or create a test case. 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

kthorngren

There is was a problem with Bootstrap integration and the Editor regarding the import modals. See this thread for more details:
https://datatables.net/forums/discussion/comment/155893/#Comment_155893

You will need Editor 1.9.1 for the official fix. If this doesn't help then as Colin says please post a test case showing the issue.

Kevin