I'm having a problem with key navigation (left, right keys) when I place a SmartWizard on a bootstrap modal. Every key hit brings me 2 tabs forward or backward. Buttons Next and Prev work completely fine though.

Please refer to this question on StackOverflow:

https://stackoverflow.com/questions/52334249/jquery-smartwizard-step-being-shown-but-not-being-enabled

I have 5 steps in the wizard. Step 3 and Step 4 are hidden when the wizard first loads.

1. When a user selects "Yes" Radio button in Step 2 and then clicks on "Next" button, it should show, enable and go to Step 4 in the Wizard.
2. When a user selects "No" Radio button in Step 2 and then clicks on "Next" button, it should show, enable and go to Step 3 in the Wizard.

The problem I am facing is, the hidden steps are being shown, on demand, but are showing as disabled. As a result, when I click "Next" on Step 2, the hidden step is shown, but not enabled and thus skips to Step 5.

How do I fix it to achieve the desired behavior?

Here is my code for this:

<div id="smartwizard">
<ul>
    <li><a href="#step-1">Step 1<br /><small>Step 1</small></a></li>
    <li><a href="#step-2">Step 2<br /><small>Step 2</small></a></li>
    <li><a href="#step-3">Step 3<br /><small>Step 3</small></a></li>
    <li><a href="#step-4">Step 4<br /><small>Step 4</small></a></li>
    <li><a href="#step-5">Step 5<br /><small>Step 5</small></a></li>                
</ul>

<div>
    <div id="step-1" class="">
        This is the first step and it should be shown all the time.
    </div>
    <div id="step-2" class="">
        <div>Would you like to add more options?</div>
        <p>
        <input type="radio" name="yes_no" id="step2RadioYes" checked>&nbsp;Yes</input>
        </p>
        <p>
        <input type="radio" name="yes_no" id="step2RadioNo" >&nbsp;No</input>
        </p>
    </div>

    <div id="step-3" class="">
        This step is hidden on load, but should be shown and enabled if I select "No" in Step 2.
    </div>

    <div id="step-4" class="">
        This step is hidden on load, but should be shown and enabled if I select "Yes" in Step 2.
    </div>

    <div id="step-5" class="">
        This step is the final step.
    </div>
</div>

<script>
$('#smartwizard').smartWizard({
            selected: 0,
            theme: 'default',
            transitionEffect:'fade',
            showStepURLhash: false,
            contentCache: false,
            hiddenSteps: [2,3]
    });

$("#smartwizard").on("leaveStep", function(e, anchorObject, stepNumber, stepDirection, stepPosition) {
        if(stepNumber === 1){
           if(document.getElementById('step2RadioYes').checked) {

           // Enable and go to step-4 if Yes is selected
           $('#smartwizard').smartWizard("stepState", [2], "disable");
           $('#smartwizard').smartWizard("stepState", [2], "hide");

           $('#smartwizard').smartWizard("stepState", [3], "enable");
           $('#smartwizard').smartWizard("stepState", [3], "show");
          }
          else if(document.getElementById('step2RadioNo').checked) {

           // Enable and go to step-4 if No is selected
           $('#smartwizard').smartWizard("stepState", [2], "enable");
           $('#smartwizard').smartWizard("stepState", [2], "show");

           $('#smartwizard').smartWizard("stepState", [3], "disable");
           $('#smartwizard').smartWizard("stepState", [3], "hide");
          }
       }
    });    
</script>

It seems there is a way to dynamically set the state for the step like:

$('#smartwizard').smartWizard("stepState", [stepIndex], "disable");

Except add below codes to set error state for elements, I have no idea how to achieve that target:

        stepState: function (stepArray, state) {
               ...
               case 'error':
                        $(selSteps).parents('li').addClass('danger');
                        break;

        }

Any other better suggestions?

Specifically the unminified code in the next and previous click handlers check for the presence of buttonDisabled where as the minified does not.

I want to change disabledSteps according to user selections. I tried it but I failed

I hope the docs are updated to reflect this, both on github and off-site docs.

Using the stock example in Firefox, you can enter field data and refresh the page and your data is still there: http://techlaboratory.net/demos/SmartWizard43/examples/smartwizard-input.html#step-1

Do the same in chrome and the data is lost. Is this a known issue? Can it be resolved?

hi,
how can I achieve showing next step on click some element inside ".stepContainer" ?

I intend to submit yarn package management support.

Hi, Please suggest me, how to show elmActionBar (buttons) on top, currently its showing at bottom only.

Thanks in advance.

jquery-3.2.1.slim.min.js:2 jQuery.Deferred exception: this.pages.finish is not a function TypeError: this.pages.finish is not a function at SmartWizard._transitPage (file:///Users/bobwalsh/twee-fi/js/jquery.smartWizard.js:414:24) at SmartWizard._loadStepContent (file:///Users/bobwalsh/twee-fi/js/jquery.smartWizard.js:388:22) at SmartWizard._showStep (file:///Users/bobwalsh/twee-fi/js/jquery.smartWizard.js:338:18) at SmartWizard.init (file:///Users/bobwalsh/twee-fi/js/jquery.smartWizard.js:105:18) at new SmartWizard (file:///Users/bobwalsh/twee-fi/js/jquery.smartWizard.js:72:14) at HTMLDivElement.<anonymous> (file:///Users/bobwalsh/twee-fi/js/jquery.smartWizard.js:604:49) at Function.each (https://code.jquery.com/jquery-3.2.1.slim.min.js:2:2919) at r.fn.init.each (https://code.jquery.com/jquery-3.2.1.slim.min.js:2:1207) at r.fn.init.$.fn.smartWizard (file:///Users/bobwalsh/twee-fi/js/jquery.smartWizard.js:602:25) at HTMLDocument.<anonymous> (file:///Users/bobwalsh/twee-fi/js/twee-fi.js:2:21) undefined
and then this error:
jquery-3.2.1.slim.min.js:2 Uncaught TypeError: this.pages.finish is not a function
at SmartWizard._transitPage (jquery.smartWizard.js:414)
at SmartWizard._loadStepContent (jquery.smartWizard.js:388)
at SmartWizard._showStep (jquery.smartWizard.js:338)
at SmartWizard.init (jquery.smartWizard.js:105)
at new SmartWizard (jquery.smartWizard.js:72)
at HTMLDivElement. (jquery.smartWizard.js:604)
at Function.each (jquery-3.2.1.slim.min.js:2)
at r.fn.init.each (jquery-3.2.1.slim.min.js:2)
at r.fn.init.$.fn.smartWizard (jquery.smartWizard.js:602)
at HTMLDocument. (twee-fi.js:2)

Using or above, steps (nav-links) are no longer responsive.

This is what I did to fix it, not quite a universal solution but you get the idea. It makes the nav list equal width, and then forces it to wrap at smaller screen widths.

.sw-theme-default > ul.step-anchor > li {
    position: relative;
    margin-right: 2px;
    flex-grow: 1;
    flex-basis: 0;
}
@media(max-width:767px) {
    .sw-theme-default > ul.step-anchor {
        flex-wrap:wrap;
    }
    .sw-theme-default > ul.step-anchor > li {
        flex: 0 0 49%;
    }
    .sw-theme-default > ul.step-anchor small {
        display: none
    }
}

When you load the page, the step section will show up without formatting and then after a few milliseconds, it will get the correct styling.

This can be avoided by calling smartWizard this way: $('#smartwizard').smartWizard().children('ul').removeClass('d-none'); and by adding a <ul class = "d-none"> to the step section (or equlivalent if you work with bootstrap 3)

Hi,
I have 4 steps and I just want to jump a step with goToStep function in the leaveStep event - however, I would like to decide which step I want to move to with the 'Next' button in built in smart wizard, based on what the user selects in the first step i.e. if some value is selected in Step 1, then on clicking next, I can check for the value and then move to Step X or Y etc...
Is this possible? Can I get an example?

here my code
$("#myWizard").on("leaveStep", function (e, anchorObject, stepNumber, stepDirection) {
if (stepDirection === "forward"){
var isStepValid= self.validateSteps(stepNumber); //my step validation function, return true or false
if(stepNumber == 0 && userSelected == someValue){
console.log("................. gotostep 3 => Skip step 2");
$('#myWizard').smartWizard("goToStep",3); //this do nothing, the goToStep doesn't work, the logic next step is load (the step 2 until the step 3)
}else{
return isStepValid;
}
}
});
`
where's my mistake?
thanks for help!

Hi,

I have a wizard with 3 steps and in the step 2 I want to send an ajax request, how do i wait for the ajax call finish to show the step 3 which indicate the wizard has been finished?

My current code as bellow:

$wizard.on('leaveStep', function(e, anchorObject, stepNumber, stepDirection) {
  if (stepDirection === 'forward' && stepNumber === 2) {
    $.ajax({
      method: 'POST',
      url: url,
      data: data
    }).then(function (response) {
      // indicate the ajax has been done, release the next step
      return true;
    }, function (){
      // hang on this step if the error occur
      return false;
    });
  }
});

I am not able to initialize wizard second time. After page is rendered for the first time, and when content is changed dynamicly with java script - initializing wizard second time is not working.

Consider this:

function createWizard(content) {
    this.$("#campaign-creator-wizard").smartWizard("destroy");
    this.$("#campaign-creator-wizard").empty();
    this.$("#campaign-creator-wizard").append(content);

    this.$("#campaign-creator-wizard").smartWizard({
        showStepURLhash: false,
        useURLhash: false,
    });
}

Initial call of this function works fine (and as you can see - even in the first place content was loaded dynamicly). Seems that, I am not clearing/destroying this wizard properly or something - to reinitialize it again. Because, any other call of this function will not initialize wizard.

Am I missing something here - or in general, re initialization is not possible ?

With latest version of the library
Am trying to access the prev step set fields in current step using Php, not able to see any fields in $_REQUEST object, what is the way out to access fields in prev step using Php, so that I can load the content conditionally.

Hi all!

I put validation form um many steps of smartwizard, but the messages are shown in English. How can i translate that messages? In my case to Portuguese.

Thanks!

Hi, found a bug on the demo:
If you go to the last step and reset the wizard with either the internal or external button, the external next button looks disabled. It does however still function and as soon as you click it to go to step 2 it regains its proper style

for each request by #step-x address will appear on the console error: Uncaught Error: Syntax error, Unrecognized expression: a[href*=#step-x]

and after I find fixes for error, I found the address jquery/jquery#2885

to fix it, you should change a[href*= into a[href*=\\

but there is another problem, when accessing the address with #step-x will skip the previous step.
if you do not want to step in skipped, use/change useURLhash: false to prevent it.

when I set <select class="form-control selectpicker"> the select form is not visible

Hi,

Greate library...I am really enjoying how easy it is to set up the wizard in my application.

I am hoping you can give me some support for a small issue that I have. Well not really an issue, just not sure how to solve it the best way.

I hav a REST API Backend where I can get a list of rooms for a given arrival and departure date. Lets say at api.com/getrooms?arrival=...&departure=...
In the first step of my wizard I enter the arrival and departure date. That works fine. If I then switch to the second step I want to call the rest endpoint to get the list of available rooms.

Is this possible somehow?

Thanks for the help

• Franklin

hi.

I think the plugin is awsome, but there still some points of inprovement. for example i would like to be able to have the ability to return a jquery promise or a native promise on the leaveStep event:

Can i make the necessary modifications and make a pull-request?

currently i'm using something similar to this: #20

Example:

$("#smartwizard").on("leaveStep", function (e, anchorObject, stepNumber, stepDirection) {
	
	//we could have a jquery ajax or something else here
	return new Promise(function(resolve, reject){ resolve(true)})

})

Hi.

I'm using v4.2.2 (since I'm still on Bootstrap 3), combined with DataTables 1.10.16. When I put a datatable in one of the steps of the wizard, portions of the datatable (and any elements below) become readonly ---i.e., they cannot be clicked at all.

Example:

• I have a wizard with two steps;
• I put a datatable with two rows in the second step of the wizard;
• I also put a button below the datatable
• The button becomes readonly and cannot be clicked.

Another example:

• I have a wizard with two steps;
• I put a datatable, with 5 rows, with selection checkboxes in the first column of each row, also in the second step of the wizard;
• Only the checkboxes in the first two rows can be clicked.

That (mis)behavior occurs only after the first step of the wizard. Datatables in the first step of the wizard work properly.

Is there a known conflict between SmartWizard an other jQuery plugins? Any ideas on workarounds?

I'm using jQuery v3.2.1.

Hi
Just wondering if bootstrap 4 support is planned
cheers

when I install it by
composer require techlab/smartwizard
I have the following error:

... techlab/smartwizard v4.1.2 requires jquery >=1.9.0 -> no matching package found.
Potential causes:
A typo in the package name
The package in not available in a stable-enough version according to your minimum-stability settings...

I want to go backward how can I do that ?
Thanks for your reply

I have total 8 steps in my form. Among them number 0 and 7 are active on load and the rest are hidden. I am conditionally making them visible on leaveStep on step 0. It works fine except it goes directly to step 7 instead of going to step 1. how can I fix this?

I'm using version 3.3.1, is there any big change to migrate from that version to 4 ? Do you have a quick checklist of add/remove stuff related to it ?

When validating a form if everything is correct is useful to have a hideMessage method to hide the error message.

Example of use
function leaveAStepCallback(obj){
console.debug("leaveAStepCallback");
var valid = false;
var step_num= obj.attr('rel'); // get the current step number
console.debug(step_num);
if (step_num == 1){
if ($j('#idCapaGeom').val() != ""){
$j('#wizard').smartWizard('setError',{stepnum:1,iserror:false});
$j('#wizard').smartWizard('hideMessage');
return true;
}else{
$j('#wizard').smartWizard('setError',{stepnum:1,iserror:true});
$j('#wizard').smartWizard('showMessage','you mesage');
}
}
return valid;
}

//may be this patch can help

// Method calling logic
if (!action || action === 'init' || typeof action === 'object') {
init();
}else if (action === 'showMessage') {
//showMessage(Array.prototype.slice.call( args, 1 ));
var ar = Array.prototype.slice.call( args, 1 );
showMessage(ar[0]);
return true;
}else if (action === 'hideMessage') {
hideMessage();
return true;
}else if (action === 'setError') {
var ar = Array.prototype.slice.call( args, 1 );
setError(ar[0].stepnum,ar[0].iserror);
return true;
} else {
$.error( 'Method ' + action + ' does not exist' );
}

//line 304 after the showMessage function
function hideMessage(){
msgBox.hide();
}

i've a requirement to add new tab's dynamically say suppose i've 5 tabs loaded as Wizard control and i had to add one more tab Depends on a condition on exiting from some tab(say from 3 to 4).i want added 6th tab dynamically.
Adding dynamic Tab functionality to Wizard isn't give fruit full result ,i can able to see the UI change but i'm not able to navigate through it, to my understanding since document.ready function executed so there is no chance of adding new tab functionality its not considered as wizard object, so i request you to have something like $('#wizard).reload() function feature would be great i guess.

If we have initiated the wizard with "hiddenSteps"/"disabledSteps" options and then call "reset" on it - the state of the nav li elements is not flushed.

The main in bower.json option and the main and style package.json are wrongly set.
Respectively:

• ./css/smart_wizard.min.css should be ./dist/css/smart_wizard.min.css
• ./js/jquery.smartWizard.min.js should be ./dist/js/jquery.smartWizard.min.js

Working off your dist example (index.html) to recreate the issue:

Add a bunch of content BELOW your wizard form, enough to force a scroll bar. Now do a hard refresh. The page jumps to the #step hashmark and the wizard itself looks like its about maybe 200 pixels off the top of the screen.

Happens in FIREFOX browser. So probably an issue with Firefox and not the script?

In the latest version the javascript uses quite a bit of bs4 selectors and classes.

I'm currently needing to use this in a BS3 project that isn't slotted for upgrade to BS4 for quite some time. How far back do I need to go version wise to get to a version that uses only BS3 selectors in the javascript?

Thanks a bunch, great package!

I have been having some problems with validating the current step before proceeding to the next step.
Im using this example: http://techlaboratory.net/smartwizard/demo/validation which works great untill you try using the bootstrap grid classes such as col-md, rows etc.

I made you a fiddle to show you the problem: https://jsfiddle.net/warnin/a1hw31m9/6/
The wizard will continue to step 2 even if the last two inputs are empty. The last 2 inputs are required.

Regards

Hey guys,
awesome project.
When I integrated it in a website, I did find an issue. With the useURLhash and backButtonSupport set to true, I was getting this error:
Uncaught Error: Syntax error, unrecognized expression: a[href*=#step-personal-data]
triggered by Sizzle. I'm using jQuery 2.x and SmartWizard 4.0.5

Turned out that the issue is related to 2 very similar lines of code in SmartWizard:
var elm = $("a[href*="+hash+"]"); and
var elm = $("a[href*="+window.location.hash+"]");

I got it working by encapsulating the hash string into quotes, as per jQuery syntax:
var elm = $("a[href*='"+hash+"']");

I forked the repo here https://github.com/b-e/SmartWizard/blob/master/js/jquery.smartWizard.js, and can open a PR

hi everyone , when i try to validate 2 inputs in 1 step it just validate 1 of them (randomly) , do you know why? i alredy saw the documentation, but there is nothing about 2 inputs in 1 step and i think no1 calculated that (validate 2 inputs in 1 step)

<div id="form-step-1" role="form" data-toggle="validator"> <div class="form-group"> <label for="name">Name:</label> <input type="text" class="form-control" name="name" id="name" placeholder="Write your name" required> <div class="help-block with-errors"></div> <label for="surname">Surname:</label> <input type="text" class="form-control" name="surname" id="surname" placeholder="Write your surname" required> <div class="help-block with-errors"></div> </div> </div>

Hi,

Is it possible to make the step anchor to be center just like the bootstrap nav-justified class.

Thank you!

I change "_loadStepContent" method to check if ajaxSettings is string and then eval this, works, but, i dont no if is the best solution.

I have some forms inside the wizzard pages which can add some validation messages. A validation message is a span element, which normally is hidden. So when the validation hint is showing up the inner page becomes higher. In this case the smartWizzard is not updating the height and is truncating some content on bottom of the form.

Is there a way triggering _fixHeight function in such cases?

autoAdjustHeight was suggesting to me some automatic adjustment event after the initial load of the page:
Shouldn't the wizzard listen on size changes of the selPage and adjust it's height?

I can try to reporduce it in some plnker. Do you have a template for that?

hi ,
when i submit wizardform and after I click go back in browser to return to my wizardform height it not updated

The demos doesn't have this behavior, but the lib does it. Whenever you click Next or Previous, the page scroll to the top of the content. How I could prevent this?

I want it to scroll to the top of the page.

I try design the form with 'col-lg-*' and put "form-group" inside. But when click next. The form just go to step 2 without validate the field. Is it normal or just a bug?

How I can put these steps tabs vertical instead of horizontal?

hi , i want Implementation InputValidation Example
$("#smartwizard").on("leaveStep", function(e, anchorObject, stepNumber, stepDirection) { var elmForm = $("#form-step-" + stepNumber); // stepDirection === 'forward' :- this condition allows to do the form validation // only on forward navigation, that makes easy navigation on backwards still do the validation when going next if(stepDirection === 'forward' && elmForm){ elmForm.validator('validate'); var elmErr = elmForm.children('.has-error'); if(elmErr && elmErr.length > 0){ // Form validation failed return false; } } return true; });
but get me an error

elmForm.validator is not a function

and not work anybody have example for asp.net mvc 5 ?

I use onleavestep to send vars over step, but, is more easy if has a method to set extra vars

Steps to recreate:

<script>
    $(document).ready(function() {
        $('#smartwizard').smartWizard({
            theme: "dots",
            toolbarSettings: {
                toolbarPosition: "both"
            }
        });
    });
</script>

When using smart wizard on material Admin Template (https://github.com/gurayyarar/AdminBSBMaterialDesign) ,I am getting such issue with toolbar due to navbar class property being attached to nav tag.
Below is the screenshot

The colors are not reset when I change the steps dynamically.
Scenario ->
-next next to step 3
-prev prev to step 1
-Dynamically disabled step 2
-Step 2 background color still green