simple standalone is not that simple

Ficos

Link to test case: https://ficos.nl/standalone/account.php
Debugger code (debug.datatables.net): ujozic
Error messages shown: none
Description of problem:
I managed to load the data of 1 specific record. This data should be edited but the editor doesn't get the data. Data will be created in a new record and I want only to be able to edit the existing record.

$(document).ready(function () {
    
    function format_data(data) {
        var id = data.DT_RowId;
        
        $(
            '<div data-editor-id="'+id+'">'+
                '<dl>'+
                    '<dt>bankrekening:</dt>'+
                    '<dd data-editor-field="adm_client.bank">'+data.bank+'</dd>'+
                    '<dt>sjabloon:</dt>'+
                    '<dd data-editor-field="adm_client.sjabloon">'+data.sjabloon+'</dd>'+
                    '<dt>regels:</dt>'+
                    '<dd data-editor-field="adm_client.rownr">' + data.rownr + '</dd>' +
                    
                '</dl>'+
            '</div>'
        ).appendTo('#instellingen');
    }

    const config_editor = new DataTable.Editor({
        ajax: {
            url: 'php/standalone.php',
            type: "post",
            data: function (d) {
                d.dossier = 1840;  //curDossier;
            }
        },
        fields: [
            { label: 'client', name: 'clientID' },
            { label: 'bankrekening', name: 'bank' },
            {
                label: 'aantal regels:',
                name: 'rownr',
                type: 'select',
                options: [
                    { label: '5', value: '5' },
                    { label: '6', value: '6' },
                    { label: '7', value: '7' },
                    { label: '8', value: '8' },
                    { label: '9', value: '9' },
                    { label: '10', value: '10' },
                    { label: '11', value: '11' },
                    { label: '12', value: '12' },
                    { label: 'alles', value: 'all' },
                ]
            },
            { label: 'sjabloon', name: 'sjabloon' }
            
        ]
    });
    
    // Load the initial data and display
    $.ajax({
        url: 'php/standalone.php',
        success: function (json) {
            data = JSON.parse(json);
            format_data(data.data[0]);
        }
    });

    $('#edit').on('click', function () {
        config_editor
            .buttons({
                label: 'Save',
                fn: function () {
                    this.submit();
                }
            })
            .edit();
    });

});

I am using Foundation but I don't think the problem is there.
Basically I used the examples (simple standalone and collection editor).

Any ideas?
Jan

allan

Hi Jan,

What does standalone,php contain?

Also, you aren't passing anything to the edit() method. You need to pass the id to edit - in this case just id, which should help a bit.

Allan

Ficos

$client = isset($_POST['dossier']) ? $_POST['dossier'] : 1840;
    Editor::inst( $db, 'adm_client', 'id' )
    ->fields(
        Field::inst( 'clientID' ), 
        Field::inst( 'bank' ),
        Field::inst( 'betaaltermijn' ),
        Field::inst('betaalconditie'),
        Field::inst('sjabloon'),
        Field::inst('periode'),
        Field::inst('btw'),
        Field::inst('inkoopnr'),
        Field::inst('crediteurnr'),
        Field::inst('verkoopnr'),
        Field::inst('debiteurnr'),
        Field::inst('boekjr'),
        Field::inst('rownr')
    )
    ->where('clientID', $client)
    ->process( $_POST )
    ->json();

Ficos

Normally I use dataTables to do that (passing the id), but there is no dataTables present, so I guess I need to pass it in

$('#edit').on('click', function () {

?

Ficos

or do I need to add a table to the editor?
changed account.php:

<table id="config1">
        <tr><td>
            <div id="instellingen">…</div>
            <div class="button-group"><a class="button" id="edit">Wijzigen</a></div>
        </td></tr>
    </table>

added in config_editor:

table: "#config1",

which results in an error: s.settings()[0] is undefined

I am missing something here.

Jan

allan

Hi Jan,

Many thanks for the details. You don't need a DataTable, and you shouldn't reference one since you don't have one. But you do need to specify the primary key id that is being edited. Consider this example - on line 60 in the code shown below the table, I've used:

editor.title('Edit record').buttons('Save changes').edit($(this).data('id'));

In your case:

config_editor.edit('20') 

I think should work, although I could confirm that on your page due to the use of table.

Allan

Ficos

In your example (line 6-9) you define the div:

var id = data.DT_RowId;
$('<div class="panel" data-editor-id="'+id+'">'+

I removed the table and the reference to it.
The function format_data (in your example: createPanel is changed to:

var id = data.id;
$('<div data-editor-id="'+id+'">'+

but now I get an error: Could not find an element with data-editor-id or id of: row_20

I can't see why I get this error as the structure is the same.

Furthermore: I need the editrecord to have the actual record, but it is still empty. Assigning "20" to edit() saves the record for that id, but I need to have the record's ID here as it might change for another record (curDossier, which is not active in the example)

Jan.

rf1234

I have never managed to get Standalone Editing running for my purpose. My simple workaround is:
- set up a "dummy" datatable with just one arbitrary column and hide that data table simply by adding class "hidden" in its HTML

I was asking myself why I could never make it work. I think it means something different than what I think it should mean. The basic use case for me is editing additional data that don't directly belong to the primary data table that is displayed to the user: The user should be able to edit those data using a button belonging to the primary table, but those data shouldn't be displayed in its own data table.
That doesn't seem to be the use case that Allan has in mind for Standalone Editing.

allan

Hi Jan,

Thanks for updating the page. With a bit of debugging I think I've realised what is going wrong.

The dd defines the fields like this:

'<dd data-editor-field="adm_client.bank">'+data.bank+'</dd>'+

However, the Javascript defines it as:

{ label: 'bankrekening', name: 'bank' },

Notice the difference in the name: bank v adm_client.bank.

Remove the adm_client. from the dd elements and it should then work.

Allan