[Frage] Unable to include JS file in Extension

  • Meghna Meghna
    Typ im Roten Hemd
    0 x
    3 Beiträge
    0 Hilfreiche Beiträge
    17. 01. 2019, 14:53

    Hi Experts,

    I am new to TYPO3, I want to include bootstrap datetimepicker in my extension. Below is my code:

    List.html

    <head>
    <script src="jhttps://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
    </script>
    <script src="jquery.datetimepicker.full.js"></script>
    <script src="{f:uri.resource(path:'JS/datetimepicker.full.js')}"></script>
    <script>$("#datetimepicker").datetimepicker();</script>
    </head>
    <f:section name="content">
    <input type="text" id="datetimepicker"/>

    setup.ts

    page.includeJS.HsRoombooking = EXT:hs_roombooking/Resources/Public/JS/jquery.datetimepicker.full.js

    This is include after plugin.tx_hsroombooking._CSS_DEFAULT_STYLE (). Could you let me know what is missing. The textfield is blank. Could you something to include datetimepicker in my extension.

    Tags: Extbase
  • Hilfreichster Beitrag

  • Teisinger Teisinger
    Jedi-Meister
    1 x
    268 Beiträge
    18 Hilfreiche Beiträge
    17. 01. 2019, 19:01 - Hilfreichster Beitrag

    Hello,

    first it is not good to load your JS in the head tag (except with "defer" or async).
    Next it can come to problems with your jQuery Script in the head tag, because what should be selected if the DOM-Tree is not fully loaded? To prevent this you can wrap your JS code like this:

    [code];(function($, root, window, document) { // Alias Technique
    $(function() { // Equal to $(document).ready()
    // here your js code
    });
    })(jQuery, this, window, document);
    [/code]

    Next are you shure that your setup.ts is loaded? You can test this if you are in the backend -> Template -> Template analyse (or so)...

    -----------

    sorry for my english ;)

    https://github.com/groundstack-org


  • 1
  • Teisinger Teisinger
    Jedi-Meister
    1 x
    268 Beiträge
    18 Hilfreiche Beiträge
    17. 01. 2019, 19:01

    Hello,

    first it is not good to load your JS in the head tag (except with "defer" or async).
    Next it can come to problems with your jQuery Script in the head tag, because what should be selected if the DOM-Tree is not fully loaded? To prevent this you can wrap your JS code like this:

    [code];(function($, root, window, document) { // Alias Technique
    $(function() { // Equal to $(document).ready()
    // here your js code
    });
    })(jQuery, this, window, document);
    [/code]

    Next are you shure that your setup.ts is loaded? You can test this if you are in the backend -> Template -> Template analyse (or so)...

    -----------

    sorry for my english ;)

    https://github.com/groundstack-org

  • Meghna Meghna
    Typ im Roten Hemd
    0 x
    3 Beiträge
    0 Hilfreiche Beiträge
    18. 01. 2019, 21:49

    Thank you so much!! Your English is perfect! Solved the issue :)

  • 1