ReferenceError: $ is not defined yii2

Posted 2023-02-19

【中文标题】ReferenceError: $ is not defined yii2

【英文标题】：

【发布时间】：2014-03-03 05:59:21

【问题描述】：

在我的视图中添加 javascript 会生成 ReferenceError: $ is not defined。我认为问题是由于 Yii2 最后在我的页面上注入脚本。如何解决这个问题？

或者如何防止 Yii2 自动加载脚本文件？

我的看法

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

我需要获取这个简单的脚本以在页面加载后显示警报。我没有在这里调用任何脚本文件，因为 yii 通过调用在布局中自动加载（我认为）

  AppAsset::register($this);

这导致脚本文件在页面末尾注册，在我的自定义脚本之后。

如何解决这个问题？

【问题讨论】：

这个错误基本上意味着在你的视图中解释你的javascript时没有加载jQuery。有多种方法可以解决这个问题，但您能否先展示一些您的视图和控制器代码，以便我能够在您的情况下为您提供帮助。

@ArmanP。更新了问题。:-)

【参考方案1】：

Yii2 在页面最后注入脚本（jquery 等）。这是有意和期望的。但这意味着 jQuery 将在您的脚本之后加载，因此当您的脚本运行时，jQuery 还不存在。

快速测试最简单的方法是将 yii-scripts（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 通常不擅长处理这种语言嵌套（PHP 中的 JavaScript），因此语法高亮可能会中断。解决它的一种方法是将您的脚本注册到一个单独的文件中：

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

如果您想进一步控制加载脚本的顺序，可以添加依赖项作为第二个参数，并添加其他选项作为第三个参数：

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

如果您出于某种原因绝对希望脚本内联呈现，您可以这样做：

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

---

添加脚本的推荐方法是使用AssetBundles。 查看 assets/AppAssets.php 并将您的 js 文件添加到 $js-array。

【讨论】：

谢谢 ippi.Class 'backend\assets\View' not found error on added 'public $jsOptions = array('position' => View::POS_HEAD);'到 AppAsset.php

use yii\web\View; 或 'position' => \yii\web\View::POS_HEAD'。很抱歉我错过了它，但任何有能力的 IDE 都会为你做这些事情。

带位置的代码 sn-p 错误。从 Yii 2.0.6 开始，它应该像 $this->registerJsFile('/js/map.js', [ 'depends' => ['\yii\web\JqueryAsset'], 'position' => \yii\web\View::POS_END, ], 'frontendMapJs');

这里的 $this @ippi 是什么？是 yii\web\View 的实例吗？

@RameshPareek 好问题。这是几年前 Yii2 还处于测试阶段的时候。从那时起我就没有看过它，现在看它我真的无法分辨。对不起！正如 Iilya 所说，我假设这个答案已经过时了。

【参考方案2】：

当您需要一些资源用于库特定用途时，将它们注册到视图文件中，如下所示：

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

或者，如果您将yii\web\JqueryAsset 添加到AppAsset 内的$depends 属性，则资源将自动加载到您的所有视图中，前提是您在主布局中注册了它（默认情况下在Yii2 样板中）。

我想在我的项目中使用来自 kartik-v 的 yii2-date-range，并且这样做了：

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

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

自从我切换到 twig 模板后，我最终在我的视图中看到了以下代码：

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

【讨论】：

Use of undefined constant this - assumed 'this' 但是使用您建议的方法，我认为 jquery 不包括在内。