TYPO3 backend modul DataTable is no function

Question

I including in my extbase backend modul different assets in the Layout html. To init multiple DataTables:

$(dataTables[i]).DataTable(dataTableOptions);

<f:be.container 
    enableClickMenu="false"
    loadExtJs="false"
    enableExtJsDebug="true"
>

    <script type="text/javascript" src="{f:uri.resource(path:'js/Backend/lib/jquery-1.11.3.min.js')}"></script>
    <script type="text/javascript" src="{f:uri.resource(path:'js/Backend/lib/jquery-ui.min.js')}"></script>
    <script type="text/javascript" src="{f:uri.resource(path:'js/Backend/lib/jquery.dataTables.min.js')}"></script>
    <script type="text/javascript" src="{f:uri.resource(path:'js/Backend/lib/moment.min.js')}"></script>
    <script type="text/javascript" src="{f:uri.resource(path:'js/Backend/lib/jquery.multiselect.min.js')}"></script>
    <script type="text/javascript" src="{f:uri.resource(path:'js/Backend/lib/jstree.min.js')}"></script>

But after Updating to TYPO3 7.6.15, there is always

"TypeError: $(...).DataTable is not a function"

error. I tried different variations, but nothing works. I think, the problem will be the noconflict version of jquery in backend moduls. But i have no idea, to solve the problem. I hope you can help me

best regads Daniel

Answer 1

Well, after struggeling around, i solved my problem with the Typo3 requirejs notation. I think, the jQuery Typo3 noConflict header including will be the problem and i don`t know, why Typo3 uses not her own namespace, for thier methods. But i think, to include all my own/legacy js-librariers over requirejs will be the best practice.

At first, define in your js file (my: BackendModule.js placed in 'EXT:my_extension/Resources/Public/JavaScript') all prerequisites/dependencies, that have to be include:

 define([
'jquery',
'TYPO3/CMS/MyExtension/jquery-ui-widgets',
'moment',
'TYPO3/CMS/MyExtension/jquery.multiselect.min',
'datatables', ], function($, widgets, moment,multiselect) {[YOUR CODE]});

The namespace 'TYPO3/CMS/MyExtension/jquery-ui-widgets' map to the Path: 'EXT:my_extension/Resources/Public/JavaScript/jquery-ui-widgets.js'

After that, i have to include my Js-File in the template:

<f:be.container
        loadExtJsTheme="false"
        enableExtJsDebug="false"
        loadJQuery="false"
        jQueryNamespace="defaultNoConflict"
        includeRequireJsModules="{
            0:'TYPO3/CMS/MyExtension/BackendModule'
        }"