Datepicker funzt ned in Catalog Edit Modul

**Kahmoon** · 25.01.2012, 11:49

Hallo zusammen,

beschäftige mich gerade das erste mal mit dem FE Edit Modul... Wenn hier der Feldtyp "Datum" verwendet wird, ist die Darstellung dieses Felds total zerschossen und im Head kommt eine Ausgabe des Javscriptcodes ohne Script Tags. Die Datumsicons sind auch nicht bei den zugehörigen Feldern....siehe Screenshot.

HTML-Code:

<body id="top" class="win firefox fx9">
window.addEvent('domready', function() { new DatePicker('#ctrl_laufzeit_von', { allowEmpty: true, toggleElements: '#toggle_laufzeit_von', pickerClass: 'datepicker_dashboard', format: 'd.m.Y', inputOutputFormat: 'd.m.Y', positionOffset: { x:130, y:-185 }, startDay: 1, days: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'], dayShort: 2, months: ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'], monthShort: 3 }); }); 
window.addEvent('domready', function() { new DatePicker('#ctrl_laufzeit_bis', { allowEmpty: true, toggleElements: '#toggle_laufzeit_bis', pickerClass: 'datepicker_dashboard', format: 'd.m.Y', inputOutputFormat: 'd.m.Y', positionOffset: { x:130, y:-185 }, startDay: 1, days: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'], dayShort: 2, months: ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'], monthShort: 3 }); });
<link rel="shortcut icon" href="tl_files/mkm/graphix/favicon.ico" type="image/x-icon">
<div id="wrapper">

Jemand ne Idee? Liegt das an HTML5 Templates?? Ich verwende hier das default Template (catalog_edit)..keine Anpassungen bisher.

Contao 2.10.4
Mootools lokale Datei

Gruß

**Kahmoon** · 26.01.2012, 08:22

Keiner ne Idee?

Hab jetzt mal einen Link dazu: http://bit.ly/zNVuz4

**MacKP** · 26.01.2012, 08:31

Ah, mit Link kann man schon besser arbeiten:

da fehlt das <script> im Header um das JavaScript ^^

Viele Grüße

**Kahmoon** · 26.01.2012, 10:41

Jepp, das hatte ich schon rausgefunden/geschrieben. Aber das wird ja durch Contao / Catalog erzeugt. Wenn ich im Firebug dann die Scripttags hinzufüge geht es leider trotzdem nicht. Buttons sind dennoch falsch platziert und haben auch keine Funktion.

Braucht es hier vielleicht noch ein weiteres Moo Script? Hab den Picker noch nie im Frontend verwendet.

**Kahmoon** · 27.01.2012, 08:31

Darf ich hier noch mal schieben? Ich komme irgendwie nicht weiter und eigentlich kann ich auf diese Felder nicht verzichten. Hier geht es am Ende um die Laufzeitdokumentation von Werbemitteln....sprich ein Datumsfeld ist Pflicht

Gruß
Frank

***xchs*** · 27.01.2012, 08:49

Wie MacKP schon geschrieben hat: Es fehlen die <script>-Tags.

Die müssten in der ModuleCatalogEdit.php ergänzt werden. Ein Ticket wäre dann auch noch anzulegen.

**Kahmoon** · 27.01.2012, 09:26

Das ist leider nicht die Lösung. Das hatte ich ja schon via Firebug hinzugefügt. Keine Verbesserung wenn ich es in die PHP Datei schreibe. Jetzt ist zwar die JS Ausgabe im Head weg...aber die Buttons haben weiterhin keine Funktion und sind falsch platziert. Irgendwas andres muss noch gemacht werden

Das Feld beschreibung lädt auch keine TinyMCE Felder...ich vermute das hier irgendwelche JS Dateien nicht geladen werden. Im Quelltext wird auf jeden Fall ein TinyMCE Aufruf getätigt.

HTML-Code:

tinyMCE.init({
  mode : "none",
  height : "300",
  language : "de",
  elements : "ctrl_description",
  remove_linebreaks : false,
  force_hex_style_colors : true,
  fix_list_elements : true,
  fix_table_elements : true,
....

***xchs*** · 27.01.2012, 09:30

Das DataPicker-Plugin fehlt natürlich auch noch:

PHP-Code:


$GLOBALS['TL_JAVASCRIPT'][] = 'plugins/datepicker/datepicker.js';

**Kahmoon** · 27.01.2012, 09:33

Ok...habs in die dca_config.php gepackt und die Styles von Hand im Layout hinzugefügt.

HTML-Code:

<link rel="stylesheet" href="plugins/datepicker/dashboard.css" media="all">

Jetzt funktionierts...nur die Position ist noch verkehrt. Die Imagetags der Buttons werden nicht beim Formularfeld selbst erzeugt sondern ganz am Anfang. Daher die falsche Platzierung.

HTML-Code:

<form id="tl_catalog_items" enctype="multipart/form-data" method="post" action="eintrag-bearbeiten/">
<div class="formbody">
<input type="hidden" value="tl_catalog_items" name="FORM_SUBMIT">
<input type="hidden" value="1335dd62544820b6f34c4171ce90ca40" name="REQUEST_TOKEN">
<img id="toggle_laufzeit_von" width="20" height="20" style="vertical-align: -6px; cursor: pointer;" src="plugins/datepicker/icon.gif">
<img id="toggle_laufzeit_bis" width="20" height="20" src="plugins/datepicker/icon.gif" style="vertical-align: -6px; cursor: pointer;">
<table cellspacing="0" cellpadding="0" summary="Table holds form input fields">
<tbody>
<tr class="row_1 odd">
<tr class="row_0 row_first even">
<tr class="row_2 even">
<tr class="row_3 odd">
<tr class="row_4 even">
<tr class="row_5 odd">
<tr class="row_6 even">
<tr class="row_7 odd">
<tr class="row_8 even">
<tr class="row_9 odd">
<tr class="row_10 even">
<td class="col_0 col_first">
<td class="col_1 col_last">
<input id="ctrl_laufzeit_bis" class="text" type="text" value="27.01.2012" name="laufzeit_bis" style="display: none;">
<input id="" class="text" type="text" value="27.01.2012" style="display: inline;">
</td>
</tr>
<tr class="">
</tbody>
</table>
</div>
</form>

Bezüglich tinyMCE und Textarea
Vermutlich muss ich für das TinyMCE auch ein Plugin laden!?

PHP-Code:


$GLOBALS['TL_JAVASCRIPT'][] = 'plugins/tinyMCE/tiny_mce.js';

***xchs*** · 27.01.2012, 10:17

Ja, der RTE TinyMCE braucht sicherlich auch seine Plugin-Dateien. Die entsprechende Option "Rich Text" hast Du sicherlich in den Einstellungen aktiviert oder? Ansonsten: Schau mal im Tracker, ob es dazu nicht bereits ein Ticket gibt!

**Kahmoon** · 27.01.2012, 10:40

Jepp ist aktiviert. Er läd auch die JS Datei im Frontend...allerdings sollte er nach dem Laden die textarea in den Editor wandeln. Das passiert nicht.

HTML-Code:

<script src="http://archiv.merkur-kreativ-media.de/plugins/tinyMCE/tiny_mce_gzip.js"></script>

**ddnl** · 28.01.2012, 15:45

@Kahmoon
ich habe exakt das gleiche Problem wie Du.
Ich habe dazu in der ModulCatalogEdit.php folgendes ergänzt/ersetzt.

Code:

                              $GLOBALS['TL_HEAD'][]=
					'window.addEvent(\'domready\', function() {
						new DatePicker(\'#ctrl_' . $objWidget->id . '\', {
							allowEmpty: true,
							toggleElements: \'#toggle_' . $objWidget->id . '\',
							pickerClass: \'datepicker_dashboard\',
							format: \'' . $format . '\',
							inputOutputFormat: \'' . $format . '\',
							positionOffset: { x:130, y:-185 }' . $time . ',
							startDay: ' . $GLOBALS['TL_LANG']['MSC']['weekOffset'] . ',
							days: [\''. implode("','", $GLOBALS['TL_LANG']['DAYS']) . '\'],
							dayShort: ' . $GLOBALS['TL_LANG']['MSC']['dayShortLength'] . ',
							months: [\''. implode("','", $GLOBALS['TL_LANG']['MONTHS']) . '\'],
							monthShort: ' . $GLOBALS['TL_LANG']['MSC']['monthShortLength'] . '
						});
					});';

Code:

                              $GLOBALS['TL_CSS'][] = 'plugins/datepicker/dashboard.css';
					$GLOBALS['TL_JAVASCRIPT'][] = 'plugins/datepicker/datepicker.js';
					$GLOBALS['TL_HEAD'][]='
					<script type="text/javascript"><!--//--><![CDATA[//><!--
					window.addEvent(\'domready\', function() {
						new DatePicker(\'#ctrl_' . $objWidget->id . '\', {
							allowEmpty: true,
							toggleElements: \'#toggle_' . $objWidget->id . '\',
							pickerClass: \'datepicker_dashboard\',
							format: \'' . $format . '\',
							inputOutputFormat: \'' . $format . '\',
							positionOffset: { x:130, y:-185 }' . $time . ',
							startDay: ' . $GLOBALS['TL_LANG']['MSC']['weekOffset'] . ',
							days: [\''. implode("','", $GLOBALS['TL_LANG']['DAYS']) . '\'],
							dayShort: ' . $GLOBALS['TL_LANG']['MSC']['dayShortLength'] . ',
							months: [\''. implode("','", $GLOBALS['TL_LANG']['MONTHS']) . '\'],
							monthShort: ' . $GLOBALS['TL_LANG']['MSC']['monthShortLength'] . '
						});
					});

Jetzt funktioniert der Datepicker zwar generell, allerdings stehen die Icons für die Kalenderauswahl an der falschen Position.
Sie müssten nach dem Input Type stehen und nicht vor der "<tr>"

HTML-Code:

 <tr class="row_1 odd">
    <td class="col_0 col_first"><label for="ctrl_tl_party_startdate">tl_party_startdate</label></td>
    <td class="col_1 col_last"><input type="text" name="tl_party_startdate" id="ctrl_tl_party_startdate" class="text" value="28.01.2012 16:35" /></td>
  </tr>
<img src="plugins/datepicker/icon.gif" width="20" height="20" id="toggle_tl_party_startdate" style="vertical-align:-6px;">  <tr class="row_2 even">
    <td class="col_0 col_first"><label for="ctrl_tl_party_enddate">tl_party_enddate</label></td>
    <td class="col_1 col_last"><input type="text" name="tl_party_enddate" id="ctrl_tl_party_enddate" class="text" value="28.01.2012 16:35" /></td>
  </tr>
<img src="plugins/datepicker/icon.gif" width="20" height="20" id="toggle_tl_party_enddate" style="vertical-align:-6px;">  <tr class="row_3 odd">
    <td class="col_0 col_first"><label for="ctrl_tl_party_longtext">tl_party_longtext</label></td>
    <td class="col_1 col_last"><input type="text" name="tl_party_longtext" id="ctrl_tl_party_longtext" class="text" value="" /></td>
  </tr>
  <tr class="row_5 odd">
    <td colspan="2" class="colspan explanation"></td>
  </tr>

Unbenannt-1.png

Wer weiss woran das liegen kann?

***xchs*** · 28.01.2012, 16:05

Hast Du im Initalisierungsblock ein schließendes <script>-Tag eingefügt? Wird sowohl CSS- als auch JS-Datei im Frontend korrekt geladen?

**ddnl** · 28.01.2012, 17:03

Zitat von xchs

Hast Du im Initalisierungsblock ein schließendes <script>-Tag eingefügt? Wird sowohl CSS- als auch JS-Datei im Frontend korrekt geladen?

@ xchs
Wenn die frage an mich ging, ja wird alles korrekt geladen und korrekt angezeigt, aber die Icons sind über den Inputfeldern

**Kahmoon** · 30.01.2012, 08:47

Und falls die Frage an mich ging...ja...schießendes Tag ist gesetzt. Es wird nur von der Reihenfolge her direkt am Anfang ausgegeben. Nicht beim Feld selbst. Absolute Positionierung ist halt nur ne Halblösung

Der TinyMCE geht übrigens noch immer nicht..obwohl der Aufruf getätigt wird....

http://bit.ly/zNVuz4

***xchs*** · 30.01.2012, 09:03

Die Frage ging an ddnl und ist auch immer noch offen.

**ddnl** · 30.01.2012, 09:51

Hallo xchs,
siehe vor 2 Threads, das schliessende </script> ist drin und die js und css wird korrekt geladen.
VG

***xchs*** · 30.01.2012, 10:05

Meine Frage bezog sich auf Deinen geposteten Code in Beitrag #12. Ich kann - zumindest dort - kein schließendes <script>-Tag finden. Aber kann auch sein, dass ich blind bin... Wenn Du sagst, das Element wird korrekt geschlossen, dann nehm ich alles zurück und behaupte das Gegenteil.

**ddnl** · 30.01.2012, 10:56

Zitat von xchs

Meine Frage bezog sich auf Deinen geposteten Code in Beitrag #12. Ich kann - zumindest dort - kein schließendes <script>-Tag finden. Aber kann auch sein, dass ich blind bin... Wenn Du sagst, das Element wird korrekt geschlossen, dann nehm ich alles zurück und behaupte das Gegenteil.

nein du bist nicht blind :-)
das schliessende Tag ist bei dem Beitrag nicht zu sehen (habe davor aufgehört zu kopieren) aber bei mir im Code drin :-)

Irgendwie "klebt" der/die Kalenderpicker, siehe Screenshot und Quelltext (Beitrag #12) nicht hinter den richtigen InputFeldern (aber funktioniert generell mit meinen Anpassungen)

**MacKP** · 31.01.2012, 08:29

Wenn ich mich nicht täusche, dann ist das im SVN behoben. Ihr könntet mal den Patch testen: http://www.contao-forge.org/issues/1647

Viele Grüße

**lupo** · 31.01.2012, 13:57

In dem Ticket wird ein anderes Problem gelöst. Die Anzage des Fehlercodes ist immer noch da und das Icon an der falschen Stelle.

Meldung:
datepicker_message.PNG

Platzierung:
datepicker_wrong.PNG

Habt Ihr eine andere Idee ?

Danke,

Razvan

**Kahmoon** · 31.01.2012, 14:00

Zitat von lupo

Habt Ihr eine andere Idee ?

Danke,

Razvan

Wie oben beschrieben am besten die <script> Tags in die PHP schreiben und vorab die Elemente via CSS absolut positionieren. Nicht die sauberste Lösung...tuts aber.

**MacKP** · 31.01.2012, 14:02

Hallo lupo,
danke fürs expliziete Testen.
Ich sag dem Entwickler noch mal Bescheid. Es wird sich drum gekümmert ^^

Viele Grüße

**ddnl** · 31.01.2012, 20:26

Zitat von MacKP

Hallo lupo,
danke fürs expliziete Testen.
Ich sag dem Entwickler noch mal Bescheid. Es wird sich drum gekümmert ^^

Viele Grüße

Danke MacKP, für das Ticket (http://www.contao-forge.org/issues/2877) und Lupo fürs testen.
Der Workaround mit meinem geänderten Script und dem Tipp von Kahmoon mit absolutem positionieren funzt erstmal.
Wenn man in der im ModuleCatalogEdit.php beim datepicker folgendes ändert

PHP-Code:


$datepicker = '<img src="plugins/datepicker/icon.gif" width="20" height="20" id="toggle_' . $objWidget->id . '" class="datepicker_' . $objWidget->id . '">';

$GLOBALS['TL_CSS'][] = 'plugins/datepicker/dashboard.css';

$GLOBALS['TL_JAVASCRIPT'][] = 'plugins/datepicker/datepicker.js';

$GLOBALS['TL_HEAD'][]='

<script type="text/javascript"><!--//--><![CDATA[//><!--

    window.addEvent(\'domready\', function() {

    new DatePicker(\'#ctrl_' . $objWidget->id . '\', {

    allowEmpty: true,

    toggleElements: \'#toggle_' . $objWidget->id . '\',

    pickerClass: \'datepicker_dashboard\',

    format: \'' . $format . '\',

    inputOutputFormat: \'' . $format . '\',

    positionOffset: { x:130, y:-85 }' . $time . ',

    startDay: ' . $GLOBALS['TL_LANG']['MSC']['weekOffset'] . ',

    days: [\''. implode("','", $GLOBALS['TL_LANG']['DAYS']) . '\'],

    dayShort: ' . $GLOBALS['TL_LANG']['MSC']['dayShortLength'] . ',

    months: [\''. implode("','", $GLOBALS['TL_LANG']['MONTHS']) . '\'],

    monthShort: ' . $GLOBALS['TL_LANG']['MSC']['monthShortLength'] . '

        });

    });

//--><!]]></script>';

ändert, kann man auch bei mehreren Kalender den jeweiligen Calenderpicker (datepicker_' . $objWidget->id . ') erstmal in ner CSS Klasse absolut positionieren.
Nicht sauber aber bis der neue Catalog mit dem Bugfix rauskommt, sollte das erstmal gehen :-)

**xtra** · 04.02.2012, 03:05

Sollte im trunk gefixt sein.

**ddnl** · 06.02.2012, 18:27

Zitat von xtra

Sollte im trunk gefixt sein.

DANKE xtra
der Bug ist behoben und es funktioniert :-)

**zorin1st** · 07.02.2012, 10:32

Ich hatte das gleiche Problem wie im Thread beschrieben, daher habe ich ihn Aufmerksam verfolgt.
Auch bei mir funktioniert es jetzt mit dem Datepicker.

ABER

irgendwas muss ich bei den ganzen Änderungen zerschossen haben, denn alle meine Date Felder sind jetzt automatisch vorbelegt
mit dem aktuellen Datum.
Selbst wenn ich auf "Eintrag neu anlegen" klicke sind alle Datumsfelder mit dem aktuellen Datum vorbelegt.
Wenn ich jedes Datum per Hand lösche und das ganze speichere, steht es aber dennoch in der Datenbank.

Ändere ich jedoch das Datum auf ein x-beliebies, so schreibt er das geänderte Datum in die Datenbank.

Ich habe dieses Verhalten in diesem Thread nochmal gefunden:
http://www.contao-community.org/view...51d1e&start=10

Kann mir vielleicht jemand behilflich sein wie ich das wieder wegbekomme?

datumsfehler.png

Danke und Gruß
Elmar

**MacKP** · 07.02.2012, 16:02

Hallo zorin1st,
wie ist das denn genau konfiguriert bei dir?
Kannst du uns einen Screenshot vom Backend geben?

Viele Grüße

**zorin1st** · 07.02.2012, 16:30

Hier zwei Screenshots.
Ich habe das ganze auch mal in einer zweiten Contao installation mit 2.9 (die andere 2.10) probiert und gleiches Problem festgestellt
scrshot1.png scrshot2.jpg
Gruß Elmar

**zorin1st** · 08.02.2012, 22:31

reichen die Screenshots oder benötigst Du noch irgendwas?
Ich habe leider immernoch keine Lösung gefunden...
Gruß Elmar

**MacKP** · 09.02.2012, 08:52

Hallo zorin1st,
tut mir leid, das ich mich jetzt erst melde.
Ich wollte das eigentlich erst noch genau nachstellen bevor ich was sage...
Naja, die Einstellungen sehen auf jeden Fall richtig aus bei dir. Ist anscheinend ein Bug.
Welche Catalog Version benutzt du genau? Die aktuelle aus dem SVN?

Viele Grüße

**zorin1st** · 09.02.2012, 10:38

Ich habe die aktuelle Version aus dem SVN geladen, aber auch mit der offiziel im Repository verfügbaren Version tritt der Fehler auf.
Ich installiere jetzt mal eine ganz frische Contao Version ohne sonstige Erweiterungen und teste es dort nochmal.
Mit dem EFG kann ich leider keine Datefelder erzeugen, sonst hätte man sehen können ob es am Core liegt.
Im Backend werden die Datumsfelder beim Erstellen eines Katalogeintrags übrigens nicht direkt belegt.

Wenn ich sonst noch irgendwie zur Lösung des Problems beitragen kann, kannst Du auch gerne eine PM schreiben.

Danke und Gruß
Elmar

**MacKP** · 09.02.2012, 10:43

Teste dann auf jeden Fall bitte mit der SVN Version ^^

Viele Grüße

**Kahmoon** · 09.02.2012, 13:04

Darf ich an dieser Stelle noch mal nach dem nicht funktionierenden TinyMCE im Frontendedit fragen oder soll ich einen eigenen Thread starten? Hatte ich oben schon mal erwähnt. Javascript wird geladen. Auch im Template wird die Config aufgerufen...allerdings bleibt die Textarea davon unberührt

Hab hierfür mal einen eigenen Thread eröffnet: https://www.contao-community.de/show...laden&p=181535

Gruß

**zorin1st** · 09.02.2012, 16:18

Sieht nicht gut aus.
Mit der neusten Trunk Version und Contao 2.10 bekomme ich nichtmal mehr im Backend ein neues Katalog Item angelegt...

mit der Repository Version bekomme ich in 2.10 alle Fehler gleich.

mit der Repository Version und Contao 2.9 habe ich zwar den Fehler das das Feld mit dem aktuellen Datum vorbelegt ist, aber wenn ich
dieses per Hand lösche und danach speichere, so wird zumindest auch ein leeres Feld gespeichert(sonst wurde immer das Datum trotzdem gespeichert). Auch das Datepickerproblem existiert nicht.
Mit dieser Variante könnte ich zumindest noch teilweise leben, aber dennoch unschön.

Gruß Elmar

**MacKP** · 10.02.2012, 06:50

Hallo zorin1st,
was passiert denn wenn du ein neues Item anlegen willst?
Wäre gut zu wissen für uns, bevor die Version im ER landet und dann alle Probleme haben.
Gibt es da irgendwelche Fehlermeldungen?

Viele Grüße

**zorin1st** · 10.02.2012, 08:54

So ich habe hier einfach mal einen Testkatalog angelegt mit zwei Textfeldern.

1.png
2.png

wenn ich danach auf den Bleistift klicke kommt diese Fehlermeldung:
3.png

ka ob es an mir liegt, oder meiner Konfiguration.
Ich habe den Trunk runtergeladen in /module kopiert und die Rechte auf 775 gesetzt.

Gruß Elmar

**Kahmoon** · 10.02.2012, 09:08

Könnte das was mit https zu tun haben?

**zorin1st** · 10.02.2012, 09:44

Eigentlich nicht(ausschliessen will ich es natürlich nicht), ich habe alle anderen Versionen auch mit https getestet und da ging es.

Gruß Elmar

**MacKP** · 12.02.2012, 15:51

Hallo zorin1st,
ein Serverfehler (500) hilft leider nicht wirklich bei der Fehlersuche.
Könntest du mal in den Server Logs schauen, warum genau ein Fehler auftaucht?

Viele Grüße