[TYPO3-german] JavaScript Bibliotheken für Backend Modul | DataTable

[Daniel Möbius]

Hi,

ich habe für Typo 6.2 eine Extension mit einem Backend Modul entwickelt. Dabei werden verschiedene JavaScript-Bibliotheken, wie jQuery, jQuery Ui, DataTables, moment, multiselect und meine eigenes Modul geladen. Das habe ich über folgenden Code im Layout eingebunden:

<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>

Beim Aktualisieren auf Typo3 7.6.16 LTS funktioniert das ganze nicht mehr. Zwar bekomme ich bei der jQuery-Versions ausgabe die 1.11.3 zurück geliefert. Jedoch wirft er mir noch den Fehler "d.widget is not a Function". Wenn ich das ganze auskommentiere wird mein eigenes Modul ausgeführt. Da tritt jedoch der "Cannot set property 'moment' of undefined" bzw. "$(..).DataTable is not a Function" bzw. "jQuery(..).DataTable is not a Function" auf. Meine Vermutung ist, das es an der vom Backend eigenständig geladenen jQuery 2.1.4 liegt. Jedoch kann ich diese nicht deaktivieren.

Wie kann ich die Bibliotheken im Backend sauber laden bzw. gibt es eine Möglichkeit, DataTables im Backend zu verwenden?

Viele Grüße
Daniel

[Christian Hackl]

Wenn du denkst es liegt an 2 jQuery Versionen die gleichzeitig geladen werden, warum kommentierst du dann deine Zeile nicht mal aus und probierst es?

[Daniel Möbius]

Quote: Christian Hackl (chris30) wrote on Wed, 22 March 2017 18:15
----------------------------------------------------

Post by Christian Hackl
Wenn du denkst es liegt an 2 jQuery Versionen die gleichzeitig geladen werden, warum kommentierst du dann deine Zeile nicht mal aus und probierst es?

----------------------------------------------------

Weil es daran nicht liegt ;) Habe ich entsprechend auch getestet. Jedoch scheint die noConflict-Variante, die das Typo3 Backend einbindet, ein Problem zu sein. Ich konnte das Problem lösen, indem ich über requirejs alle Einbindungen gelöst habe.

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

Und im Backend nur noch

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

mein BackendModule.js Datei einbinde. Diese muss im Pfad Ext:my_extension/Resources/Public/JavaScript hinterlegt werden. Zudem musste ich noch eine JS-Bibliothek anpassen, da diese in der Generierung des Moduls so nicht mit requirejs konform war.

Warum es nicht mehr möglich ist, Alles wie bisher einzubinden und Typo3 Funktionalitäten einen eigenen Namespace zu verwenden, anstatt gleich alles zu Kastrieren, bleibt mir ein Rätsel.

Viele Grüße
Daniel