Implementating wizard (jquery.steps) in Yii2 framework

Question

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?

Do you get any js errors from your browser? Also have you tried using View::registerJs() for the inline js in your view? — Pomme.Verte, Apr 30 '15 at 03:33
I solved the issue, by puttin all my javascript code into a seperate file and load it after jquery has loaded. The registerJs did not do the trick — Jens Buysse, May 01 '15 at 12:15
there is a yii2 extension which implements the form wizard using the jquery-smart-wizard library https://github.com/buttflattery/yii2-formwizard — Muhammad Omer Aslam, Apr 09 '19 at 23:58

score 0 · Accepted Answer · answered Jul 24 '18 at 15:27

0

Use

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

Instead of script tag.

answered Jul 24 '18 at 15:27

Hódos Gábor

109
1
7

Implementating wizard (jquery.steps) in Yii2 framework

1 Answers1