Initalizing, Field type plug-ins

tchristfort

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.

allan

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

tchristfort

Perfect, thanks a lot Allan