Datepicker funzt ned in Catalog Edit Modul

[Kahmoon]

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.

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

Keiner ne Idee?

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

[MacKP]

Ah, mit Link kann man schon besser arbeiten:

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

Viele Grüße

[Kahmoon]

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]

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]

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]

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.

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]

Das DataPicker-Plugin fehlt natürlich auch noch:

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

[Kahmoon]

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

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

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

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

[xchs]

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]

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.

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

[ddnl]

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

                              $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'] . '
						});
					});';

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

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

Wer weiss woran das liegen kann?

[xchs]

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

[ddnl]

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]

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