Editor Standalone collection trigger a reload by an external select field

Editor Standalone collection trigger a reload by an external select field

zesszess Posts: 9Questions: 4Answers: 0

I have a standalone collection to enter one date each. Later this should be extended by 3 more fields. Further I have an external select field over which one can select the language.

How can I do it now that when changing the language the collection is reloaded?
Is this possible?

Here my code

let editor;

function createPanel ( data )
{
    var id = data.DT_RowId;
    $(
        '<div class="panel" data-editor-id="'+id+'">'+
        '<i class="edit fa fa-pencil" data-id="'+id+'"></i>'+
        '<i class="remove fa fa-times" data-id="'+id+'"></i>'+
        '<dl>'+
        '<dd data-editor-field="lng_id" hidden="">'+data.lng_id+'</dd>'+
        '<dt data-editor-label="lvdate">reading:</dt>'+
        '<dd data-editor-field="lvdate">'+data.lvdate+'</dd>'+
        '</dl>'+
        '</div>'
    ).appendTo( '#unipanel' );
}

$(document).ready(function () {

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

        ajax: {
            url: "datatables/editor/ajax_dates.php",
            method: "POST",
            data:  {
                lng_id: $('#lng_id :selected').val()
            }
        },
        fields: [
            {
                label: 'Language',
                name: 'lng_id',
                type: 'hidden'
            },
            {
                label: 'reading',
                name: 'lvdate',
                type: "datetime",
                format: 'YYYY-MM-DD HH:mm'
            }
            // etc
        ]
    });

    // Create record - on create we insert a new panel
    editor.on( 'postCreate', function ( e, json ) {
        createPanel( json.data[0] );
    } );

    $('button.create').on( 'click', function () {
        editor
            .title('Create new record')
            .buttons('Create')
            .create()
            .set( 'lng_id', $('#lng_id :selected').val() )
            .submit();
    } );

    // Load the initial data and display in panels
    var ajaxData = $.ajax( {
        url: 'datatables/editor/ajax_dates.php',
        method: "POST",
        data: {
            lng_id: $('#lng_id :selected').val()
        },

        dataType: 'json',
        success: function ( json ) {
            for ( var i=0, ien=json.data.length ; i<ien ; i++ ) {
                createPanel( json.data[i] );
            }
        }
    } );

    $('#lng_id').on('change', function () {
        console.log('language change');
        ajaxData.reload();  // <-- this don't works
    } );

Answers

  • zesszess Posts: 9Questions: 4Answers: 0
    edited March 2023

    I will answer my question

    first create an new function with the same ajax request

    function ajax(){
        $.ajax( {
            url: 'datatables/editor/ajax_dates.php',
            method: "POST",
            data: ....
        });
    }
    

    then I can use them in

    $('#lng_id').on('change', function () {
            console.log('language change');
            ajax();
        } );
    
Sign In or Register to comment.