Editor Upload: How to add files-array without initial AJAX-request?

deesen

Hi, I will order a developer license soon as I plan to use Editor in my own little CMS, its too nice. But I want to be sure I can manage every issue. I am developing on localhost right now so I cannot give a demo-link.

I want to make small tables editable, without using the PHP-library, and without AJAX-requests so changes will only be saved to database after pressing a save-button. For this reason I modified the "localstorage"-example so it fills a <textarea> instead of localStorage with a JSON-string.

I definetly need the upload-feature. The server-response after upload etc is working but I could not provide the files-array when initialising DataTables. I am using Javascript sourced data / data-option to provide table-content. But how to add files-array? It seems only ajax-option can natively fill this array, but not data. I tried initialising Datatables with options like below but nothing worked:

ajax: function ( method, url, d, successCallback, errorCallback ) {
    var data = ...data + files...
    successCallback(data)
}

initComplete: function ( settings, json ) {
  table.context[0].json.files = ...
}

Is there any workaround available? Thanks in advance!

allan

Hi,

What you could do is attach the files information array to $.fn.dataTable.Editor.files. That is an object where each parameter name in the object is the "table" name for where the files are stored.

The file() method should then work like in the examples.

I'm really impressed you got all that working!

Allan

deesen

Fantastic, it seems that did the job. Will keep you posted in case I face other issues and order dev-license soon next week.

editor = new $.fn.dataTable.Editor( {
                table: ...
});

// With PHP´s json_encode():
$.fn.dataTable.Editor.files = JSON.parse('". json_encode($filesArr) ."');

// Hardcoded JSON-string example
$.fn.dataTable.Editor.files = JSON.parse('{"files":{"17":{"id":17,"category":"productattr_colors","fileOriginal":"test.jpg"}}}');

deesen

Unfortunately its not sorted out completely but getting better! At table-initialization images will not be displayed : "TypeError: table is undefined".

If I add "&& table" to the render-function, error is solved but images will be displayed after upload only. Editing a row shows the image at once so the editor recognizes my injected array, but Datatables does not at initialization. This is my actual render-option :

render: function ( file_id ) {
  return file_id && table ?
    '<img src="'+table.file( 'files', file_id ).fileOriginal+'"/>' :
    null;
} 

More detailed

$.fn.dataTable.Editor.files = JSON.parse('{"files":{"17":{"id":17,"category":"productattr_colors","fileOriginal":"test.jpg"}}}');

var table = $('#attr_color').DataTable( {
...
  data: $.map( todo, function (value, key) {
    return value;
  }),
  columns: [
    { data: 'order', className: 'reorder'},
    { data: 'image_id',
      render: function ( file_id ) {
        return file_id ?
        '<img src="'+table.file( 'files', file_id ).fileOriginal+'"/>' :
        null;
      }, 
...
});

allan

This is a slightly tricky one... The problem is that when the render function executes the table variable has not been defined (since it is still being executed). This is a problem in your code above because its initialisation is synchronous. In most cases, Editor tables will load data asynchronously, which mitigates this.

What you could do is reorganise the code a little:

$.fn.dataTable.Editor.files = JSON.parse('{"files":{"17":{"id":17,"category":"productattr_colors","fileOriginal":"test.jpg"}}}');
 
var table = $('#attr_color').DataTable( {
...
  columns: [
    { data: 'order', className: 'reorder'},
    { data: 'image_id',
      render: function ( file_id ) {
        return file_id ?
        '<img src="'+table.file( 'files', file_id ).fileOriginal+'"/>' :
        null;
      },
...
});

table.rows.add( $.map( todo, function (value, key) {
    return value;
} ) ).draw();

i.e. let the table be created empty and then add the data.

Allan

deesen

Thank you very much, no more errors and everything works like expected now.