Standalone editor - without datatables but with database read/write

smetol

Is it possible to have functionality (standalone editor) like this:
* I can generate any html page (i.e. google maps), and object identified by table row_id
* I can open editor main form using api, sending row_id (editor.edit(row_id) )
* however, form is not initialised (because datatable is missing - standalone mode)
* when I put values in the form and save, it's ok, values are saved in the correct record on server

Can I initialize form somehow smartly ? I can see only two options now:
* I can write form values into html elements during the page generation
* I can make some ajax call (preferably same one as for datatables init) and fill the values via editor.set calls

I really would like to open same editor form as for datatables mode (which can be complex, with select2, upload forms)
Is it possible ?

smetol

This describes my problem as well:
https://datatables.net/forums/discussion/comment/108091/#Comment_108091

Maybe third solution would be "hidden" datatable ?

allan

When you say it isn't initialised, do you mean that it simply doesn't have any values in the fields? If so, you can set them using set() or field().set().

Alternatively, if you have the data in the HTML you can use the data-editor-field attribute to tell Editor what the value will be - see the docs here.

Allan

smetol

Ok, these are my option 2 and option 1...
I have an application with 20 editors (generated from config tables), with datatables.
I want to use same editors (editor forms, standalone editors) with different pages (i.e. google maps, without datatables), passing only row_id to standalone editors.

I am looking for efficient way to share code and ajax data when initializing editor forms.
I can make ajax calls on form_open like people do here, but perhaps I am replicating an funcionality already existing in the editor.

allan

The why to do it with code reuse is to use data-editor-id for the item you want to edit. You can have multiple on a single page, or just one at a time if you prefer (e.g. indicated by a GET parameter).

Allan

smetol

I got it working correctly using hidden datatable (containing only id column, but loading all ajax data). I cannot get it working with proposed data-editor-id attribute. What is wrong with my (simplified) code ?

<div class="btn-edit-alone" data-editor-id="row_2">edit row 2</div> &nbsp;
<div class="btn-edit-alone" data-editor-id="row_3">edit row 3</div> &nbsp;

<script>
var editor; // use a global for the submit and return data rendering in the examples
 
$(document).ready(function() {
    
    $( ".btn-edit-alone" ).click(function() {

            var rowId = $(this).data('editor-id');
            
            editor.buttons( {
                label: "Save",
                fn: function () { this.submit(); }
            });
            editor.edit('#'+rowId);
            return false;
    });
    
   
    editor = new $.fn.dataTable.Editor( {
        ajax: {
            url: "inc/editor2/ed.ibr-test.ajax.php",
        },
        fields: [
             {
                label: "id",
                name:  "tb_ibr_test.id",
            },
            {
                label: "meno",
                name:  "tb_ibr_test.name",
            },{
                label: "plne meno",
                name:  "tb_ibr_test.full_name",
            }
            
        ],
      });
});

allan

data-editor-id should be on the container of the form elements that you want to edit for a single row - see example here. If you have a button to trigger editing on each row, you'd need to set the data-editor-id attribute for wherever your container is before activating the editing.

If you have a link to the page or even just a screenshot, that would be useful so I can visually see what you are trying to do.

Allan