Access the editor variable inside the function

Khalid Teli

I am binding the datatable initialization inside a function like this

   function fetch_data( myDataa, sdate='', edate='')
 {
return $('#contractss').DataTable( {

         "retrieve": true,
        "processing": true,

      "ordering": [],
      "stateSave": true,
        "info":   true,
    "dom": 'Bfrtip',
    "ajax":

     {
      url:"../../controllers/editorform_fetch.php",
      type:'POST',
      data:{
    myDataa:myDataa, sdate:sdate, edate:edate }
    },


    "columns": [

      { data: "product_code" },
      { data: "product_name" },
       { data: "pack_size" },


    ],


    select: true,
    buttons: [
      { extend: "create", editor: editor },
      { extend: "edit",   editor: editor },
      { extend: "remove", editor: editor },
{
                extend: 'csv',
                text: 'Export CSV',
                className: 'btn-space',
                exportOptions: {
                    orthogonal: 'export'
                }
            },
            {
                text: 'Import CSV',
                action: function () {
                    uploadEditor.create( {
                        title: 'CSV file import'
                    } );
                }
            },
            {
                extend: 'selectAll',
                className: 'btn-space'
            },
            'selectNone',
        ]

  } );
}

And when call this function using the code below, my upload cvs button doesnt work an the error shows

Uncaught ReferenceError: uploadEditor is not defined

$(document).ready(function() {

// function for using column filtering 
function filterColumn ( i ) {
    $('#contractss').DataTable().column( i ).search(
        $('#col'+i+'_filter').val()
    ).draw();
}
var myVar = "setToImportCSV";

    editor = new $.fn.dataTable.Editor( {

    "ajax":

     {
      url:"../../controllers/editorform_fetch.php",
      type:'POST',
        data:{"myDataa":myVar}

   },

     "template": '#customForm',
        "table": "#contractss",

    "fields": [ {
        "label": "Product Code:",
        "name": "product_code"
      },
      {
        "label": "Product Name:",
        "name": "product_name"
      }
    ]
  } );


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



fetch_data( myDataa='', sdate='', edate='');
  tableActions();


});

I assume the error is on line 48 fetch_data() function as it is not able to access the editor variable.
How can I address this error?

Thank you

Khalid Teli

Sorry, I am was impatient.

Moved the Var uploadEditor inside function fetch_data(); and it is working. However, is it the right way of doing it?

 function fetch_data( myDataa, sdate='', edate='')
 {

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

return $('#contractss').DataTable( {

         "retrieve": true,
        "processing": true,
        "serverSide": true,
        "paging":   false,
         "scrollY":"800px",
          "scrollX":"100%",
          "scrollCollapse": true,

      "ordering": [],
      "stateSave": true,
        "info":   true,
    "dom": 'Bfrtip',
    "ajax":

     {
      url:"../../controllers/editorform_fetch.php",
      type:'POST',
      data:{
    myDataa:myDataa, sdate:sdate, edate:edate }
    },


    "columns": [

      { data: "product_code" },
      { data: "product_name" },
       { data: "pack_size" },
       { data: "member_name" },
       { data: "supplier_name" },
       { data: "m1" },
       { data: "m2" },
       { data: "m3" }


    ],




    select: true,
    buttons: [
      { extend: "create", editor: editor },
      { extend: "edit",   editor: editor },
      { extend: "remove", editor: editor },
{
                extend: 'csv',
                text: 'Export CSV',
                className: 'btn-space',
                exportOptions: {
                    orthogonal: 'export'
                }
            },
            {
                text: 'Import CSV',
                action: function () {
                    uploadEditor.create( {
                        title: 'CSV file import'
                    } );
                }
            },
            {
                extend: 'selectAll',
                className: 'btn-space'
            },
            'selectNone',
        ]

  } );

colin

I'm not too clear what you're trying to do. You're initialising the variable uploadEditor, but then you've got this:

      { extend: "create", editor: editor },
      { extend: "edit",   editor: editor },
      { extend: "remove", editor: editor },

I suspect that should be:

      { extend: "create", editor: uploadEditor },
      { extend: "edit",   editor: uploadEditor },
      { extend: "remove", editor: uploadEditor },

Colin

kthorngren

You will want to read about Javascript scoping.

Kevin

Khalid Teli

@colin sorry if it I didn't make it clear enough.

It makes sense to use{ extend: "create", editor: uploadEditor } than using just
{ extend: "create", editor: editor },
However, it still working with out using it.
The problem was when I was calling the function fetch_data(), it didnt read the variable defined to Upload CSV file uploadEditor.create . I think because it was defined outside the function.
What I did is I copied the the code below and pasted it inside the function fetch_data() , which was then accessible inside the function. This is working fine

var uploadEditor = new $.fn.dataTable.Editor( {
        fields: [ {
            label: 'CSV file:',
...

....
}

Khalid Teli

@kthorngren thank you. I think that was the problem. Not been able to access the variable defined outside the function. I will go through it