[Frage] [Frage] Jquery Plugin im Backend korrekt einbinden TYPO3-Version: 7.6.15

  • KatzenDrache KatzenDra...
    TYPO3-Anwärter
    0 x
    4 Beiträge
    0 Hilfreiche Beiträge
    30. 01. 2017, 09:16

    Hallo,

    ich habe schon meherer Frontend-Plugins geschriben, nun ist es aber an der Zeit die sache auch im Backend zu verwalten.

    Dabei bin ich aber auf ein Problem gestoßen

    Jquery Plugins werden anscheinend nicht geladen.

    Ich habe es schon wie folgt versucht:

    1. TYPO3.jQuery(document).ready(function () {
    2.  
    3. TYPO3.jQuery(document.body).on('click', '.toogle', function(e){
    4. e.preventDefault();
    5. TYPO3.jQuery(this).siblings().toggleClass('active');
    6. });
    7.  
    8.  
    9.  
    10. // ist "not a function"
    11. TYPO3.jQuery('.input-group-type-color').colorpicker();
    12.  
    13. // diese varianten gehen auch nicht
    14. jQuery('.input-group-type-color').colorpicker();
    15. $('.input-group-type-color').colorpicker();
    16.  
    17.  
    18. });

    Dabei includiere ich das Script aber wie folgt:

    1. <f:be.pageRenderer
    2. loadJQuery="true"
    3. jQueryNamespace="none"
    4. includeCssFiles="{
    5. 0:'{f:uri.resource(path:\'Lib/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css\')}'
    6. 1:'{f:uri.resource(path:\'Css/Backend/BackendLayout/input.css\')}'
    7. }"
    8. includeRequireJsModules="{
    9. 1:'{f:uri.resource(path: \'Js/Backend/BackendLayout/input.js\')}',
    10. 0:'{f:uri.resource(path: \'Lib/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js\')}'
    11. }"
    12. />

    weiss jemand was es noch zu beachten gibt wenn man Jquery Plugins von Dritten benutzt?


  • 1
  • KatzenDrache KatzenDra...
    TYPO3-Anwärter
    0 x
    4 Beiträge
    0 Hilfreiche Beiträge
    30. 01. 2017, 11:36

    Hallo,

    ich konnte das Problem lösen, indem ich mein JS wie folgt nun wrappe:

    1. require(["jquery"], function($) {
    2.  
    3. $(document).ready(function () {
    4.  
    5. $(document.body).on('click', '.toogle', function(e){
    6. e.preventDefault();
    7. $(this).toggleClass('active');
    8. $(this).siblings().toggleClass('active');
    9. });
    10.  
    11.  
    12. $('.input-group-type-color').colorpicker();
    13.  
    14.  
    15. });
    16. });

    anscheinend reicht da ein require(["jquery"], function($) {.....});

  • 1