Import CSV give None/Blank option and submit blank on submission
Import CSV give None/Blank option and submit blank on submission
bfarkas
Posts: 181Questions: 48Answers: 0
I am using the CSV Import set up in the example here
I am changing it slightly, as I want to control/premap the fields a bit for the most part. I want to provide an option of 'none' or blank though for the select. I have done so looking at posts from here and here
This works, but the problem is, when you get to the multi-edit form, any field on the 'None/Blank' column submits a 3. I can't figure out how to make this submit empty. Here is the code for the setup of the import:
// GMail CSV - Display an Editor form that allows the user to pick the CSV data to apply to each column
function selectGMAILColumns ( GMAILImport, csv, header ) {
header.push('');
selectGMAILImport = new $.fn.dataTable.Editor( {
fields: [
{
"label": "Prefix:",
"name": "prefix",
"type": 'hidden'
},
{
"label": "First Name:",
"name": "first_name",
"type": 'select',
"options": header,
"def": 'Given Name'
},
{
"label": "Middle Name:",
"name": "middle_name",
"type": 'hidden',
"def": ''
},
{
"label": "Last Name:",
"name": "last_name",
"type": 'select',
"options": header,
"def": 'Family Name'
},
{
"label": "Suffix:",
"name": "suffix",
"type": 'select',
"options": header,
"def": 'Name Suffix'
},
{
"label": "Title:",
"name": "title",
"type": 'select',
"options": header,
"def": 'Organization 1 - Title'
},
{
"label": "Company Name:",
"name": "company_name",
"type": 'select',
"options": header,
"def": 'Organization 1 - Yomi Name'
},
{
"label": "Home Phone:",
"name": "home_phone",
"type": 'hidden',
"def": ''
},
{
"label": "Mobile Phone:",
"name": "mobile_phone",
"type": 'select',
"options": header,
"def": 'Phone 1 - Value'
},
{
"label": "Work Phone:",
"name": "work_phone",
"type": 'hidden',
"def": ''
},
{
"label": "Fax:",
"name": "fax_phone",
"type": 'hidden',
"def": ''
},
{
"label": "Personal Email:",
"name": "personal_email",
"type": 'select',
"options": header,
"def": 'E-mail 1 - Value'
},
{
"label": "Work Email:",
"name": "work_email",
"type": 'hidden',
"def": ''
},
{
"label": "Street:",
"name": "street",
"type": 'hidden',
"def": ''
},
{
"label": "City:",
"name": "city",
"type": 'hidden',
"def": ''
},
{
"label": "State:",
"name": "state",
"type": 'hidden',
"def": ''
},
{
"label": "Postal Code:",
"name": "postal_code",
"type": 'hidden',
"def": ''
},
{
"label": "Source:",
"name": "source",
"className": "",
"type": "hidden",
"def": "Initial Market"
},
{
"label": "MOD Email:",
"name": "mod_email",
"type": "hidden",
"def": ""
},
{
"label": "Street 2:",
"name": "street2",
"type": "hidden",
"def": ""
},
{
"label": "Index Count:",
"name": "index_count",
"className": "",
"type": "hidden",
"def": "2"
}
]
});
selectGMAILImport.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.'
});
selectGMAILImport.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.
GMAILImport.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 = GMAILImport.field( fields[i] );
var mapped = data[ field.name() ];
for ( var j=0 ; j<csv.length ; j++ ) {
field.multiSet( j, csv[j][mapped] );
}
}
} );
}
// GMAIL CSV - Regular editor for the table
GMAILImport = new $.fn.dataTable.Editor( {
table: '#p200table',
ajax: function ( method, url, d, successCallback, errorCallback ) {
var output = { data: [] };
if ( d.action === 'create' ) {
// Create new row(s), using the current time and loop index as
// the row id
var dateKey = +new Date();
$.each( d.data, function (key, value) {
var id = dateKey+''+key;
value.DT_RowId = id;
localSave[ id ] = value;
output.data.push( value );
} );
}
else if ( d.action === 'edit' ) {
// Update each edited item with the data submitted
$.each( d.data, function (id, value) {
value.DT_RowId = id;
$.extend( localSave[ id ], value );
output.data.push( localSave[ id ] );
} );
}
else if ( d.action === 'remove' ) {
// Remove items from the object
$.each( d.data, function (id) {
delete localSave[ id ];
} );
}
// Store the latest `localSave` object for next reload
localStorage.setItem( 'localSave', JSON.stringify(localSave) );
// Show Editor what has changed
successCallback( output );
},
fields: [
{
"label": "Prefix:",
"name": "prefix",
"type": 'hidden'
},
{
"label": "First Name:",
"name": "first_name"
},
{
"label": "Middle Name:",
"name": "middle_name",
"type": 'hidden',
"def": ''
},
{
"label": "Last Name:",
"name": "last_name"
},
{
"label": "Suffix:",
"name": "suffix"
},
{
"label": "Title:",
"name": "title"
},
{
"label": "Company Name:",
"name": "company_name"
},
{
"label": "Home Phone:",
"name": "home_phone",
"type": 'hidden',
"def": ''
},
{
"label": "Mobile Phone:",
"name": "mobile_phone"
},
{
"label": "Work Phone:",
"name": "work_phone"
},
{
"label": "Fax:",
"name": "fax_phone",
"type": 'hidden',
"def": ''
},
{
"label": "Personal Email:",
"name": "personal_email"
},
{
"label": "Work Email:",
"name": "work_email",
"type": 'hidden',
"def": ''
},
{
"label": "Street:",
"name": "street",
"type": 'hidden',
"def": ''
},
{
"label": "City:",
"name": "city",
"type": 'hidden',
"def": ''
},
{
"label": "State:",
"name": "state",
"type": 'hidden',
"def": ''
},
{
"label": "Postal Code:",
"name": "postal_code",
"type": 'hidden',
"def": ''
},
{
"label": "Source:",
"name": "source",
"className": "",
"type": "hidden",
"def": "Initial Market"
},
{
"label": "MOD Email:",
"name": "mod_email",
"type": "hidden",
"def": ""
},
{
"label": "Street 2:",
"name": "street2",
"type": "hidden",
"def": ""
},
{
"label": "Index Count:",
"name": "index_count",
"className": "",
"type": "hidden",
"def": "2"
}
]
} );
var fields = GMAILImport.order();
for ( var i=0 ; i<fields.length ; i++ ) {
var field = GMAILImport.field( fields[i] );
}
// Generic CSV - Upload Editor - triggered from the import button. Used only for uploading a file to the browser
var uploadGMAILImport = 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 );
uploadGMAILImport.field('csv').error( 'CSV parsing error: '+ results.errors[0].message );
}
else {
uploadGMAILImport.close();
selectGMAILColumns( GMAILImport, results.data, results.meta.fields );
}
}
});
}
} ]
} );
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
Its not obvious where the
3would be coming from in the above I'm afraid. Could you give me a link to your page showing the issue? I'm also not clear on what you mean by "any field on the 'None/Blank' column" - I don't see a "None/Blank" column?Allan
Yeah, it is difficult to show a demo of my setup at this point and i am struggling to get something built in the demo area, but will try to get one.
I have added a blank option by doing
header.push('');
Then I use the new header as the choices for the option on the selects, so that there is a blank entry to choose on each drop down when selecting fields to map.
The 3 appears when i do not select a column, but the push value or blank. If I run:
field.multiSet(j, csv[j][mapped]);
in the console, I get a value of 3 back so I think it is related to that and hoping there is a way to get it to submit nothing to those fields in that case. Will circle back when I can get a proper test case though.
Alright, so I found an example colin had made of importing for someone else and cloned it and made the simple change of adding the push so that there is a blank option on the field drop downs when doing the matching. In this case it shows as a 7.
http://live.datatables.net/vukofome/1/
The goal here is to let the user leave a field blank for mapping, and no data be submitted to that field, but the others are created as normal.
I ran your example through the browser's debugger. If I choose the blank option for office I see this when the loop is processing the office column:
The statement
field.multiSet( j, csv[j][mapped] );, specificallycsv[j][mapped], doesn't point to a valid object in thecsvvariable so the value returned could be anything. You will need to check to make suremappedpoints to a valid object.One way is to do something like this:
For example:
http://live.datatables.net/vukofome/2/edit
Or you can use a more comprehensive test before using the
field.multiset()method.Kevin
This solves it exactly in my use case, you are the man!!
Thanks!!