[BUGFIX] Broken datepicker on unsaved flexform sections
authorStefan Rotsch <typo3@stefanrotsch.de>
Tue, 24 Jan 2012 10:41:55 +0000 (11:41 +0100)
committerChristian Kuhn <lolli@schwarzbu.ch>
Sat, 28 Jan 2012 13:49:20 +0000 (14:49 +0100)
The onClick event for opening the datepicker is attached to the
datepicker icons only once on page load. There currently is no update
method which adds the onClick event to new sections, so the datepicker
icons are without function until the form is saved.

Related to this, IDs of input fields are not unique when adding more than
one new section before saving. They have to be randomized when inserting a
new section in order to make the datepicker work properly.

This patch implements an update() method in tceforms.js which is called
every time a new section is added to a flexform. The IDs of tceforms
date/datetime fields get randomized by adding a timestamp when adding a
new section.

Change-Id: I6acee7f570be3314350c1ae1ca952096cf416746
Fixes: #23843
Releases: 4.7, 4.6, 4.5
Reviewed-on: http://review.typo3.org/8745
Reviewed-by: Christian Kuhn
Tested-by: Christian Kuhn
t3lib/class.t3lib_tceforms.php
t3lib/js/extjs/tceforms.js

index 1b02645..2c7c60c 100644 (file)
@@ -2682,11 +2682,13 @@ class t3lib_TCEforms {
                                                                        // Makes a "Add new" link:
                                                                $var = uniqid('idvar');
                                                                $replace = 'replace(/' . $idTagPrefix . '-/g,"' . $idTagPrefix . '-"+' . $var . '+"-")';
+                                                               $replace .= '.replace(/(tceforms-(datetime|date)field-)/g,"$1" + (new Date()).getTime())';
                                                                $onClickInsert = 'var ' . $var . ' = "' . 'idx"+(new Date()).getTime();';
                                                                        // Do not replace $isTagPrefix in setActionStatus() because it needs section id!
                                                                $onClickInsert .= 'new Insertion.Bottom($("' . $idTagPrefix . '"), unescape(decodeURIComponent("' . rawurlencode($newElementTemplate) . '")).' . $replace . '); setActionStatus("' . $idTagPrefix . '");';
                                                                $onClickInsert .= 'eval(unescape("' . rawurlencode(implode(';', $this->additionalJS_post)) . '").' . $replace . ');';
                                                                $onClickInsert .= 'TBE_EDITOR.addActionChecks("submit", unescape("' . rawurlencode(implode(';', $this->additionalJS_submit)) . '").' . $replace . ');';
+                                                               $onClickInsert .= 'TYPO3.TCEFORMS.update();';
                                                                $onClickInsert .= 'return false;';
                                                                        // Kasper's comment (kept for history): Maybe there is a better way to do this than store the HTML for the new element in rawurlencoded format - maybe it even breaks with certain charsets? But for now this works...
                                                                $this->additionalJS_post = $additionalJS_post_saved;
index 5341134..843d359 100644 (file)
@@ -31,6 +31,10 @@ TYPO3.TCEFORMS = {
        init: function() {
                Ext.QuickTips.init();
 
+               this.update();
+       },
+
+       update: function() {
                this.convertDateFieldsToDatePicker();
                this.convertTextareasResizable();
        },
@@ -96,6 +100,7 @@ TYPO3.TCEFORMS = {
                                });
                        }
 
+                       datepicker.removeAllListeners();
                        datepicker.on('click', function(){
                                menu.show(datepicker);
                        });