I made an extension in Typo3 6.2 with extension builder, extbase and fluid.
I want to add a timepicker in the frontend.
I found a .js file online and want to include it whenever the extension is active because I need it often.
I placed that file here: EXT:/Resources/Public/JS/timepicker.js.
I saw a solution in this article but adding

page.includeJS.tx_myExtension = EXT:/Resources/Public/JS/timepicker.js

at the bottom of my setup.txt isn't working.

I didn't define a page there anyway so I think this might be the reason but I really have no idea - this is my setup.txt (autogenerated) in /typo3conf/ext//Configuration/TypoScript/:

plugin.tx_myext_test {
    view {
        templateRootPath = {$plugin.tx_myext_test.view.templateRootPath}
        partialRootPath = {$plugin.tx_myext_test.view.partialRootPath}
        layoutRootPath = {$plugin.tx_myext_test.view.layoutRootPath}
    }
    persistence {
        storagePid = {$plugin.tx_myext_test.persistence.storagePid}
    }
}

Ultimately I want my frontend function to work which already works with datepicker because I included jQuery in my root template. But I don't want to include the timepicker in there, just for my extension.

<script>
    $(function () {
        $('.lc-datepicker').datepicker();
        $('.lc-timepicker').timepicker();
    });
</script>

I made an extension in Typo3 6.2 with extension builder, extbase and fluid.
I want to add a timepicker in the frontend.
I found a .js file online and want to include it whenever the extension is active because I need it often.
I placed that file here: EXT:/Resources/Public/JS/timepicker.js.
I saw a solution in this article but adding

page.includeJS.tx_myExtension = EXT:/Resources/Public/JS/timepicker.js

at the bottom of my setup.txt isn't working.

I didn't define a page there anyway so I think this might be the reason but I really have no idea - this is my setup.txt (autogenerated) in /typo3conf/ext//Configuration/TypoScript/:

plugin.tx_myext_test {
    view {
        templateRootPath = {$plugin.tx_myext_test.view.templateRootPath}
        partialRootPath = {$plugin.tx_myext_test.view.partialRootPath}
        layoutRootPath = {$plugin.tx_myext_test.view.layoutRootPath}
    }
    persistence {
        storagePid = {$plugin.tx_myext_test.persistence.storagePid}
    }
}

Ultimately I want my frontend function to work which already works with datepicker because I included jQuery in my root template. But I don't want to include the timepicker in there, just for my extension.

<script>
    $(function () {
        $('.lc-datepicker').datepicker();
        $('.lc-timepicker').timepicker();
    });
</script>

• javascript
• jquery
• typo3
• typoscript
• extbase

2 Answers 2

You can either use the correct syntax for EXT: like this:

page.includeJS.myextension = EXT:extkey/Resources/Public/JS/timepicker.js

(You forgot extkey.)

Keep in mind that it may improve performance of your website to use includeJSFooter instead of includeJS.

page.includeJS is a TypoScript property that is globally available. So if you use this in the root TS template of your site, the JavaScript file will be embedded to every page, regardless of whether the plugin is in use or not. So I suggest to use the Fluid approach below if you want to have the JS only on pages that have the plugin embedded.

To achieve this, use the Resource ViewHelper in your template:

<script src="{f:uri.resource(path: 'JS/timepicker.js')}"></script>
<script>
    $(function () {
        $('.lc-datepicker').datepicker();
        $('.lc-timepicker').timepicker();
    });
</script>

The Resource ViewHelper uses a path relative to the Resources/Public directory of your extension.

You could define to include JS in your controller class, to ensure it only loads for your extension.

In TypoScript, to have JS file configurable:

plugin.tx_myext.settings.javascript.file = EXT:myext/Resources/Public/JS/timepicker.js

In Controller action:

$this->response->addAdditionalHeaderData('<script src="' .
            $GLOBALS['TSFE']->tmpl->getFileName($this->settings['javascript']['file']) .
            '" type="text/javascript"></script>');