Hello there i have a problem using inline editor with DataTables.

ameer_nasir

Whenever i clicked on the buttons above it gives me following error.

"Uncaught TypeError: this[t0Q] is not a function"

colin

Hi @ameer_nasir ,

Is the trial version still in date, or have you bought a license?

There really isn't much to go on there,. We're happy to take a look if you could link to a running test case showing the issue we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

ameer_nasir

@colin yes the trial version is still in date
unfortunately the app is not live as i'm using codeigniter mvc framework so it's not possible for me to send you the live version but i can show you the screenshots

Everything else is working perfectly except the top three "new", "edit" and "delete" buttons whenever i click on any one of them it gave me the error i posted in my question

allan

Can you show me your Javascript initialisation for the DataTable and Editor please? Could you also use the debugger to give me a trace please - click the Upload button and then let me know what the debug code is?

Thanks,
Allan

ameer_nasir

Yes @Alan here is my JavaScript initialization for DataTables and Editor:

//Generating DataTable for Products
var editor;
$(document).ready(function() {
    editor = new $.fn.dataTable.Editor({
        "ajax" : ajaxurl + "Product_database/fetch_products",
        "table" : "#product_data",
        "fields" : [
            {
                "label": "Updated",
                "name" : "tickid"},
            {
                "label": "Verified",
                "name" : "IsVerified"},
            {   
                "label": "Problematic",
                "name" : "IsProblematic"},
            {   
                "label": "Front Image",
                "name" : "ImageMain"},
            {   
                "label": "ID",
                "name" : "ID"},
            {
                "label": "Category",
                "name" : "Category"},
            {
                "label": "Sub Category",
                "name" : "SubCategory"},
            {
                "label": "Brand",
                "name" : "Brand"},
            {
                "label": "Size",
                "name" : "Size"},
            {
                "label": "Description",
                "name" : "Description"},
            {
                "label": "Added By",
                "name" : "AddedBy"},
            {
                "label": "Uploaded On",
                "name" : "DateAdded"},
            {
                "label": "Condition",
                "name" : "ItemCondition"},
            {
                "label": "Season",
                "name" : "Season"},
            {
                "label": "BarCode",
                "name" : "BarCode"},
            {
                "label": "Updated BarCode",
                "name" : "UBarCode"},
            {
                "label": "BoxNumber",
                "name" : "BoxNumber"},
            {
                "label": "Other Images",
                "name" : "ImageOther"},
            {
                "label": "Attributes",
                "name" : "Attributes"},
            {
                "label": "Status",
                "name" : "Status"},
            {
                "label": "PriceMSRP",
                "name" : "PriceMSRP"},
            {
                "label": "PriceDiscounted",
                "name" : "PriceDiscounted"},
            {
                "label": "PriceVIP",
                "name" : "PriceVIP"},
            {
                "label": "PriceWS",
                "name" : "PriceWS"},
            {
                "label": "Cost",
                "name" : "Cost"},
            {
                "label": "BarCode Updated By",
                "name" : "NewBarCodeAddedBy"},
            {
                "label": "BarCode Updated Date",
                "name" : "NewBarCodeAddedOn"},
            {
                "label": "Data Updated By",
                "name" : "data_updated_by"},
            {
                "label": "Data Updated Date",
                "name" : "data_updated_date"},
            {
                "label": "ImagesUpdated By",
                "name" : "images_updated_by"},
            {
                "label": "Images Updated Date",
                "name" : "images_updated_date"
        }]
    });
    $('#product_data').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this );
    } );
    var table = $('#product_data').DataTable({
        "processing" : true,
        "language": {
            processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span> '},
        "serverSide" : true,
        "scrollY": "500px",
        "scrollX": true,
        "scrollCollapse": true,
        "pagingType": "input",
        dom: "Bfrtip",
        "ajax": {
            url: ajaxurl + "Product_database/fetch_products",
            type:"POST",
            "dataType": "json",
            "dataSrc": function (jsonData) {
              
              
              return jsonData.data;
            }
        },
        order: [[ 1, 'asc' ]],
        columns: [
            {
                data: null,
                defaultContent: '',
                className: 'select-checkbox',
                orderable: false,
                searchable: false
            },
            { 
                data: "tickid",
                render: function(data, type, row){
                    var green=  '<p style="color:green">&#10004</p>';
                    var red='<p style="color:red">&#10004</p>';
                    var blue='<p style="color:blue">&#10004</p>';
                    if (("data_updated_by" !== null)  && ("images_updated_by"!==null) && ("NewBarCodeAddedBy" !== null)){
                        return red+green+blue;
                    }
                    else if (("data_updated_by" !== null) && ("images_updated_by" !==null) && ("NewBarCodeAddedBy" === null)){
                        return  red+green;
                    }
                    else if (("data_updated_by" !== null) && ("images_updated_by" === null) && ("NewBarCodeAddedBy" !== null)){
                        return red+blue;
                    }
                    else if (("data_updated_by" === null) && ("images_updated_by" !== null) && ("NewBarCodeAddedBy" !== null)){
                        return  green+blue;
                    }
                    else if (("data_updated_by" !== null) && ("images_updated_by" === null) && ("NewBarCodeAddedBy" === null)){
                        return  red;
                    }
                    else if (("data_updated_by" === null) && ("images_updated_by" !== null) && ("NewBarCodeAddedBy" === null)){
                        return   green;
                    }
                    else if (("data_updated_by" === null) && ("images_updated_by" === null) && ("NewBarCodeAddedBy" !== null)){
                        return   blue;
                    }
                    else{
                        return null;
            }

                }
            },
            { 
                data: "IsVerified",
                render: function(data,type,row){
                    if(data === 1)
                        return "Yes";
                    else
                        return "No";
                }
            },
            { 
                data: "IsProblematic",
                render: function(data,type,row){
                    if(data === 1)
                        return "Yes";
                    else
                        return "No";},
                className: "highlighted_col"
            },
            { data: "ImageMain" },
            { data: "ID" },
            { data: "Category"},
            { data: "SubCategory" },
            { data: "Brand" },
            { data: "Size" },
            { data: "Description" },
            { data: "AddedBy" },
            { data: "DateAdded"},
            { data: "ItemCondition" },
            { data: "Season" },
            { data: "BarCode" },
            { data: "UBarCode" },
            { data: "BoxNumber" },
            { data: "ImageOther" },
            { data: "Attributes" },
            { data: "Status" },
            { data: "PriceMSRP" },
            { data: "PriceDiscounted" },
            { data: "PriceVIP" },
            { data: "PriceWS"},
            { data: "Cost" },
            { data: "NewBarCodeAddedBy" },
            { data: "NewBarCodeAddedOn" },
            { data: "data_updated_by" },
            { data: "data_updated_date" },
            { data: "images_updated_by"},
            { data: "images_updated_date"}
        ],
        select: {
            style:    'os',
            selector: 'td:first-child'
        },
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]
})
});

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

ameer_nasir

@Alan I'm getting this error in this file

whenever i click on any of above three buttons

allan

Try moving the var editor inside your document ready function. I'm not certain that will be the issue without being able to see the page, but I'm wondering if you are using that variable somewhere else as well and it is causing a conflict.

Thanks,
Allan