I want to create a form that has a canvas that is shared throughout all steps, but it appears to think that the canvas is a step of its own.

<div id="wizard">
<canvas id="paint"></canvas>
<div title="Step 1"></div>
</div>

Is there any way to declare static content that remains visible throughout all the steps, or a specific work-around you might recommend?

Thanks!

Problem:
White flash in the side menu and progress bar.

Problem Description:
I have replaced the jQuery UI css file with a custom css file. The webpage background is dark, when moving to the next step or previous step there is a white flash in the areas as listed above.

Any help would be greatly appreciated,
Richard

Hey Dominic, I think it makes more sense to render the step title next to a step, for example if steps are fieldsets just render the legend out (don't move title out of content).

On the other hand, I think it'd be better if menu was rendered outside of content.

Essentially it'd be nice to have all the elements standalone.

By using any of the "jump" methods like:
$("#jWizard").jWizard("lastStep");
the "finish" button does not show up and the "next" button is still there.

great plug-in!
However I found a bug today.
When there are a lot of divs nested (I didn't count how many) I get the following error only in firefox

this.options.effects[c] is undefined
[Break On This Error] */(function(a){a.widget("db.jWizard",...nextStepIndex);return!1}}}})})(jQuery)

What happens is when I have a lot of divs, somehow the jWizard repeat the same dom twice.
If requested, I can send you the html that has an issue with. Let me know.

Dominic,

First off, thank you for a great product you created! jWizard, is really cool and we like it a lot and plan to use it in our projects.

We did run into a small issue, however, and I was hoping you could point me in the right direction. You see, in testing using IE 6 and 7, whenever we have radio buttons in the panels and the user hits next and then previous, the radio button state is not restored. This works great in all the latest browsers, of course, but not in older IE.

Any ideas would be greatly appreciated!

Thank you!
Ilya

I'm getting the following error when including jquery.jWizard.js:

TypeError: 'undefined' is not a function (evaluating '$.widget')

Are there additional jquery UI plugins that need to be included apart from the jWizard plugin?

When I bind an activate / deactivate function, it gets called anytime focus is off the steps div. Example: I have a select box in one step, if I click it to open it, I get my alert that the step is deactivated without clicking the next button. Any help would be greatly appreciated.

When you use class as a property yui-compressor fails to minimize the source. The following lines are problematic:

https://github.com/dominicbarnes/jWizard/blob/master/src/wizard.js#L257
https://github.com/dominicbarnes/jWizard/blob/master/src/wizard.js#L345
https://github.com/dominicbarnes/jWizard/blob/master/src/wizard.js#L346

The naive solution is to use "class" and options["class"] which allows the compressor to work, although I haven't full tested the code with that change it does seem to work.

dominicbarnes.us/jWizard is not working. Please provide a new link for the demos or fix the link.

Thanks

1.9 and 1.10 are out, update to work with both of them

How do you remove or turn off the tool tip which pops up at the mouse pointer which show which step your on?

I have looked though the .js file looking for clues as what is responsible, but am to green to recognize.

Should be easy, since we're already on github :)

http://plugins.jquery.com/

Not sure why it doesn't validate the current page required, etc... entries prior to moving to next page? Is there a hook or something to enable this feature...otherwise this wizard is kind of just a novel concept, but doesn't help the user much?

Once all these changes and ideas settle down, the documentation needs to be cleaned up badly. I need to pick either gh-pages or the wiki, not both. (it is likely gh-pages will win-out by being more flexible, especially for demos)

I'm showing forms dynamically and some forms comes with only 1 step.

How can I enable finish button when I have only one?

Sorry for my english :)

When call method $("#wizard").jWizard("next"); on last page, then blank page is opening, and any buttons are disabled. I use that check, to prevent this situation.

step : function($step) {
  var wizard = this, dfd = $.Deferred();
  if (typeof $step === "number") {
    $step = this.$steps.eq($step)
  }

  >>if(this.$steps.index($step)==-1)
    >>return;

May be it may be useful to anybody.

Use phantomjs-mocha as a test-runner, along with grunt.js as a build step.

Hi,

When I use cancelHide=true --> plugin makes a button like this:

button type="button" class="ui-state-default ui-corner-all jw-button-cancel jw-priority-secondary ui-button ui-widget ui-button-text-icon-primary" ui-helper-hidden"="" role="button" aria-disabled="false">Cancel</button

It doesn't add or remove "ui-helper-hidden" CSS class, it makes this weirdness --> ui-helper-hidden"=""

I have a situation that I need to make an internal submit when 'next' is clicked on the first step, so I overwrite the option next with my code:

$('#wizard').jWizard({
    next: function(event, ui) {
        alert("next");
        }
});

but the alert never shown.

So, I use bind like this:

$('#wizard').jWizard().bind("jwizardchangestep", function (event, ui) {
alert("jwizardchangestep::ui.currentStepIndex="+ui.currentStepIndex);
});

but still not showing anything.

am I doing something wrong?

Trying for days to remove validation when i click on the previous button without filling the current tab input fields.

The internals need to be simplified drastically, the last major work I did on this codebase was years ago and I've grown in skill. Simplify, refactor, and make it all-around better. (include tests along the way of course)

Some notes/ideas:

• The entire event model probably needs to be scrapped and rewritten
• Make the default extremely linear and simple
• Incorporate some sort of "state machine" for complex branching

Hi

First I would like to thank you for such a great wizard !
Then, I try to change which wizard page is shown when the user hit the "Next" button, depending on some data he has introduced. But I don't succeed. The goal it to move from step#1 to step#3 when hitting "Next", then from step#3 to step#1 when hitting previous, so that step2 is not shown.

When I make this:

    $('#step1').bind('onDeactivate', function(event) {
        console.debug('step1: onDeactivate');
        if (!isChangingStep) {
            isChangingStep = true;
            if (changeType == 1)
                $('#wizard').jWizard("changeStep", 3);
            isChangingStep = false;
        }
    });

It just shown the normal next page
The "isChangingStep" is here to avoid recursion

If I put the same code in the "onActivate" of step#2, then it works but I can make the difference between showing step #2 from the next button or from the back button. Becaure from the next mean I've to go to step 3, from the back means I've to go to step 1.

Do you have any idea to help me ?

Thanks a lot
Fabrice

I've tried using jQuery 1.4x, 1.5x, and 1.6x along with IE 7/8, but the plugin does not appear to be compatible. IE9 has no problems, but the percentage of IE9 vs IE7/8 is too huge to leave those users out. I've traced the problem down to what I believe is the button panel creation. Commenting out that part and it work, but no buttons.

Hello, while using your plugin, I ran into something.
If you want to disable the Finish button, you'll run into a plugin hang, with error "n is undefined" if using the minified version of jWizard, or reported on line 506 using the dev version, which relates to
$finish.hide()
with $finish being null (correctly, since you disabled it in the config options).

My quick and dirty solution was to as to apply a

if ($finish!= null) $finish.hide();

line in each Case block in the _updateButtons function.

There might be more elegant solutions, but I was in a hurry. Maybe do a higher level check on $finish, before entering the _updateButtons method? Add some sort of "no button" global flag to check?

Sorry I can't do a pull request right now, I have no experience on GitHub, I will if you request it.

Hope this helps.

When the cancel button is hidden, i.e.

jwizardOptions.buttons = {
cancel: true
};

the previous button ends up above the next button - it throws the layout off. Trying to dig through source... works fine in IE but not in Chrome.

The option for hiding the title bar is "titleHide" but in the _buildTitle method, the option checked is named "hideTitle".

There is a serious need to refactor and modularize:

• Remove the "counter" from jWizard itself, making it a separate widget (allow for easy injection)
• Use the newer jQuery UI Menu instead of the hacked up menu we have now (or create some sort of extension, either way take the logic out of jWizard itself)
  • Consider dropping the menu altogether, attempting to create a separate navigation component that can also be easily injected

I download the new version with the IE fix and I now get an error when I set menuEnable to true. When i set this option, It get a blank title box and a blank content box. If I take it out, i get the form with no menu.

jWizard no such method 'changeStep' for widget instance

when calling:

$w.jWizard("changeStep", 3);

Hi, I need to add steps dynamically to jWizard plugin based on the selected value of the current step. can anyone please help me

class is reserved keyword in IE and needs to be in quotes

"class" on line no. 359

this.$menu = $("

", {
class: "jw-menu",

Dominic,
I get some funny things when I use jQuery 1.6 and UI 1.8.12.
For IE using 1.6, the wizard looks almost normal, but the grey gradient on the title and button area is missing. When I use FF3.6, same gradient is missing, and all the navigation buttons are being displayed all the time.

hi !

can it be done ?

tks

Option for jwizard to expand and contract vertically depending on content.
slideDown / slideUp animation to fit content on page change.

Option to fade content on page change.
fadeTo animation maybe?

My personal project I have modified the css to allow vertical expansion minus the animation, but would be more convenient if it where integrated option in the js

According to your documentation http://dominicbarnes.us/project-jwizard-documentation.php events should be fired. But they don't work. Or do I miss something....?

I'm using your latest version inside of jquery dialogs -- im making the wizard act as a psuedo form instead of any actual submission. After clicking cancel the wizard does not reset to the first step(or reset at all for that matter).

I found a problem while reading plugin's options.

Calling the option method to read an option, like this:

var effects = $wizard.jWizard('option', 'effects');

It returns nothing.

The implementation of the option method in the plugin is the following:

    option: function (key, value) {
        if (this._superApply) {
            this._superApply(arguments);
        } else {
            if (arguments.length < 1 || key.indexOf(".") === -1) {
                $.Widget.prototype.option.apply(this, arguments);
            } else {
                var current = this.options,
                    path = key.split("."),
                    len = path.length - 1;

                $.each(path, function (x, part) {
                    if (x >= len) {
                        current[part] = value;
                    } else {
                        current = current[part];
                    }
                });

                this._setOption(path[0], value);
            }
        }
    },

Please note the call to superApply.

On third line, when it calls the superApply method "this._superApply(arguments)", it obviously doesn't return the option value in case of an option read (i.e. a call with only the key argument, and not the value argument).

It works correctly while setting an option.

I think the the implementation should be the following:

    option: function (key, value) {
        if (this._superApply) {
            return this._superApply(arguments);
        } else {
            if (arguments.length < 1 || key.indexOf(".") === -1) {
                $.Widget.prototype.option.apply(this, arguments);
            } else {
                var current = this.options,
                    path = key.split("."),
                    len = path.length - 1;

                $.each(path, function (x, part) {
                    if (x >= len) {
                        current[part] = value;
                    } else {
                        current = current[part];
                    }
                });

                this._setOption(path[0], value);
            }
        }
    },

So that the returned valued is returned back to the calling function.

Thank you for your work!

Best regards,

Marco

Don't you think we should implement a setting which would turn the jQuery UI CSS classes on and off?

Would it make sense to make a plugin that works off jQuery UI and another one that works without it? What exactly do we need from jQuery UI besides the progressbar?

I don't think we need menu and buttons from jQuery UI.

Great piece of code !

In Version 1.0, for the titles to work properly, you need to change the line

$title.text(this.element.find(".jw-step:not(:visible)").attr("title"));
to
$title.text(this.element.find(".jw-step:visible").attr("title"));

as otherwise the wrong titles appear on the Wizard pages.

Bob

/**
* @Private
* @description Updates the title
* @return void
*/
_updateTitle: function(bIsFirstStep) {
var $title = this.element.find(".jw-title");

        if (!bIsFirstStep) {
            this._effect($title, "title", "hide", "hide");
        }

        //$title.text(this.element.find(".jw-step:not(:visible)").attr("title"));
        //bemoore: Fixed wizard titles bug here by commenting out above line and replacing with this one
        $title.text(this.element.find(".jw-step:visible").attr("title"));

        if (!bIsFirstStep) {
            this._effect($title, "title", "show", "show");
        }

    },