Skip the confirmation step and import data directly

Skip the confirmation step and import data directly

bfarkasbfarkas Posts: 181Questions: 48Answers: 0

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?

This question has accepted answers - jump to:

Answers

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin
    Answer ✓

    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

  • bfarkasbfarkas Posts: 181Questions: 48Answers: 0

    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.

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    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

  • bfarkasbfarkas Posts: 181Questions: 48Answers: 0

    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.

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    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

  • bfarkasbfarkas Posts: 181Questions: 48Answers: 0

    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 );
                            }
                        }
                    });
                }
            } ]
        } );
    
    
  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

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

    Allan

  • bfarkasbfarkas Posts: 181Questions: 48Answers: 0
    edited October 2020

    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.

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736
    Answer ✓

    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

  • bfarkasbfarkas Posts: 181Questions: 48Answers: 0

    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!

This discussion has been closed.