javascriptjqueryyii2jquery-steps

Implementating wizard (jquery.steps) in Yii2 framework


I would like to implement a Wizard (with forms) into 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 .. 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? Or am I correct this is the mistake?


Solution

  • Use

    <?php
    $this->registerJs(<<<'EOD'
      $("#example-basic").steps({
        headerTag: "h3",
        bodyTag: "section",
        transitionEffect: "slideLeft",
        autoFocus: true
    });
    EOD
    ); ?>
    

    Instead of script tag.