ReferenceError: $не определен yii2

Добавление javascript внутри моего представления приводит к ReferenceError: $ is not defined. Я предполагаю, что проблема связана с тем, что Yii2 вставляет сценарии на мою страницу. Как это исправить?

Или как я могу запретить Yii2 автоматически загружать файлы script?

Мой взгляд

  <?php

   use yii\helpers\Html;
   use yii\helpers\ArrayHelper;
   use yii\helpers\UrlManager;
   use yii\widgets\ActiveForm;
   use backend\controllers\StandardController;

   use backend\models\standard;


   ?>

 <div class="domain-form">

<?php $form = ActiveForm::begin(); ?>

<?php



    <?= $form->field($model, 'clause')->textarea(['rows' => 6]) ?>

    <?= $form->field($model, 'name')->textarea(['rows' => 6]) ?>

    <div class="form-group">
        <?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
    </div>

<?php ActiveForm::end(); ?>

   </div>

    <script type="text/javascript">
    $("document").ready( function () {
    alert("hi");
    });</script>

Мне нужно получить этот простой script, чтобы показать предупреждение после загрузки страницы. Я hav'nt вызывал любой из файлов script здесь, так как yii загружается автоматически (я думаю) в макете, вызывая

  AppAsset::register($this);

Это приводит к тому, что файлы script будут зарегистрированы в конце страницы после моего пользовательского script.

Как это решить?

Ответы

Ответ 1

Yii2 вводит скрипты (jquery и т.п.) последним на вашей странице. Это необходимо и желательно. Но это означает, что jQuery будет загружать ПОСЛЕ вашего script, поэтому при запуске script jQuery еще не существует.

Самый простой способ быстрого тестирования - переместить yii-скрипты (jquery и т.п.) в начало страницы. Измените assets\AppAsset.php и добавьте следующее:

public $jsOptions = array(
    'position' => \yii\web\View::POS_HEAD
);

Готово!

Но в процессе производства вы обычно хотите, чтобы скрипты загружались последним, и вместо этого вы позволяете Yii2 обрабатывать ваш javascript:

$this->registerJs(
    '$("document").ready(function(){ alert("hi"); });'
);

Теперь Yii обработает этот js и поместит его после чего-нибудь важного (например, jQuery).

Однако вы скоро заметите, что IDE обычно плохо справляются с этим вложением языка (JavaScript внутри PHP), поэтому подсветка синтаксиса может сломаться. Один из способов его решения - зарегистрировать ваш script в отдельном файле:

$this->registerJsFile( 'myScript.js' );

Если вы хотите еще больше контролировать, какой заказ загружать ваши скрипты, вы можете добавить зависимости в качестве второго аргумента, а дополнительные опции - в качестве третьего:

$this->registerJsFile( 
    'myScript.js', 
    ['\backend\assets\AppAsset'],  
    ['position' => '\yii\web\View::POS_END']
);

Если вы по какой-то причине абсолютно хотите, чтобы script отображался в строке, вы можете сделать:

$this->registerJs( $this->renderPartial('myScript.js') );

Рекомендуемым способом добавления скриптов является использование AssetBundles. Посмотрите assets/AppAssets.php и добавьте js файл в $js-массив.

Ответ 2

Всякий раз, когда вам понадобятся некоторые ресурсы для конкретного использования библиотеки, зарегистрируйте их в файле вида следующим образом:

use yii\web\JqueryAsset;
JqueryAsset::register(this);

В качестве альтернативы, если вы добавите yii\web\JqueryAsset в свой $depends атрибут внутри AppAsset, актив будет загружен автоматически для всех ваших просмотров, если вы зарегистрировали его в основном макете (по умолчанию в шаблоне Yii2).

Я хотел использовать yii2-date-range от kartik-v в моем проекте и сделал следующее:

use kartik\daterange\DateRangePicker;
use kartik\daterange\MomentAsset;
use yii\web\JqueryAsset;

JqueryAsset::register(this);
MomentAsset::register(this);
...
echo DateRangePicker::widget([ 
    'model' => $model, 
    ...
]);

Поскольку я переключился на шаблонизацию твигов, на мой взгляд, я получил следующий код:

{{ use('kartik/daterange/DateRangePicker') }}
{{ use('kartik/daterange/MomentAsset') }}
{{ use('yii/web/JqueryAsset') }}
{{ register_jquery_asset() }}
{{ register_moment_asset() }}
...
{{ date_range_picker_widget({ 
    'model': model, 
    ...
   }) }}