Editor send empty data when I invoke editor.edit() from the DataTable's child row

Vitaliz · December 2015

Hi, Allan.
I write application for working with freelancers. In the table I told about, I want select avtor for new orders from list of all freelancers.This list is shown in child row.

Debug code is: iwawuk

This is my code with editor declarations.

var tpar,crid,editor;
(function($){

$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: 'php/table.modx_vkrzakaz_sm.php',
        table: '#modx_vkrzakaz',
        i18n: {
......
        },
        fields: [

            {
                "label": "\u2116 \u0437\u0430\u043a\u0430\u0437\u0430",
                "name": "modx_vkrzakaz.no_zak"
            },
            {
                "label": "\u041a\u043b\u0438\u0435\u043d\u0442",
                "name": "modx_vkrklient.fio"
            },
            {
                "label": "\u0410\u0432\u0442\u043e\u0440",
                "name": "modx_vkrzakaz.avt_zak",
                                 "type": "select"
                        },
                       
            {
                "label": "\u0412\u0438\u0434 \u0437\u0430\u043a\u0430\u0437\u0430",
                "name": "modx_vkrzakaz.vid_zak",
                                "type": "select"
            },
            {
                "label": "Тема",
                "name": "modx_vkrzakaz.tema_zak"
            },
                        {
                "label": "Предприятие",
                "name": "modx_vkrzakaz.predpr_zak"
            },
                        {
                "label": "Срок заказа",
                "name": "modx_vkrzakaz.srok_zak"
            },
                        {
                "label": "Приоритет",
                "name": "modx_vkrzakaz.priority"
            },
            {
                "label": "\u042d\u0442\u0430\u043f 1",
                "name": "modx_vkrzakaz.is_step1",
                                "type": "checkbox",
                "separator": "|",
                "options": [
                    {label: '', value: '1'}
                ]
            },
            {
                "label": "\u042d\u0442\u0430\u043f 2",
                "name": "modx_vkrzakaz.is_step2",
                                "type": "checkbox",
                "separator": "|",
                "options": [
                    {label: '', value: '1'}
                ]
            },
            {
                "label": "\u042d\u0442\u0430\u043f 3",
                "name": "modx_vkrzakaz.is_step3",
                                "type": "checkbox",
                "separator": "|",
                "options": [
                    {label: '', value: '1'}
                ]
            },
            {
                "label": "\u042d\u0442\u0430\u043f 4",
                "name": "modx_vkrzakaz.is_step4",
                                "type": "checkbox",
                "separator": "|",
                "options": [
                    {label: '', value: '1'}
                ]
            },
            {
                "label": "\u042d\u0442\u0430\u043f 5",
                "name": "modx_vkrzakaz.is_step5",
                                "type": "checkbox",
                "separator": "|",
                "options": [
                    {label: '', value: '1'}
                ]
            },
            {
                "label": "\u042d\u0442\u0430\u043f 6",
                "name": "modx_vkrzakaz.is_step6",
                                "type": "checkbox",
                "separator": "|",
                "options": [
                    {label: '', value: '1'}
                ]
            },
            {
                "label": "\u042d\u0442\u0430\u043f 7",
                "name": "modx_vkrzakaz.is_step7",
                                "type": "checkbox",
                "separator": "|",
                "options": [
                    {label: '', value: '1'}
                ]
            },
            {
                "label": "\u0421\u0443\u043c\u043c\u0430 \u0437\u0430\u043a\u0430\u0437\u0430",
                "name": "modx_vkrzakaz.sum"
            },
            {
                "label": "\u041e\u043f\u043b\u0430\u0447\u0435\u043d\u043e",
                "name": "modx_vkrzakaz.sum_opl"
            }
        ]
    } );

Vitaliz · December 2015

And this is my table declaration

var table2 = $('#modx_vkrzakaz').DataTable( {
        dom: 'Bfrtip',
        ajax: 'php/table.modx_vkrzakaz_sm.php',
        columns: [
                        {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            {
                "data": "modx_vkrzakaz.no_zak"
            },
            {
                "data": "modx_vkrklient.fio"
            },
            {
                "data": "modx_vkravtor.name"
            },
            {
                "data": "modx_vkrvidzak.vidname"
            },
            {
                "data": "modx_vkrzakaz.tema_zak"
            }/*,
                        {
                "data": "modx_vkrzakaz.predpr_zak"
            },
                        
                        {
                "data": "modx_vkrzakaz.srok_zak"
            },
                          {
                "data": "modx_vkrzakaz.priority"
            }
                      
                        
                        
                         * ,
            {
                "data": "modx_vkrzakaz.sum"
            },
            {
                "data": "modx_vkrzakaz.sum_opl"
            },
            {
                data: null,
                className: "center",
                defaultContent: '1'
            },
            {
                data: null,
                className: "center",
                defaultContent: '<span class="show_msg">Просмотреть</span>'
            }*/
        ],
        language:
        {
......... 
            },
            select: {
                rows: {
                    _: "Выбрано %d строк",
                    0: "Щелкните по строке, чтобы выбрать её",
                    1: "Выбрана 1 строка",
                    2: "Выбрано 2 строки",
                    3: "Выбрано 3 строки",
                    4: "Выбрано 4 строки"
                }
            },
            "aria": {
                "sortAscending": ": активировать для сортировки столбца по возрастанию",
                "sortDescending": ": активировать для сортировки столбца по убыванию"
            }
        },
        lengthChange: false,
                select: true,
                 order: [[ 1, "asc" ]] ,
        buttons: [ 
            { extend: 'create', editor: editor },
            { extend: 'edit',   editor: editor },
            { extend: 'remove', editor: editor } 
        ] 
    } );
        // add child row support
            // Add event listener for opening and closing details
    $('#modx_vkrzakaz tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table2.row( tr );
                crid=tr.prop('id');
                console.log('Tuk-tuk..');

        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
                    
        }
        else {
            // Open this row
                        $("table tr>td:nth-child(2)").addClass('nozak');  //добавляем класс к первой ячейке. Отметим номер заказа
                        gde=$(this);
                        tpar=$('td.nozak',$(gde).parent()).text();
                       // tpar=$(this).parent().siblings('.nozak').text(); //смотрим номер заказа в текущей строке.
                        console.log(gde,'tpar',tpar);
            row.child( formatr(id_data,avt_data) ).show();
            tr.addClass('shown');
        }
    } );
$(document).on('click','button#set_avt', function(){
           editor.edit( 'row_2', false ); 
           editor.field( "modx_vkrzakaz.avt_zak").set("15");
           editor.submit();
        });
        $.ajax( {
            url: 'http://localhost/ed-15/vkr_avtor/php/table.modx_vkravtor.php',
            dataType: 'json',
            success: function ( json) {
                    avt_data=json.data;
            }
        } );
        $.ajax( {
            url: 'http://localhost/Ed-15/dt/php/table.modx_vkrzakaz_sm.php',
            dataType: 'json',
            success: function ( json) {
                    zak_data=json.data;
            }
        } );
        $.ajax( {
            url: 'http://localhost/ed-15/vkr_avtor/php/modx_vkravtor_id.php',
            dataType: 'json',
            success: function ( json) {
                    id_data=json.data;
            }
        } );
} );

}(jQuery));

Vitaliz · December 2015

Then I open child row i`ll try to modify parent table row with this code:

$(document).on('click','button#set_avt', function(){
           editor.edit( 'row_2', false ); 
           editor.field( "modx_vkrzakaz.avt_zak").set("15");
           editor.submit();
        });

'button#set_avt' is the button under "Автор" column in child row.
Editor write nothing... Then I test it in console, I see that editor send empty data, but than I edit row table with standart way ('Редактировать' button), all work clearly.

This is Php code for this table:

// DataTables PHP library and database connection
include( "lib/DataTables.php" );

// Alias Editor classes so they are easy to use
use
    DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\Join,
    DataTables\Editor\Upload,
    DataTables\Editor\Validate;


// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'modx_vkrzakaz' )
    ->fields(
        Field::inst( 'modx_vkrzakaz.no_zak' ) ,
        Field::inst( 'modx_vkrzakaz.kli_zak' )
            ->options( 'modx_vkrklient', 'id', 'fio' ),
        Field::inst( 'modx_vkrklient.fio' ),
        Field::inst( 'modx_vkrzakaz.avt_zak' )
            ->options( 'modx_vkravtor', 'id', 'name' ),
        Field::inst( 'modx_vkravtor.name' ),
        Field::inst( 'modx_vkrzakaz.vid_zak' )
            ->options( 'modx_vkrvidzak', 'id', 'vidname' ),
        Field::inst( 'modx_vkrvidzak.vidname' ),
        Field::inst( 'modx_vkrzakaz.is_step1' ),
        Field::inst( 'modx_vkrzakaz.is_step2' ),
        Field::inst( 'modx_vkrzakaz.is_step3' ),
        Field::inst( 'modx_vkrzakaz.is_step4' ),
        Field::inst( 'modx_vkrzakaz.is_step5' ),
        Field::inst( 'modx_vkrzakaz.is_step6' ),
        Field::inst( 'modx_vkrzakaz.is_step7' ),
        Field::inst( 'modx_vkrzakaz.tema_zak' ),
                Field::inst( 'modx_vkrzakaz.predpr_zak' ),
                Field::inst( 'modx_vkrzakaz.srok_zak' )
                ->validator( 'Validate::dateFormat', array(
                    "empty" => false,
                    "format" => Format::DATE_ISO_8601,
                    "message" => "Введите дату в формате гггг-мм-дд"
            ) )
            ->getFormatter( 'Format::date_sql_to_format', Format::DATE_ISO_8601 )
            ->setFormatter( 'Format::date_format_to_sql', Format::DATE_ISO_8601 ),
                Field::inst( 'modx_vkrzakaz.sum' ),
        Field::inst( 'modx_vkrzakaz.sum_opl' ),
        Field::inst( 'modx_vkrzakaz.priority' ),
                Field::inst( 'modx_vkrzakaz.avt_list' )
    )   
    ->leftJoin( 'modx_vkrklient','modx_vkrklient.id', '=', 'modx_vkrzakaz.kli_zak' )
    ->leftJoin( 'modx_vkravtor' ,'modx_vkravtor.id' , '=', 'modx_vkrzakaz.avt_zak' )
    ->leftJoin( 'modx_vkrvidzak','modx_vkrvidzak.id', '=', 'modx_vkrzakaz.vid_zak' )
    ->process( $_POST )
    ->json();

This is link to my case:

http://uchet.nuzenavtor.ru/Ed-15/dt/vkr_raspred.html

That's I do wrong?

Thanks for any advice,

Regards,
Vitaliy.

allan · December 2015

HI Vitaliy,

In your Javascript you have:

editor.edit( 'row_2' );

It should be:

editor.edit( '#row_2' );

The edit() method takes a row selector which can be a selector string or a tr node. In this case you are using a string so you need to make it an id selector.

Thanks,
Allan

Vitaliz · December 2015

Thanks, Allan.

It should be: editor.edit( '#row_2' );

This resolve my problem.

Editor send empty data when I invoke editor.edit() from the DataTable's child row

Editor send empty data when I invoke editor.edit() from the DataTable's child row

Replies

Howdy, Stranger!

Categories

DataTables

Editor send empty data when I invoke editor.edit() from the DataTable's child row

Editor send empty data when I invoke editor.edit() from the DataTable's child row

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables