Cannot read property 'Editor' of undefined

Loly Toledo

Hi, everybody I am new with datatable, and I have this problem that is driving me crazy.
I am working with PHP codeigniter, and it is working wonderfully in Mozilla Firefox, but when I open it in Chrome it always gives me the same error.
"Uncaught TypeError: Cannot read property 'Editor' of undefined".

Please help me.

This are my libraries:

<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/css/editor/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/css/editor/dataTables.tableTools.css">
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/css/editor/editor.bootstrap.css">

<script languaje="javascript" src="<?php echo base_url(); ?>assets/js/editor/jquery.dataTables.js"></script>
<script languaje="javascript" src="<?php echo base_url(); ?>assets/js/editor/dataTables.tableTools.js"></script>
<script languaje="javascript" src="<?php echo base_url(); ?>assets/js/editor/dataTables.editor.js"></script>
<script languaje="javascript" src="<?php echo base_url(); ?>assets/js/editor/editor.bootstrap.js"></script>

This is my datatable:

function dibujaTablaResind(){
   
     idArea = $("#areaId option:selected").val();
     zona   = $("#zonaArea").val();
     objetivoSele = $("#idObjeResInd option:selected").val();
     var openVals;
     
        //-------------     CREANDO EL EDITOR       --------------//    
            editor = new $.fn.dataTable.Editor({
                "ajax":   "adminActividadPgoa/procesarResInd/"+ idArea+"/"+zona+"/"+objetivoSele,
                "table":  "#resInd",
                "idSrc":  "DATOS.id", 
                i18n: {
                create: {
                    "button": "Nuevo",
                    "title":  "<div class='alert alert-info'><strong>Crear Nuevo Resultado - Indicador - Fuente de Verificación</strong></div><div class='info'><strong>NO</strong> ingresar caracteres especiales</div>",
                    "submit": "Crear"
                },
                edit: {
                    "button": "Modificar",
                    "title":  "<div class='alert alert-info'><strong>Modificar Resultado - Indicador - Fuente de Verificación</strong></div>",
                    "submit": "Actualizar"
                },
                remove: {
                    "button": "Eliminar",
                    "title":  "<div class='alert alert-info'><strong>Eliminar Resultado - Indicador - Fuente de Verificación</strong></div>",
                    "submit": "Eliminar",
                    confirm: {
                            _: "<div class='alert'><strong>Esta seguro de eliminar este Resultado Indicador - Fuente de Verificación?</strong></div>",
                            1: "<div class='alert'><strong>Esta seguro de eliminar este Resultado Indicador - Fuente de Verificación?</strong></div>"
                    }
                },
                error: {
                    "system": "<div class='alert'>Un error se ha producido, contacte con el Administrador del Sistema</div>"
                }
            },
            "fields": [
                         {
                             "label":  "Numero",
                             "name":   "DATOS.numero",
                             "type":   "hidden"
                         },
                           {
                             "label":  "Id",
                             "name":   "DATOS.id",
                             "type":   "hidden"
                         },
                         {
                             "label":  "Resultado",
                             "name":   "DATOS.resind_resultado",
                             "type":   "text"
                         },
                         {
                             "label":  "Indicador",
                             "name":   "DATOS.resind_indicador",
                             "type":   "text"
                         },
                         {
                             "label":  "Fuente de Verificación",
                             "name":   "DATOS.resind_fuente",
                             "type":   "text"
                         },
                         {
                             "label":  "Año",
                             "name":   "DATOS.resind_anio",
                             "type":   "hidden"
                         }         
                    ]
        });
        //-----------     FIN EDITOR CREADO         -----------------// 
        //-----------   MANEJADOR DE INSTANCIAS     -----------------//
        editor.on( 'open', function (){
                    openVals = JSON.stringify( editor.get() );

                })
                .on( 'close', function () {
                    openVals = JSON.stringify( editor.get() );
                    oTable= dibujaTablaResind();
                })
                .on( 'preBlur', function () {
                      if ( openVals !== JSON.stringify( editor.get() ) ) {
                        return confirm( 'You have unsaved changes. Are you sure you want to exit?');
                }
                })
               .on('preSubmit', function(e, o, data, action){
                $.ajax({
                    "url":        '../login/login/get_ajax_is_login',
                    "type":       'POST',
                    data:       {},
                    "dataType":   'json',

                    success:    function(data){
                        if(data.login == false){
                            window.location = "../login/login/restart_login";
                        }

                    }                        
                });            
            });

                    //-------------     CREANDO LA TABLA        --------------//   
     
    oTable = $('#resInd').dataTable({
                "dom": domButton,
                "bSort": false,
                "select": true,
                "bDestroy": true,
                "ajax": "adminActividadPgoa/getResInd/" + idArea+"/"+zona+"/"+objetivoSele,
                "columns": [
                    {"data": "DATOS.numero"},
                    {"data": "DATOS.id", "visible": false},
                    {"data": "DATOS.resind_resultado"},
                    {"data": "DATOS.resind_indicador"},
                    {"data": "DATOS.resind_fuente"},
                    {"data": "DATOS.resind_anio", "visible": false}
                ],
                tableTools: {
                    "sRowSelect": "os",
                    "sSwfPath": "assets/DataTables-1.10.1/extensions/TableTools/swf/copy_csv_xls.swf",
                    "aButtons": [
                        {"sExtends": "editor_create","editor": editor, "sButtonText": "Nuevo",
                                    "formButtons": [
                                    {
                                        "label": 'Cancelar',
                                        fn: function () { this.close(); }
                                    },
                                    'Crear',
                                    ]
                        },
                        {"sExtends": "editor_edit", "editor": editor, "sButtonText": "Editar",
                                    "formButtons": [
                                    {
                                        "label": 'Cancelar',
                                        fn: function () { this.close(); }
                                    },
                                    'Editar',
                                    ]
                        },
                        {"sExtends": "editor_remove", "editor": editor, "sButtonText": "Eliminar", 
                                    "formButtons": [
                                    {
                                        "label": 'Cancelar',
                                        fn: function () { this.close(); }
                                    },
                                    'Eliminar'
                                ]
                        }
                    ]
                }
            });

        return oTable;
}

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

allan

The code you have above appears to be fine. Which specific line is the error occurring on? 9 in the code above is my guess? If so, it suggests that perhaps jQuery is being loaded twice on your page?

If you could link to the page I would be happy to take a look.

Allan

Loly Toledo

Dear Allan, it is correct, line 9 is the one that is giving me the problema.

At this moment I have my code in my localhost, but if is there an email where I could send you most of the code?

allan

My name @ this domain.net

Allan

Loly Toledo

Allan I just sent you the data.
Hope you have time to look at it.

Thanks.

Loly

allan

Can you "View source" on the rendered page and then send me the source that has been created please. There is a lot of PHP in the code you sent and I'm afraid it would take hours for me to set down and work through it to understand what is happening in it. The HTML for the created page will hopefully let me see the problem quickly.

Allan

Loly Toledo

Hi Allan, I just sent you your request.

Thanks again for all your help.

allan

Thanks. In the view source, I don't actually see DataTables or Editor being loaded at all (like your code above). However, I don't don't see either being used anywhere either!

Allan

Loly Toledo

I just sent you a new view source, that is calling DataTables and Editor.
I hope this time I got it right.

Sorry

allan

Could you also send me administrarTablaResIndView.js and a screenshot of the "Network" tab from your browser's inspector, showing all the files that have been loaded.

Alternatively, if you can publish it on the web at an address I can access, I'll be able to identify the issue immediately.

Allan

allan

Thanks for your latest e-mail. The screenshot with the network tab shows that jQuery is being loaded four times. That is likely to be the issue (although having said that, I don't see Editor or DataTables being loaded in that list). Either way, you really want jQuery to be loaded only once per page.

Allan

Loly Toledo

Thanks a lot Allan, I will be checking that.

I will be updating this problem ASAP.

Loly Toledo

Dear Allan I sent you an Email, because I checked what you seed on the code, but I couldn't find the error.

Thank you!!!

allan

In your e-mail you say:

But the only thing I get is a not working MENU.

But I'm afraid I don't fully understand what you mean by that. The table appears to be more or less working. It shows the buttons, filtering and sorting are disabled.

Could you clarify what aspect isn't working please?

Its worth noting that if you look in your browser's "Network" tab you will see it loading lots of Javascript files for every tab - Bootstrap has been loaded three times for me for example.

Allan

Loly Toledo

Hi Alan, on the email I sent you, I commented this libraries:

/js/uni-form-validation.jquery.js
/js/jquery-ui-1.10.4.custom.min.js
/js/jquery.blockUI.js
/js/funciones.js
/js/bootstrap.js
/js/bootstrap-dialog.js
/js/menu.js

I thought that those where the libraries that were duplicating the call to jquery, but in that exact moment the general menú, stoped working. So I uncommented it again.

As I have told you, the datatable workes perfectly, on mozzilla, but when I add, edit, or delete an Item on eny of the tables on Chrome, it seems to work until I hit the button, add, edit or delete, then the error pops on the development tools and after that you can not visualize any change on any of the tables.
If you add, edit or delete an Item, you don´t see what you have added, or edited or deleted.

That is the main problem.

I will validate the bootstrap calling.

Thanks a lot.

allan

Thank you for the clarification. jQuery is still being loaded multiple times on the page which is causing the issue.

Indeed, you'll be able to see from the screenshot that a lot of the files are loaded many times. Bootstrap is being loaded 3 times for example.

Allan

Loly Toledo

Dear Allan:

Hope you are ok, I have been sick, and this is why I haven´t updated anything.
I managed to fix the error on google chrome, by changing this lines:

.on( 'close', function () {
openVals = JSON.stringify( editor.get() );
oTable= dibujaTablaResind();
})

to

.on( 'close', function () {
openVals = JSON.stringify( editor.get() );
oTable.api().ajax.reload();
})

And it helped me with the "Cannot read property 'Editor' of undefined"."

But I have a new problem regarding the same issue, but in a Button that refreshes the table, but the error that is poping out is ().dataTable(); or ().DataTable(); is not a function, and I am using the following code:

function RefreshTable(tableId, urlData)
{
$.getJSON(urlData, null, function( json )
{
table = $(tableId).DataTable(); //this is the line that gives me problems in Chrome
oSettings = table.fnSettings();

table.fnClearTable(this);

for (var i=0; i<json.aaData.length; i++)
{
  table.oApi._fnAddData(oSettings, json.aaData[i]);
}

oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
table.fnDraw();

});
}

function AutoReload()
{
idArea = $("#areaId option:selected").val();
numIDArea = idArea.length;
if(numIDArea > 2)
{
idArea = idArea.substring(0, 2);
}else;
zona = $("#zonaArea").val();
programa = 161;

RefreshTable('#matriz'+pro, "contVigPgoa/getMatrizContVig/"+idArea+"/"+zona+"/"+programa);

setTimeout(function(){AutoReload();}, 30000);
}

Thanks again.

Best Regards

Loly

allan

Hi Loly,

I hope you are feeling better.

but the error that is poping out is ().dataTable(); or ().DataTable(); is not a function

That suggests that jQuery is still being loaded multiple times. I would suggest checking your browser's network panel to see if that is the case.

Allan

Loly Toledo

Thanks Allan,
I will look at it right away.

Regards
Loly