Skip the confirmation step and import data directly

bfarkas

Hi,
How would you skip the third step form this example:
https://editor.datatables.net/examples/extensions/import.html

And after checking the columns align correctly, immediately import the data, skipping the multiedit form?

allan

In the example it uses:

    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] );
            }
        }
    } );

The easiest option is to add editor.submit() after the for loop. That will immediately submit the form.

Allan

bfarkas

Perfect and simple.
Would there be an easy way to hide the second step too? I would like to have it, but probably present it conditionally, so looking for something similar which I could then adjust into an if statement, but just knowing where the submit would go would get me there.

allan

Sure - when it calls selectEditor.create({ you can pass in a second argument after the object - false. That will cause the form not to show.

Allan

bfarkas

Hmm, but that doesn't seem to still submit the data to the table, just hides all the steps.
The goal is that under certain conditions (known file) to just upload and let it come straight into the table, while on others offer the ability to map still. In both cases the data should still get to the table.

allan

Oh yes, sorry, I forgot to say that you'd need to submit it as well, similar to what was done for the other form!

Allan

bfarkas

Hmm. I think i am missing something:

// Display an Editor form that allows the user to pick the CSV data to apply to each column
    function selectColumns ( p200Importer, csv, header ) {
        var selectEditor = new $.fn.dataTable.Editor();
        var fields = p200Importer.order();
 
    for ( var i=0 ; i<fields.length ; i++ ) {
        var field = p200Importer.field( fields[i] );
 
        selectEditor.add( {
            label: field.label(),
            name: field.name(),
            type: 'select',
            options: header,
            def: header[i]
        } );
    }

 
    selectEditor.create(false,{
        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.submit()
 
    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.
        p200Importer.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 = p200Importer.field( fields[i] );
            var mapped = data[ field.name() ];
 
            for ( var j=0 ; j<csv.length ; j++ ) {
                field.multiSet( j, csv[j][mapped] );
            }
        }
        p200Importer.submit()
    } );
}
 /* 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',
            className: '',
            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( p200Importer, results.data, results.meta.fields );
                        }
                    }
                });
            }
        } ]
    } );

allan

You'd need to put it after the submitComplete event listener is added. Otherwise it will submit before that listener is active.

Allan

bfarkas

I still think I am missing something, the listener is for the third page I thought?
If I insert it there I still get the same result:

// Display an Editor form that allows the user to pick the CSV data to apply to each column
    function selectColumns ( p200Importer, csv, header ) {
        var selectEditor = new $.fn.dataTable.Editor();
        var fields = p200Importer.order();
  
    for ( var i=0 ; i<fields.length ; i++ ) {
        var field = p200Importer.field( fields[i] );
  
        selectEditor.add( {
            label: field.label(),
            name: field.name(),
            type: 'select',
            options: header,
            def: header[i]
        } );
    }
 
  
    selectEditor.create(false,{
        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) {
        selectEditor.submit()
        // Use the host Editor instance to show a multi-row create form allowing the user to submit the data.
        p200Importer.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 = p200Importer.field( fields[i] );
            var mapped = data[ field.name() ];
  
            for ( var j=0 ; j<csv.length ; j++ ) {
                field.multiSet( j, csv[j][mapped] );
            }
        }
        p200Importer.submit()
    } );
}
 /* 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',
            className: '',
            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( p200Importer, results.data, results.meta.fields );
                        }
                    }
                });
            }
        } ]
    } );

Sorry I am having trouble wrapping my head around this.

kthorngren

I think what Allan is saying is to do this:

    selectEditor.create(false,{
        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.
        p200Importer.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 = p200Importer.field( fields[i] );
            var mapped = data[ field.name() ];
  
            for ( var j=0 ; j<csv.length ; j++ ) {
                field.multiSet( j, csv[j][mapped] );
            }
        }
        p200Importer.submit()
    } );

    selectEditor.submit()

That way the submitComplete event is established before using submit.

Kevin

bfarkas

Ah, so obvious!!! I have been trying to insert it all over and could have sworn I tried there. The outside perspective is allows useful when too close I guess.

Thank you Allan for putting up with me and Kevin for bringing it home!