Jquery, steps and Yii2

Dear all

I would like to implement a Wizard (with forms) inot my application. Therefore, I would like to use jquery.steps (which you can find here.

I have created an assetbundle containing the correct js files




namespace app\assets;


use yii\web\AssetBundle;




class WizardAsset extends AssetBundle

{

    public $basePath = '@webroot';

    public $baseUrl = '@web';

    public $css = [

        'css/site.css',

        'css/smart_wizard.css',

        'css/jquery.steps.css',

    ];

    public $js = [

        'js/jquery.steps.min.js',

    ];


    public $depends = [

        'yii\web\YiiAsset',

        'yii\bootstrap\BootstrapAsset',

    ];

}



And have the following code in my view:




<?php

use app\assets\WizardAsset;

WizardAsset::register($this);

?>


<div id="example-basic">

    <h3>Keyboard</h3>

    <section>

        <p>Try the keyboard navigation by clicking arrow left or right!</p>

    </section>

    <h3>Effects</h3>

    <section>

        <p>Wonderful transition effects.</p>

    </section>

    <h3>Pager</h3>

    <section>

        <p>The next and previous buttons help you to navigate through your content.</p>

    </section>

</div>


<script>

$("#example-basic").steps({

    headerTag: "h3",

    bodyTag: "section",

    transitionEffect: "slideLeft",

    autoFocus: true

});

</script> 



This however does not seem to work: i guess the javascript files should be loaded before the <scrip> … </script> at the end of the html file, but Yii forces the script at the end of the file. Is there a way to overcome this? And/Or am I correct this is the mistake?

Kind regards

Jens Buysse

Hi eothein,

you have to use View::registerJs(), instead of direct use of <script>-tag:




<?php

$this->registerJs(<<<'EOD'

// your JS code here

EOD

); ?>