Add Jquery To My Page

Yii 2.0 General Discussions
1

How can i add jQuery to my page in Yii 2.0?

In Yii 1.x you could just use:


Yii::app()->clientScript->registerCoreScript('jquery');

I already tried to override the View class with my own and tried to register jQuery there, but it doesn’t shows up in my html page:


namespace frontend\components;


/**

 * This is the base view object, it extends the yii\web\View so you can add custom view stuff here.

 */


class BaseView extends \yii\web\View {




    public function init()

    {


        parent::init();

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


    }




}
2

Inside view:


<? \yii\web\JqueryAsset::register($this); ?>

Also, notice that you don’t forget <?php $this->beginPage(); ?>,<?php $this->head(); ?> and so on in your layout.

3

It also works when i put it in my BaseView class :wink: (it’s the same class as you should put it in the view). The problem was, i forgot to place the endPage() method in my layout file, now it’s working fine, thanks!

By default the /css/site.css and bootstrap.css are also included, can i disable this?

And how can i let jquery include in the head? instead on the end of the page?

4

You can do whatever you like by configuring asset manager.

For example:


'assetManager' => [

    'bundles' => [

        'yii\web\JqueryAsset' => [

            'sourcePath' => null,

            'js' => ['//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js']

        ],

        'yii\bootstrap\BootstrapPluginAsset' => [

            'sourcePath' => null,

            'js' => ['/js/bootstrap.js'] // NB: file was patched

        ],

        'yii\bootstrap\BootstrapAsset' => [

            'sourcePath' => null,

            'css' => ['/css/bootstrap.min.css']

        ],

    ],

],

This is not recommended, since it can slow down initial page load.

But still you have two options:

  1. set script position to POS_HEAD

or

  1. use asset dependencies for your js files, like this:

	public $depends = array(

		'yii\web\JqueryAsset',

	);

(I suppose that the only reason why you want to include jquery in the head is atisfying some of your script dependencies)

5

Actually, as I see there is documentation ready for this.

https://github.com/yiisoft/yii2/blob/master/docs/guide/assets.md

6

Thanks again! I will let jQuery at the end of my page then. But i still don’t understand how to disable the site.css and bootstrap.css files. If i set the bootstrap part to null in my configuration (assetManager), they still show up.

7

AFAIR site.css is included in AppAsset, so you can just remove it.

Speaking about bootstrap.css, I haven’t tried it yet, maybe something like setting it to null or false will do the job.

Btw think twice before you disable it. If it’s included then I suppose it is required by some of your components.

8

That was the file i was looking for :), you can also remove the BootstrapAsset in there, so it’s solved now. Thanks for the quick responses.

9

Wow, I totally forgot about this. Ok.