Initalizing, Field type plug-ins

Initalizing, Field type plug-ins

tchristforttchristfort Posts: 22Questions: 7Answers: 0
edited March 2018 in Editor

I am trying to build a simple field type plugin holding an input field. The purpose of this is to be able to build my own search in a customer db based on partial input in a customer field in the form. The plug in is loaded and working, however I cannot get proper initialization of the field. The plug in field set function is properly called when opening the form with the value from the table, however after this the filed seems to be cleared and then the form is drawn.

Plugin code:

(function ($, DataTable) {
 
if ( ! DataTable.ext.editorFields ) {
    DataTable.ext.editorFields = {};
}
 
var Editor = DataTable.Editor;
var _fieldTypes = DataTable.ext.editorFields;
 
_fieldTypes.mySearch = {
    create: function ( conf ) {
        var that = this;
 
        conf._input = $(
            '<div id="'+Editor.safeId( conf.id )+'">'+
               '<input type="text" class="custField"/>'+
                
            '</div>');

        $('input.custField', conf._input).keyup( function () {

           that.set( conf.name, $(this).val() );

           return false;
        } );
 
        return conf._input;
    },
 
    get: function ( conf ) {

    },
 
    set: function ( conf, val ) {
        console.log('Set: '+val);
        $('input.custField:text').val(val);
    },

};
 
})(jQuery, jQuery.fn.dataTable);  

var editor; 


function format ( d ) {
    // `d` is the original data object for the row
    assortment = parseInt(d.analysis.sieve1)+parseInt(d.analysis.sieve2);
    return '<table class="childTable" cellpadding="5" cellspacing="0" border="0">'+
        '<tr>'+
            '<td class="ch">Afg. skabelon:</td><td>'+d.analysis.crop_template+'</td>'+
            '<td class="ch">Sortering:</td><td>'+assortment+'</td>'+
            '<td class="ch">Stivelse:</td><td>'+d.analysis.starch+'</td>'+
            '<td class="ch">Spiring:</td><td>'+d.analysis.germination+'</td>'+
            '<td class="ch">Olie:</td><td>'+d.analysis.oil+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td class="ch">Tid:</td><td>'+d.analysis.time+'</td>'+
            '<td class="ch">Rensesvind:</td><td>'+d.analysis.impurity+'</td>'+
            '<td class="ch">Gluten:</td><td>'+d.analysis.gluten+'</td>'+
            '<td class="ch">Faldtal:</td><td>'+d.analysis.fn+'</td>'+
            '<td class="ch">Zeleny:</td><td>'+d.analysis.zeleny+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td class="ch">Bemærkning:</td><td colspan="9">'+d.analysis.comment+'</td>'+
        '</tr>'+
    '</table>';
}
$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: "analysis_server.php",
        table: "#analysis",
                template: '#analysisEditForm',
                formOptions: {
                    main: {
                        onReturn: false,
                        onBackground: false
                    }
                },
        fields: [ {
                label: "Nummer:",
                name: "analysis.number"
            }, {
                label: "Vejeseddel:",
                name: "analysis.weighing_closed"
            }, {
                label: "Kunde:",
                name: "analysis.customer",
                                type: "mySearch"
            }, {
                label: "Vare:",
                name: "analysis.item"
            }, {
                label: "Dato:",
                name: "analysis.date",
                                type: "date",
                                dateFormat: 'dd-mm-yy',
                                opts: {
                                    showOn: "button",
                                    buttonImage: 'jquery-ui-1.12.1/images/calendar.gif' ,
                                    showOtherMonths: true,
                                    showButtonPanel: true,
                                    changeYear: true,
                                    yearRange: '2004:2018'
                                }
            }, {
                label: "Vand pct:",
                name: "analysis.moisture"
            }, {
                label: "Protein:",
                name: "analysis.protein"
            }, {
                label: "Hektolitervægt:",
                name: "analysis.density"
            }, {
                label: "Sold 1:",
                name: "analysis.sieve1"
            }, {
                label: "Sold 2:",
                name: "analysis.sieve2"
            }, {
                label: "Sold 3:",
                name: "analysis.sieve3"
            }, {
                label: "Sold 4:",
                name: "analysis.sieve4"
            }, {
                label: "Rensesvind:",
                name: "analysis.waiste"
            }, {
                label: "Stivelse",
                name: "analysis.starch"
            }, {
                label: "Gluten:",
                name: "analysis.gluten"
            }, {
                label: "Spiring:",
                name: "analysis.germination"
            }, {
                label: "Faldtal:",
                name: "analysis.fn"
            }, {
                label: "Olie:",
                name: "analysis.oil"
            }, {
                label: "Zeleny:",
                name: "analysis.zeleny"
            }
                        
        ],
                i18n: {
                    create: {
                        button: "Ny",
                        title:  "Opret ny",
                        submit: "Opret"
                    },
                    edit: {
                        button: "Redigér",
                        title:  "Redigér Analyse",
                        submit: "Gem ændringer"
                    },
                    remove: {
                        button: "Slet valgte",
                        title:  "Slet valgte",
                        submit: "Slet",
                        confirm: {
                            _: "Er du sikker på at du vil slette %d linjer?",
                            1: "Er du sikker på at du vil slette 1 linje?"
                        }
                    },
                    error: {
                        system: "Hov, noget gik galt! Kontakt venligst system administratoren.."
                    },
                    multi: {
                        title: "Flere værdier valgt",
                        info: "Klik her for at redigére data for de valgte linjer.",
                        restore: "Annuller"
                    },
                    datetime: {
                        previous: 'Forrige',
                        next:     'Næste',
                        months:   [ 'Januar', 'Februar', 'Marts', 'April', 'Maj', 'Juni', 'Juli', 'August', 'September', 'October', 'November', 'December' ],
                        weekdays: [ 'Man', 'Tirs', 'Ons', 'Tors', 'Fre', 'Lør', 'Søn' ]
                    }
                }
    } );

 
            
    var table = $('#analysis').DataTable( {
        dom: "Bfrtip",
                "serverSide": true,
        ajax: { 
                    url: "analysis_server.php",
                    type: "POST"
                },
        columns: [
                        {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
                        },
            { data: "analysis.number" },
            { data: "analysis.weighing_closed" },
            { data: "analysis.customer" },
                        { data: "customer.name" },
            { data: "analysis.item" },
                        { data: "item.name" },
            { data: "analysis.date" },
                        { data: "analysis.moisture" },
                        { data: "analysis.protein" },
                        { data: "analysis.density" }
        ],
        select: {
                    style: 'single',
                    info: false
                },
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ],
                language: {
                    url: "DataTables/Danish.json"
                },
                "columnDefs":[
                    { "targets": [3,5], "visible": false },
                    { className: "dt-body-center", "targets": [7,8,9,10]}
                ],
                "order": [[1, 'asc']]
    } );
        

    $('#analysis tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
 
        if ( row.child.isShown() ) {
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );      
  
        
} );

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin
    Answer ✓

    Hi,

    Instead of:

    $('input.custField:text').val(val);

    Use:

            $('input.custField:text', conf._input).val(val);
    

    Its important to make sure that the context is set correctly for jQuery for two reasons:

    1. So the element can be selected if the form is not visible on the page (which is the case when an edit is started)
    2. In case you use multiple instances of the mySearch field type.

    Regards,
    Allan

  • tchristforttchristfort Posts: 22Questions: 7Answers: 0

    Perfect, thanks a lot Allan

This discussion has been closed.