Uncaught TypeError: l is undefined

jjnadoux

hello,
I have a problem with DataTable with ajax.
I have an error: "Uncaught TypeError: l is undefined"
I can't find where it came from !!

 $('#MyTableTracking').DataTable({
                    ajax: {
                        url : url,
                        type: "POST",
                        data: {"year":date},
                        dataSrc: "content",
                        dataType: "json",
                        columns:[
                           { data: 'dateCmde'},
                           { data: '"Ref exp"'},
                           { data: 'RefClient'},
                           { data: 'CmdeClient'},
                           { data: 'destinataire'},
                           { data: 'CP'},
                           { data: 'Ville'},
                          {  data: 'Pays'},
                           { data: 'typeTransport'},
                           { data:'poids'},
                           { data:'nsuivi'},
                           { data:'pnd'}
                        ],
                        // success: function (data) {
                        //     console.log('ajax ok:', data)
                        // }
                    },
                    order:[0,'desc'],
                    pageLength: 15,
                    responsive: true,
                    scrollY: "60vh",
                    scrollCollapse: true,
                    language: {
                        sProcessing: "Traitement en cours...",
                        lengthMenu:    "Afficher _MENU_ éléments",
                        info:           "Affichage de l'élement _START_ à _END_ sur _TOTAL_ éléments",
                        infoEmpty:      "Affichage de l'élement 0 à 0 sur 0 éléments",
                        infoFiltered:   "(filtré de _MAX_ éléments au total)",
                        infoPostFix:    "",
                        loadingRecords: "Chargement en cours...",
                        zeroRecords:    "Aucun élément à afficher",
                        emptyTable:     "Aucune donnée disponible dans le tableau",
                        search: "Rechercher :",
                        paginate: {
                            first:      "Premier",
                            previous:   "Précédent",
                            next:       "Suivant",
                            last:       "Dernier"
                        },
                        aria: {
                            sortAscending:  ": activer pour trier la colonne par ordre croissant",
                            sortDescending: ": activer pour trier la colonne par ordre décroissant"
                        }
                    },
                    dom: 'fBrtip',
                    buttons: [
                        {
                            extend:'excel',
                            text: 'Export Excel',
                            exportOptions: {columns: [0,1,2,3,4,5,6,7,8,9,10,11]}
                        },
                        {
                            extend: 'pdf',
                            text: 'Export Pdf',
                            orientation: 'landscape',
                            pageSize: 'A4',
                            exportOptions:{columns:[0,1,2,3,4,5,6,7,8,9,10,11]}
                        }]
                })

my view:

 <table id="MyTableTracking" class="display compact" style="width: 100%; font-size: 12px">
                    <thead>
                        <tr>
                            <th>date de la Commande</th>
                            <th>Référence Expédition</th>
                            <th>Référence Client</th>
                            <th>n° commande Client</th>
                            <th>Destinataire</th>
                            <th>Code postal</th>
                            <th>Ville</th>
                            <th>Pays</th>
                            <th>Type de transport</th>
                            <th>Poids en gramme</th>
                            <th>Suivi Colis</th>
                            <th>Retour PND ?</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>

            </table>

Thanks !

colin

Do you have an mdbootstrap datepicker on your page? There's some internet chatter on that. Otherwise, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. 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

jjnadoux

No I don't have a datepicker and I have another dataTable which works fine but without an ajax call.
I cannot reproduce the error again because it concerns data retrieved from the database, and data via a controller (symfony).

kthorngren

You defined your columns option inside the ajax option. Move it outside the ajax option.

Also note the ajax docs note this about using success:

success - Must not be overridden as it is used internally in DataTables. To manipulate / transform the data returned by the server use ajax.dataSrc (above), or use ajax as a function (below).

Kevin

jjnadoux

ok i modified my code and moved "columns: ...." outside of the ajax call. But still the same error!

kthorngren

Its hard to say without being able to work with the code. If you can't provide a test case for use then start by trying to narrow down where the error is. Maybe temporarily remove the code you think might be the problem. What happens if you comment out the ajax option?

Look at the traceback. Does it indicate any line numbers from your Javascript? You could post the full traceback from the error. Maybe that will give us some ideas. There isn't enough information that you posted to indicate the problem occurs with Datatables.

Kevin

jjnadoux

By removing the ajax.option I no longer have the error in the console.
I think it's relative to the format of my json that is returned by my Symfony controller but I can't figure out why.

kthorngren

Use the browser's network inspector to see the XHR response. Post the full response so we can take a look.

Kevin

jjnadoux

kthorngren

You have dataSrc: "content", but it looks like the JSON is not in an object at all. Try `dataSrc: "",.

Your columns.data names don't seem to match the object property names in the screenshot. They need to match.

Kevin

jjnadoux

It works !!! thank you very much !!