yii2 registering JS files to a View

Question

I have A.php view file in /views/A/ folder. And I have A.js js file in /views/A/ folder Please help me register js file in view file.

As I understand I must write $this->registerJsFile('path/to/file.js'); in view file.

But (Question A) I get method registerJsFile is not found in a class message from PHPStorm.

Also (Question B) what should I write in path considering both files are in the same folder /views/A/ ?

Answer 1

A: From the docs: http://www.yiiframework.com/doc-2.0/yii-web-view.html Your code seem correct.

Do you register the js from the view file itself? not the controller? The registerJsFile() method is from the view class.

Its highly possible that your IDE is not finding the method, have you tried it in a apache enviroment?

B: Use a alias

Answer 2

This is not elegant, but working if you need to have your js file registered after jquery (as seen in the Yii2 doc)

<?php $this->registerJsFile(Yii::$app->request->baseUrl.'/js/youFile.js',['depends' => [\yii\web\JqueryAsset::className()]]); ?>

Answer 3

is there any specific reason to include the file manually rather than creating an asset bundle?

In any case if you've read the documentation regarding assets, you would have noticed that there's a clear distinction about source, published and external assets.

The most important part of it being that source and published assets use different options to determine whether and how a file should be published.

In your case you've got a source asset which needs to be copied over to the assets directory.

The invocation of registerJsFile as hinted in the documentation, will expect a published asset.

Here you have specifically two options, which probably the first is more quick and coherent:

1. move the asset in the web/ folder, as in web/js/ or whatever you prefer and keep using registerJsFile()
2. add a new asset bundle for source assets, specifying the various options as detailed in the above linked page.

Hope this clears things out.

Answer 4

If you register a js file by:

$this->registerJsFile("@web/js/all.js");

This will work but you will not be able to use jQuery. Because this file all.js is loaded before jQuery. To load after jQuery we make it depend it on 'yii\web\YiiAsset' or on \yii\web\JqueryAsset . So it will be loaded after jQuery.js. Example:

$this->registerJsFile("@web/js/all.js",[
    'depends' => [
        \yii\web\JqueryAsset::className()
    ]
]);

So What is difference between \yii\web\JqueryAsset and \yii\web\YiiAsset?

In jQueryAsset the js file will load after jQuery.js and in YiiAsset the js file will load after yii.js file.

If you want to create your own custom Asset Bundle:

<?php 
namespace frontend\components;
use yii;

use yii\web\AssetBundle;
class CustomAssets extends AssetBundle
{
    public $css = [
        "path/to/css/file.css"
    ];
    public $js = [
        "path/to/js/file.js"
    ];
    public $depends = [
    ];
}

Answer 5

Register your js file on given possion

$this->registerJsFile('path/to/file.js', ['position' => \yii\web\View::POS_END]);

The first argument is the actual JS code we want to insert into the page. The second argument determines where script should be inserted into the page. Possible values are:

View::POS_HEAD for head section.

View::POS_BEGIN for right after opening .

View::POS_END for right before closing .

View::POS_READY for executing code on document ready event.

This will register jQuery automatically. View::POS_LOAD for executing code on document load event. This will register jQuery automatically. The last argument is a unique script ID that is used to identify code block and replace existing one with the same ID instead of adding a new one. If you don't provide it, the JS code itself will be used as the ID.

An external script can be added like the following:

$this->registerJsFile('http://example.com/js/main.js', ['depends' => [\yii\web\JqueryAsset::className()]]);

The arguments for registerJsFile() are similar to those for registerCssFile(). In the above example, we register the main.js file with the dependency on JqueryAsset. This means the main.js file will be added AFTER jquery.js. Without this dependency specification, the relative order between main.js and jquery.js would be undefined.