Einzelne DCA Felder via Javascript "manipulieren" - Zählen der Zeichen

Druckbare Version

22.06.2017, 12:31
creativx

Einzelne DCA Felder via Javascript "manipulieren" - Zählen der Zeichen

Hallöchen zusammen,

ich würde gerne DCA-Felder im Backend, also ein Textfeld oder eine Textarea via Javascript ansprechend um die durch den Backend-User eingegebene Anzahl der Zeichen zu erfassen und z.B bei 140 Zeichen eine Meldung auszugeben. Dafür habe ich im großen und ganzen auch schon eine Idee - aber ich scheitere im Moment schon daran ein benutzerdefiniertes JavaScript einzubinden.

Ich versuche zunächst in der config.php folgendes:

PHP-Code:

$GLOBALS['TL_HOOKS']['parseBackendTemplate'][] = array('Projekt\Backend\Hooks', 'addScripts');

In der Methode addScripts passiert dann folgendes:

PHP-Code:

$GLOBALS['TL_JAVASCRIPT'][] = 'system/modules/projekt/assets/js/inputCount.js';

Jetzt habe ich das Problem, dass meine JS Datei lediglich direkt nach dem Backend-Login eingebaut wird. Sobald ich wo anders hin klicke, wird die JS-Datei nicht mehr im <head> eingebaut.

Ist diese Vorgehensweise total Blödsinn? Oder mach ich einfach nur was falsch?
Ich wäre euch sehr dankbar für ein paar Tips :)

Aso - und wenn zufällig jemand einen Workaround zum Einsatz von JQuery im Backend unter 3.5 hat - dann wäre ich sehr an einer Info interessiert :cool:

Danke schon mal...
22.06.2017, 12:35
the_scrat

Wenn du die Felder in einer bestimmten Maske brauchst, befindest du dich zu dem Zeitpunkt ja auch in irgendeiner Tabelle. Schau doch einfach mal welche Parameter du in der Adresszeile hast, wenn dieses Feld sichtbar ist, welches du manipulieren möchtest.

Dann fügst du in deine .config Datei einfach sowas in der Art ein

PHP-Code:

if(\Input::get('table') == 'tl_meinModulname' && \Input::get('id') >0) { $GLOBALS['TL_JAVASCRIPT'][] = 'system/modules/projekt/assets/js/inputCount.js'; }

Damit dürfte das Javascript nur innerhalb eines Datensatzes geladen werden :-)
22.06.2017, 13:22
creativx

Hey - perfekt. Das ist sicherlich ne einfachere Lösung. Danke Dir !

Jetzt muss ich nur noch ne Möglichkeit finden, wie ich im Backend Jquery ausführen kann. Irgendwie steht ich da jetzt auch auf dem Schlauch. noConflict ist klar - aber ich weiß nicht wie ich den wirksam einbauen soll. Hast du ne Idee?
22.06.2017, 13:31
the_scrat

Na was hast du denn aktuell in deiner eingebundenen js Datei drin stehen?

HTML-Code:

(function ($) { $(document).ready(function () { // Dein jQueryCode }); })(jQuery);
22.06.2017, 13:40
creativx

Also in der JS Datei habe ich versucht eine Funktion zu implementieren:

Code:

/** * Input Count */ $.noConflict(); ( function ( $ ) { $.fn.eghInputcount = function ( options ) { // Settings var settings = $.extend( { numberChats : 100, errorMessage : 'Die maximale Zeichenanzahl ist erreicht.' }, options || {}); countChars(this); /** * count Charts * @param object */ function countChars( object ) { object.keyup(function() { // Count // var inputLength=$(this).length; var input = object.val().length; // Controll Lengt if ( input >= 140 ) { // Alert alert('Bitte verwenden Sie nicht mehr wie 140 Zeichen!'); } }); } } }) ( jQuery );

Und dann wird quasi wenn die Funktion aufgerufen werden soll, folgendes ins HTML Injected:

Code:

<script type="text/javascript"> jQuery( document ).ready(function() { $('#ctrl_ce_egh_plaintext').eghInputcount({ }); }); </script>

Das ganze ist noch nicht ganz fertig programmiert, aber ich wollte einfach mal erst schauen ob mein gedachter Weg überhaupt funktioniert.

Ne Idee? :)
22.06.2017, 13:44
the_scrat

Probier doch erstmal was einfaches aus, einfach ein Element selektieren und die Farbe ändern oder so, bevor du hier einen riesen Code einfügst, bei dem viel schief gehen kann.

Außerdem wäre es sinnvoller das Feld einfach auf 140 Zeichen zu beschränken als eine Ausgabe zu machen. Er kann ja eh nicht mehr eingeben als die 140 Zeichen, weil bei 140 Zeichen eh ständig das Alertfenster öffnet.
22.06.2017, 13:55
creativx

Ah siehst, jetzt funzt es.

Code:

<script> var $j = jQuery.noConflict(); // $j is now an alias to the jQuery function; creating the new alias is optional. $j(document).ready(function() { $j( "div" ).hide(); });

Jetzt kann ich mal am Rest mich versuchen - mal schauen :) Das ganze muss so "komfortabel" sein, weil der Redakteur doof ist :)
22.06.2017, 14:27
Andreas

Ich binde meine eigenen Sachen so ins BE ein. In der system/config/initconfig.php

PHP-Code:

/* Some extra BE CSS and JS */ if(TL_MODE == 'BE') { $GLOBALS['TL_CSS'][] = 'files/css/_my_be.css'; $GLOBALS['TL_JAVASCRIPT'][] = 'files/js/_my_be.js'; }

Ich würde an deiner Stelle kein jQuery ins BE bringen. MooTools ist sehr einfach. Schau dir die Doku an https://mootools.net/core/docs/1.6.0 (1.5.2 im Contao Core). Vor allem, wenn du nur so ein paar einfache eigene Zeilen aufsetzen möchtest. Ist sogar einfacher als jQuery.
22.06.2017, 14:30
the_scrat

Die Einbindungsmethode und auch initconfig sind in diesem Fall aber nicht richtig.
Wenn er sein eigene Erweiterung hat, kann er es auch sauber in seine config.php einbinden

Und nur die Abfrage TL_MODE == 'BE' würde das Script die ganze Zeit im Backend einbinden. Daher ist eine punktgenaue Einbindung wesentlich besser.

Und jquery im Backend ist überhaupt kein Problem, hab ich mehrfach im Einsatz.
22.06.2017, 15:05
Andreas

Doch, die Einbindung ist richtig.

Habe nichts von einer Erweiterung gelesen, wenn es ne Erweiterung ist, gehört es natürlich in die Dateien dort.

Diese paar Zeilen JS dürften im BE nichts ausmachen. Mit |static kann man sie auch noch in die kombinierte JS inkluden. Wenn man zielgenau einbindet dann kein |static verwenden.

Die core.js https://github.com/contao/core/blob/...ncompressed.js und Theme JS https://github.com/contao/core/blob/...t/src/hover.js werden auch immer komplett über die kombinierte JS geladen und nicht zielgenau. IMHO ist so eine Spezifizierung hier nicht nötig.

Nein, jQuery im BE ist kein Problem aber unnötiger Overhead.
22.06.2017, 15:17
the_scrat

Er will einen Hook in einer config.php registrieren, also muss hier zwangsläufig eine eigene Erweiterung vorliegen.

Die core.js und Theme JS sind jedoch in mehrfacher Benutzung, so dass eine globale Einbindung schon sinn macht. Da haben wir wohl unterschiedliche Ansichten. Ich würde punktgenau einbinden (vielleicht tatsächlich ohne |static) und auch jquery würde sich punktgenau einbinden lassen. Ich würde es jedenfalls vorziehen anstatt mich mit mootools zu beschäftigen.