JQuery Modules in TYPO3-Backend-Modules

okleinecke · 19. Dezember 2016 12:57

Hi!

Hat jemand eine Ahnung, wie ich Select2 jQquery-Libs in einem Backend Modul eingebunden bekomme?
Ich habe bisher folgendes versucht : Typo3-jQuery per fluid deaktiviert :

<f:be.container loadJQuery="false">

dazu im Doc Header mein eigenes jQuery per normalem Script-Tag eingebunden und per $(document).ready + $.getScript dann die select2-jQuery lib geladen und per .done() nach dem getScript select2 auf den input-Feldern zu initialisieren versucht :

<script type="text/javascript">
			TYPO3.jQuery.noConflict('true');
			jQuery(document).ready(function($) {
				$.ajax({
					url: '//cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js',
					dataType: 'script',
					async: false
				}).done(function() {
					$('#lfrselect').select2({
						lang: 'de',
						data: [{'id':'Telefon','text': 'Telefon'},{'id':'Handy','text': 'Handy'},{'id':'Email','text': 'E-Mail'},{'id':'Fax','text': 'Fax'}],
						minimumResultsForSearch: -1
					}).val('Telefon').trigger("change");
				});
			});
			</script>

im Docbody ...
Bekomme jedoch nur : .select2() is not a function.
Hat jemand diese Lib schon einmal erfolgreich im Backend eingebunden ? Irgendwie ?
Hänge mittlerweile schon sehr lang an diesem Problem fest, wäre echt super wenn das jemand mal testen könnte der da mehr Erfahrung hat als ich =((.

okleinecke · 31. Januar 2017 10:38

Ach ja : per FireBug nochmal sichergestellt, dass es auch wirklich das per <script>-Tag eingebundene jQuery 3.1.0 ist, was das $.getScript ausführt.
Habe ich das falsch verstanden, oder sollte diese jQuery-Version dann nicht auch "normal" im global-scope verfügbar sein?
vielen Dank im Vorraus für eure Hilfe !

okleinecke · 17. Februar 2017 12:58 · Beste Antwort

So : Habe nun selber herausgefunden, wie das sauber klappt und möchte es einmal für andere kurz hier festhalten mit Beispielcode. Im Prinzip wird einfach ein Controller erstellt, der via PageRenderer die Libs lädt.
Dieser wird dann via Hook eingebunden. Achtung : damit werden diese Libs auch bereits für das Login geladen !!

File \Classes\Backend\BackendJSLoader.php

<?php
namespace <Vendorname>\<Extname>\Classes\Backend;

class BackendJSLoader {

	// JSbottom() abzuleiten führt zu Problemen

	public function getBackendJQuery() {
		if ($GLOBALS['BE_USER']->user['uid'] > 0) {
			$pageRenderer = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\TYPO3\CMS\Core\Page\PageRenderer::class);
			$pageRenderer->addCssFile('//cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css', $rel = 'stylesheet', $media = 'all', $title = '', $compress = false, $forceOnTop = false, $allWrap = '', $excludeFromConcatenation = true, $splitChar = '|');
			$pageRenderer->addCssFile('//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css', $rel = 'stylesheet', $media = 'all', $title = '', $compress = false, $forceOnTop = false, $allWrap = '', $excludeFromConcatenation = true, $splitChar = '|');
			$pageRenderer->addCssFile('../typo3conf/ext/<extname>/Resources/Public/CSS/<cssfilename>', $rel = 'stylesheet', $media = 'all', $title = '', $compress = true, $forceOnTop = false, $allWrap = '', $excludeFromConcatenation = false, $splitChar = '|');
			$pageRenderer->addJsFile('../typo3conf/ext/<extname>/Resources/Public/JavaScript/<custom js filename>', 'text/javascript', true, false, '', false, '|', false, '');
			$pageRenderer->loadRequireJsModule('TYPO3/CMS/<extname>/<jquery-ui-filename>','function() { TYPO3.jQuery.<postLoadFunctionName>(); }');
                        $pageRenderer->loadRequireJsModule('TYPO3/CMS/<extname>/<select2-filename>','function() { TYPO3.jQuery.<postLoadFunctionName>(); }');

		}
		return;
	}	
}

File ext_localconf.php :

$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['typo3/template.php']['preStartPageHook'][] = '<VENDOR>\<Extname>\Classes\Backend\BackendJSLoader->getBackendJQuery';

Im obigen Beispiel werden ein eigenes ("custom") JavaScript (welches zB die PostLoad-Functions für die Require-JS-Bibliotheken enthalten kann), sowie die JQery-Bibliotheken "Select2" und "JQuery-UI" und die zugehörigen CSS-Dateien (vom CDN, um Beispiel für external-Files zu geben) geladen.
Zu den JQuery-Bibiotheken ist zu sagen, dass diese, sofern Require-JS kompatibel, unter <Extension-Dir>/Resources/Public/Javascript abgelegt und dann automatisch, wie im Beispiel gezeigt, per LoadRequire-JSModule Funktion eingebunden werden können und MÜSSEN. Das Muss ergibt sich aus den Namespace-Konventionen, ich habe keine andere Variante gefunden diese sauber einzubinden !

Das obige Beispiel kann, sofern <> Markierte Platzhalter durch die jeweiligen echten Werte ersetzt werden, direkt so benutzt werden und ist bei mir im Produktiv-Einsatz (mit allen Browsern). Achtung : Ich habe bei den Platzhaltern auf die Groß-Kleinschreibung geachtet, diese muss so übernommen werden !
Außerdem ist zu beachten, dass die Aktivierung von Classen für die jeweiligen Felder dann natürlich über die PostLoad-Funktionen geschehen muss !