Yii 2.0 Loading css and js in renderPartial

Question

How can I load css and javascript files if I render a page using renderPartial() ? The problem is that I NEED my page to be mobile responsive. This does not seem to be a problem when I use render()

I tried including the boostrap css and js in my page, but It still did not work.

I have included the css and js in my page :

<link rel="stylesheet" href="<?= Yii::getAlias('@web/css/bootstrap.min.css')?> ">
<link rel="stylesheet" href="<?= Yii::getAlias('@web/css/sb-admin.css')?>">
<link rel="stylesheet" href="<?= Yii::getAlias('@web/css/site.css')?>">
<link rel="stylesheet" href="<?= Yii::getAlias('@web/css/jquery-ui.css')?>">

And

<script type="text/javascript" src="<?= Yii::getAlias('@web/js/jquery.js')?>"></script>
<script type="text/javascript" src="<?= Yii::getAlias('@web/js/bootstrap.min.js')?>"></script>

And in my controller :

return $this->renderPartial('create', [
                        'model' => $model,
            ]);

What Am I missing ?

Blizz · Accepted Answer · 2015-05-26 09:45:35Z

10

You are looking for \yii\web\view::renderAjax() :) This does include javascript and css, but does not include the layout (and thus acts as a partial render).

answered May 26, 2015 at 9:45

Blizz

8,4482 gold badges36 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alireza Over a year ago

Renders a view in response to an AJAX request. Isolating the layout is a better solution as @scaisEdge said.

Blizz Over a year ago

Depends on what the OP wants. As I understand it the need was there to not render the layout but to do include the CSS and JS, which is exactly what renderAjax() does

rob006 · Accepted Answer · 2018-05-30 07:58:14Z

6

renderPartial() does not use the layout. If you need the CSS and JS you can create a layout suitable for you in the directory views/layouts and call it in your action by entering:

$this->layout = 'yourLayout';
return $this->render('yourForm', [
    'model' => $yourModel,
]);

edited May 30, 2018 at 7:58

rob006

22.3k5 gold badges57 silver badges77 bronze badges

answered May 26, 2015 at 8:29

ScaisEdge

133k10 gold badges98 silver badges111 bronze badges

Comments

Kalpesh Desai · Accepted Answer · 2016-01-07 07:30:08Z

4

use renderAjax() instead of renderPartial()... its works

the different between renderPartial() and renderAjax() is renderAjax() also load js and css(asset bundle and its dependency) without layout while renderPartial() does not load css and js as well as layout..:)

you may use

return $this->renderAjax('_document', [
            'model' => $model,//$this->findModel($id),
        ]);

answered Jan 7, 2016 at 7:30

Kalpesh Desai

1,42115 silver badges18 bronze badges

Comments

Toms Kovkājevs · Accepted Answer · 2017-12-23 19:27:39Z

1

If you are using renderAjax and If you know you do not need to load jQuery and/or JUI within the view file, just put at the end:

unset($this->assetBundles['yii\web\YiiAsset']);
unset($this->assetBundles['yii\web\JqueryAsset']);

so the renderAjax method loads just the assets that are left..

answered Dec 23, 2017 at 19:27

Toms Kovkājevs

111 bronze badge

Comments

Ziya Vakhobov · Accepted Answer · 2018-01-02 17:54:00Z

0

Use renderJsFile and renderCssFile

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

$this->registerCssFile("@web/css/themes/black-and-white.css", [
    'depends' => [\yii\bootstrap\BootstrapAsset::className()],
    'media' => 'print',
], 'css-print-theme');

just change depends to what you need. Here is full documentation link

edited Jan 2, 2018 at 17:54

answered Dec 29, 2017 at 11:41

Ziya Vakhobov

4654 silver badges11 bronze badges

Collectives™ on Stack Overflow

Yii 2.0 Loading css and js in renderPartial

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related