Подключение jQuery библиотеки в Yii2

Общие вопросы по использованию второй версии фреймворка. Если не знаете как что-то сделать и это про Yii 2, вам сюда.
Ответить
nn2504
Сообщения: 43
Зарегистрирован: 2016.06.24, 11:37

Подключение jQuery библиотеки в Yii2

Сообщение nn2504 »

Понимаю что это одна из самых тривиальных тем, но так толком ничего и не нашёл на эту тему. Не подключаются сторонние jQuery библиотеки. Пробовал разные способы. В итоге в исходном коде они отображаются, но не работают. Может кто-нибудь написать единственный верный способ чтобы подключить файл с библиотекой и нормально ей пользоваться в Yii2?
Заранее спасибо
mkramer
Сообщения: 531
Зарегистрирован: 2014.12.14, 13:02

Re: Подключение jQuery библиотеки в Yii2

Сообщение mkramer »

nn2504 писал(а):В итоге в исходном коде они отображаются, но не работают. Может кто-нибудь написать единственный верный способ чтобы подключить файл с библиотекой и нормально ей пользоваться в Yii2?
В чём выражается то, что "не работают"? Консоль смотрели. Ничего особенного в принципе нету. Вообще, лучше всего так: http://www.yiiframework.com/doc-2.0/gui ... ssets.html

Вообще, большая часть Yii работает на сервере, а не на клиенте. А jQuery-библиотеки - на клиенте. Так что открываете консоль браузера, смотрите, какие там ошибки выдаются. С Yii 2.0 jQuery идёт новой версии, может у вас библиотеки на старую рассчитаны?
Аватара пользователя
maleks
Сообщения: 1985
Зарегистрирован: 2012.12.26, 12:56

Re: Подключение jQuery библиотеки в Yii2

Сообщение maleks »

Ну вот пример как подключаю OwlCarouser, зависящую от jQuery
Создается asset:

Код: Выделить всё

class Asset extends AssetBundle
{
    public $sourcePath = '@app/assets/owlcarousel/res';

    public $js = [
        'js/owl.carousel.min.js',
    ];
    
    public $css = [
        'css/owl.carousel.css',
        'css/owl.theme.css',
    ];

    public $depends = [
        'yii\web\JqueryAsset', // <--- !!!
    ];
}
 
Это чисто подключит карусель.
А для конкретной страницы, где эта карусель есть, надо создавать еще один ассет( с кодом, запускающим карусель для нужных эл-тов), который уже будет зависеть от выше указанного ассета.
Yii2 universal module sceleton - for basic and advanced templates
KonstantinDigit
Сообщения: 13
Зарегистрирован: 2019.06.06, 16:28

Re: Подключение jQuery библиотеки в Yii2

Сообщение KonstantinDigit »

Добрый день, если кто может подскажите как подключить Jquery в yii2 чтобы просто можно было вывести в файле вида скрипт где было бы при нажатии на кнопку отрабатывал код alert('Привет') и это работало. (пример упрощен, специально чтобы просто сделать подключение)
Я пытался подключать Jquery через AppAsset.php ниже пример:
use yii\web\AssetBundle;

/**
* Main application asset bundle.
*
* @author Qiang Xue <qiang.xue@gmail.com>
* @since 2.0
*/
class AppAsset extends AssetBundle
{
public $basePath = '@webroot';
public $baseUrl = '@web';
public $css = [
'css/site.css',
];
public $js = [
'js/jquery-3.4.1.min.js',
/*Сдесь полный путь web/js/jquery-3.4.1.min.js* в самом js файле скопированный js с сайта Jquery ссылка https://code.jquery.com/jquery-3.4.1.js/*
];
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap4\BootstrapAsset',
'rmrevin\yii\fontawesome\AssetBundle',
];
}

Но ничего не работает, пишу в шаблона небольшой скрипт с нажатием на кнопку и выводом alerta ниже пример:
1)
<div class="try">Нажми меня</div>
<script>
$('.try').click(function(){
alert('Меня нажали');
});
</script>

При этом если подключить jquery через любой из CDN тупо добавив данный ссылку на CDN в заголовок страницы, то все работает, но понимаю что так делать не комильфо, но как тогда подключать Jquery и что я делаю не правильно, подскажите пожалуйста.
А да еще установил "yiisoft/yii2-jui": "^2.0" в файле composer.json в разделе require, но что это за штука так и не понял, думал что поможет, но тоже не помогло.
Аватара пользователя
leonenco
Сообщения: 155
Зарегистрирован: 2017.01.30, 22:42

Re: Подключение jQuery библиотеки в Yii2

Сообщение leonenco »

Во первых коментируйте ваш код в тэг code, а во вторых вы 2 раза обьявляете jquery:

Код: Выделить всё

public $js = [
     'js/jquery-3.4.1.min.js', //<------------------------------- right here
     /*Сдесь полный путь web/js/jquery-3.4.1.min.js* в самом js файле скопированный js с сайта Jquery ссылка https://code.jquery.com/jquery-3.4.1.js/*
];
у вас зависимость от бутстрапа. Закоментируйте вашу Jquery библиотеку и вперед.
KonstantinDigit
Сообщения: 13
Зарегистрирован: 2019.06.06, 16:28

Re: Подключение jQuery библиотеки в Yii2

Сообщение KonstantinDigit »

Спасибо понял). я сделал как вы сказали но всеровно jquery не работал, дальше разобрался, оказывается Yii2 почему то не воспринимает jquery, если код будет прописан напрямую в виде, то есть прямо в виде будет написан тег:

Код: Выделить всё

<script>Сдесь какой то код для Jquery, и он работать не будет. Обычный же JavaScript работает без проблем.</script>
Чтобы код на jquery работал, его нужно писать не в самом файле виде, а вынести в отдельный причем в определенной папке, которую нужно создать в определенном месте. А именно нужно создать папку с именем (MyJqueryScripts - имя можно любое) в директории web (это базовая директория находящаяся в корне yii2). Затем в этой созданной папке MyJqueryScripts создать фаил Myjs.js - имя можно и другое. А вот затем в папке assets(тоже находиться в корне yii2) есть фаил AppAsset.php и в нем указать вот так вот созданный нами фаил:

Код: Выделить всё

<?php
/**
 * @link http://www.yiiframework.com/
 * @copyright Copyright (c) 2008 Yii Software LLC
 * @license http://www.yiiframework.com/license/
 */

namespace app\assets;

use yii\web\AssetBundle;

/**
 * Main application asset bundle.
 *
 * @author Qiang Xue <qiang.xue@gmail.com>
 * @since 2.0
 */
class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/site.css',
    ];
    public $js = [
        'MyJqueryScripts/Myjs.js' // <- вписать путь к фаилу начиная от созданной папки.
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap4\BootstrapAsset',
        'rmrevin\yii\fontawesome\AssetBundle',
    ];
}
И вот теперь код Jquery будет работать...покрайне мере у меня наконец-то все заработало.
Ответить