Cold_Class Cold_Class - 2 months ago 28
Javascript Question

How to include .js files in own Typo3 6.2 Extension?

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

plugin.tx_myext._CSS_DEFAULT_STYLE (
textarea.f3-form-error {
background-color:#FF9F9F;
border: 1px #FF0000 solid;
}

input.f3-form-error {
background-color:#FF9F9F;
border: 1px #FF0000 solid;
}

.tx-lcappoints table {
border-collapse:separate;
border-spacing:10px;
}

.tx-lcappoints table th {
font-weight:bold;
}

.tx-lcappoints table td {
vertical-align:top;
}

.typo3-messages .message-error {
color:red;
}

.typo3-messages .message-ok {
color:green;
}
)


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>

Answer

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

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

(You forgot myextension.)

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

Or you can use the Resource ViewHelper in your template:

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

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