Dodanie js

International Polish
1

Jak poprawnie dodać i używać zewnętrznych skryptów js?

W ApsAssets dodałem:


public $js = [

        'js/morris.js/morris.js',

    ];

W źródle strony skrypt jest dodany.

Tylko jak z niego teraz korystać?

Tagi <script> nie działają

2

Dodanie elementu do tablicy ApsAssets to to samo co dodanie w widoku <script></script>.

Jeżeli nie działa to sprawdź w debuger toolbar i kodzie strony czy w ogóle jest to odwołanie gdzieś na stronie,




public $js = [

        'js/morris/morris.js',

    ];

Jeżeli potrzebujesz tego wykresu nie na wszystkich podstronach a tylko na wybranych możesz dać w widoku.


$this->registerJsFile('@web/js/morris/morris.js', );

jeżeli jest a nie działa sprawdź zależności (depends), w tedy daje się po przecinku np ‘yii\web\YiiAsset’ ja jednak preferuje umiejscowienie pliku za pomocą liczby mówiącej czy plik ma być w header, content czy w footer przed plkami js czy po


$this->registerJsFile('@web/js/morris/morris.js', 3);
3

Dzięki za odpowiedź.

Nakierowało mnie to i udało się, że coś już tam jest kreślone.

Pozostała mi tylko jedna kwestia.

Jak korzystam z cdn:




$this->registerCssFile('//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css');

$this->registerJsFile('//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js', ['position' => \yii\web\View::POS_HEAD]);

$this->registerJsFile('//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js',['position' => \yii\web\View::POS_HEAD]);

$this->registerJsFile('//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js',['position' => \yii\web\View::POS_HEAD]);

To wszystko działa.

Źródło html:




<link href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet">

<link href="/praca_inzynierska/web/assets/d7aa453f/css/bootstrap.css" rel="stylesheet">

<link href="/praca_inzynierska/web/css/site.css" rel="stylesheet">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script></head>

Pobrałem js’y lokalnie i niestety już nie działa.




$this->registerCssFile('@web/js/morris.js/morris.css');

$this->registerJsFile('@web/js/morris.js/morris.js', ['position' => \yii\web\View::POS_HEAD]);

$this->registerJsFile('@web/js/raphael/raphael-min.js', ['position' => \yii\web\View::POS_HEAD]);

$this->registerJsFile('@web/js/jquery/jquery.min.js',['position' => \yii\web\View::POS_HEAD]);

Źródło html:




link href="/praca_inzynierska/web/js/morris.js/morris.css" rel="stylesheet">

<link href="/praca_inzynierska/web/assets/d7aa453f/css/bootstrap.css" rel="stylesheet">

<link href="/praca_inzynierska/web/css/site.css" rel="stylesheet">

<script src="/praca_inzynierska/web/js/morris.js/morris.js"></script>

<script src="/praca_inzynierska/web/js/raphael/raphael-min.js"></script>

<script src="/praca_inzynierska/web/js/jquery/jquery.min.js"></script></head>

Odwołania do plików dobre bo po kliknięciu otwierają się js’y.

Co tu jest nie tak, że pobrane lokalnie nie działają?

4

jquery jest najważniejsze i powinno być pierwsze, potem pliki bootstrap, potem reszta.

jQuery jest już w assets dodawane, chyba nie musisz tego dodawać w ogóle. Assets Yii2 ma wbudowaną logikę wykrywającą jQuery, jeżeli używasz registerJS albo registerJsFile a nie dasz miejsca to framework może wykryć że któryś plik js wymaga jQuery i ulokować linkowanie do niego pod linkowaniem do jQuery. Ale jak ręcznie dodałeś jeszcze Jquery to są możliwe anomalie.

5

Dziękuję bardzo za odpowiedź i pomoc.

Rzeczywiście problemem była zła kolejność skryptów.