ReferenceError: $ is not defined yii2

Question

Adding a javascript inside my view results in the ReferenceError: $ is not defined. I assume that the problem is due to Yii2 injects scripts last on my page. How to fix this?

Or how will I prevent Yii2 from autoloading the script files?

My view

  <?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>

I need to get this simple script to show an alert after the page loaded. I hav'nt called any of the script file here since yii loads automatically(i think) in the layout by calling

  AppAsset::register($this);

This results in script files to be registered at the end of the page,after my custom script.

How to solve this?

Answer 1

Yii2 injects scripts (jquery and the like) last on your page. This is intended and desired. But it means that the jQuery will load AFTER your script, so when your script runs, jQuery does not yet exist.

The easiest way for quick testing is to move yii-scripts (jquery and the like) to the head of the page. Modify assets\AppAsset.php and add this:

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

Done!

---

But in production you usually want the scripts to load last, and instead you let Yii2 handle your javascript:

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

Now Yii will handle this js and place it after anything important (like jQuery).

You'll however soon notice that IDE's are usually bad at handling this kind of language nesting (JavaScript inside PHP) so the syntax highlighting is likely to break. One way to solve it is to register your script in a separate file:

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

If you want even more control about which order to load your scripts, you can add dependencies as your second argument, and additional options as the third:

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

If you for some reason absolutely want the script to be rendered inline you can do:

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

---

The recommended way to add your scripts is to use AssetBundles. Look in assets/AppAssets.php and add your js-file to the $js-array.

Answer 2

Whenever you need some assets for a library specific use, register them in the view file like this:

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

Alternatively, if you add yii\web\JqueryAsset to your $depends attribute inside AppAsset, the asset will be loaded automatically for all your views, given that you registered it in the main layout (by default in Yii2 boilerplate).

I wanted to use the yii2-date-range from kartik-v in my project, and did this:

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

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

Since I switched to twig templating, I ended up with the following code in my view:

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