jQuery im Backend verwenden

[Peneo]

Hi,
ich möchte im Backend gerne jQuery verwenden. Damit es zu keinen Konflikt kommt, nutze ich die Funktion jQuery.noConflict();. jQuery funktioniert damit leider nur teilweise, während es auf jsfiddle weiterhin einwandfrei funktioniert.

Ich kann zum Beispiel ganz normal mit jQuery Klassen setzen, jedoch kann ich überhaupt keine Click Events ausführen/einfangen. Ist die Funktion .noConflict() auskommentiert, funktionieren die Click Events wieder wie gewollt, jedoch hat dann Contao Probleme damit, seine eigene JS Funktionen auszuführen.

Weiß hier einer mehr?

[Spooky]

Wie genau lässt du jQuery laden?

[Peneo]

Über die GLOBAL Variablen (Mootools) in der Config Datei.

Habe das Problem auch schon lösen können. noConflict() ist weiterhin vorhanden. jQuery hat Schwierigkeiten, nach gewissen Änderungen bestimmte Funktionen auszuführen, wie das folgende Beispiel

<script>
  $('#main').addClass('test');
  $('#main.test').on('click', function(){
    console.log('test');
  })
</script>

Muss deshalb Funktionen schon komplett anders schreiben, damit diese noch funktionieren, gleichzeitig aber MooTools nicht beeinflussen.

[mineralwa]

Hallo,

schreib statt $-Zeichen jQuery. Das $-Zeichen wird auch von den mootools verwendet.

<script>
  jQuery('#main').addClass('test');
  jQuery('#main.test').on('click', function(){
    console.log('test');
  })
</script> 

Die Mootools werden im BE verwendet.
siehe auch: https://brothers-project.de/contao-c...-mootools.html

[Spooky]

Über die GLOBAL Variablen (Mootools) in der Config Datei.

Habe das Problem auch schon lösen können. noConflict() ist weiterhin vorhanden. jQuery hat Schwierigkeiten, nach gewissen Änderungen bestimmte Funktionen auszuführen, wie das folgende Beispiel

<script>
  $('#main').addClass('test');
  $('#main.test').on('click', function(){
    console.log('test');
  })
</script>

Muss deshalb Funktionen schon komplett anders schreiben, damit diese noch funktionieren, gleichzeitig aber MooTools nicht beeinflussen.

So darfst du deinen Code nicht schreiben. noConflict() brauchst du außerdem auch nicht. Du musst folgendes machen:

(function($) {
    // …
})(jQuery); 

[Peneo]

@mineralwa habs wie @spooky gemacht, nur vergessen hier zu posten (sry)

@spooky wenn ich kein jQuery.noConflict() nutze, funktionieren die restlichen JS Funktionen in Contao nicht mehr (Beispiel Dropdown Menü oben rechts, PopUps, eigene Ajax Funktionen, ...).

[Spooky]

Über die GLOBAL Variablen (Mootools) in der Config Datei.

Die alte nc_jquery_in_backend Extension macht es zB so:

if (TL_MODE == 'BE')
{
    if (!is_array($GLOBALS['TL_JAVASCRIPT']))
    {
        $GLOBALS['TL_JAVASCRIPT'] = array();
    }
    array_unshift($GLOBALS['TL_JAVASCRIPT'], 'system/modules/nc_jquery_in_backend/assets/jquery.noconflict.js');
    $jquery_src = 'assets/jquery/core/' . reset((scandir(TL_ROOT . '/assets/jquery/core', 1))) . '/jquery.min.js';
    array_unshift($GLOBALS['TL_JAVASCRIPT'], $jquery_src);
} 

Es wird also ganz am Anfang des TL_JAVASCRIPT Arrays die jQuery library gesetzt und direkt danach

jQuery.noConflict(); 

[Peneo]

@spooky Habe mir das Plugin selbst schon angeschaut und auch ausprobiert, leider funktioniert das mit Contao 4.4 nicht mehr. Habe mir deshalb das Template angesehen wieso. Ich könnte es jetzt auch einfach im Template ändern, finde ich aber nicht ganz Updatesicher (auch wenn Templates wenig verändert werden).

Datei: be_main.html5

  ...
  <script><?= $this->getLocaleString() ?></script>
  <script src="<?= TL_ASSETS_URL ?>assets/mootools/js/mootools.min.js"></script>
  <script src="<?= TL_ASSETS_URL ?>assets/colorpicker/js/mooRainbow.min.js"></script>
  <script src="<?= TL_ASSETS_URL ?>assets/chosen/js/chosen.min.js"></script>
  <script src="<?= TL_ASSETS_URL ?>assets/simplemodal/js/simplemodal.min.js"></script>
  <script src="<?= TL_ASSETS_URL ?>assets/datepicker/js/datepicker.min.js"></script>
  <script src="<?= TL_ASSETS_URL ?>bundles/contaocore/mootao.min.js"></script>
  <script src="<?= TL_ASSETS_URL ?>bundles/contaocore/core.min.js"></script>
  <script src="<?= TL_ASSETS_URL ?>system/themes/<?= $this->theme ?>/hover.js"></script>
  <script><?= $this->getDateString() ?></script>
  <?= $this->javascripts ?>
  ...

[Spooky]

@spooky Habe mir das Plugin selbst schon angeschaut und auch ausprobiert, leider funktioniert das mit Contao 4.4 nicht mehr.

Ja, wegen der Pfad Angaben, das muss man für Contao 4 anpassen.

[typomat]

Ich muss mich hier auch mal einklinken.

Ich habe es mal so versucht:

app\Resources\contao\config\config.php

<?php

if (TL_MODE == 'BE') {
    $GLOBALS['TL_JAVASCRIPT'][] = 'dist/jquery-3.4.1.slim.min.js|static';
    $GLOBALS['TL_JAVASCRIPT'][] = 'dist/be.js|static';
}

Hat das jemand schon mal hinbekommen?