Hi, first of all...great plugin! - I already posted my guestion on stackoverflow, but I couldn't attach the required tag: 'jquery-steps' to it.

My question is about dynamic steps. The content of the next step should depend on the answer of the previous step. How can I send additional data with the AJAX call to my backend? My backend will serve the content of the next step based on that value.

I searched the documentation and source code, but couldn't find an answer. Thank you in advance

like the title said :)

Provide several CSS themes to help People get started quickly.

Hi,
Is it possible to display the wizard/pagination bar at top AND bottom.
Indeed one of my page is very long and I want the users to be able to go to the next page without having to scroll to the top of the page.

There any method to reset and restart the steps in the first step?

Hi,
I want to enable and disable all steps not on load but afterwards by click. How can I achieve this? Thanks.
G.

It would be a great feature to allow for easy customization of the various presentation templates.

For instance, it would be ideal to customize the steps navigation, as I would like to make it more Twitter Bootstrap compatible with pillboxes or tabs.

I'm looking at adding jquery-steps to an older project, running jQuery 1.7.1. Is there a minimum level of jQuery required for using jquery-steps?

Hello,
Thanks for sharing this nice plugin.

I have a question.
I need to validate each of steps based on AJAX request.
I've been trying to deal with onStepChanging() but seems it doesn't work well.
Here's what i've been doing:

<script>
    var jSteps = [];
</script>

<div id="competition-wizard">
    <h3>First Step</h3>
    <section>
        <div>First Step</div>
        <script>
            jSteps.push('first_step');
        </script>
    </section>

    <h3>Second Step</h3>
    <section>
        <div>Second Step</div>
        <script>
            jSteps.push('second_step');
        </script>
    </section>
</div>

<script>

    function checkStatus(field) {
        $.ajaxSetup({
            cache: false
        });
        return $.get(ajaxUrl, {
            "field": field
        },
        function(data) {
            return data;
        }, "json");
    }

    $(function() {
        $("#competition-wizard").steps({
            headerTag: "h3",
            bodyTag: "section",
            transitionEffect: "slideLeft",
            stepsOrientation: "vertical",
            onStepChanging: function(event, currentIndex, newIndex) {
                if (jSteps[currentIndex] === 'first_step') {
                    return checkStatus('first_step').done(function(response) {
                        return response.success;
                    });
                } else if (jSteps[currentIndex] === 'second_step') {
                    return checkStatus('second_step').done(function(response) {
                        return response.success;
                    });
                } else if (currentIndex > newIndex) {
                    $("#competition-wizard .body:eq(" + newIndex + ") label.error").remove();
                    $("#competition-wizard .body:eq(" + newIndex + ") .error").removeClass("error");
                    return true;
                }
                return false;
            },
            onStepChanged: function(event, currentIndex, priorIndex) {

            },
            onFinishing: function(event, currentIndex) {

            },
            onFinished: function(event, currentIndex) {
            }
        });
    });
</script>

Am I doing it incorrectly?

TIA

I am looking at the examples both on your site and on my web app and am noticing that the currentIndex variable is always 'undefined' when getting to the onFinished and onFinishing event. I was using this to do some validation and discovered this.

I would think this should be passed to the event or it should be removed from the documentation.

Hi Rafael,

Thanks for your work on this plugin. I was wondering if you had any recommendations for how to do form validation on the server side. I would like to POST the form content from one of the steps to the server and prevent going to the next step until the response is received.

By browsing your code I guess that maybe the onStepChanging option could be changed to be a function that returns a Deferred Object and then you could attach all the stuff in goToStep to its done callbacks (such as saving new state and changing visualization). Is there an easier way?

Anyway, just an idea since most applications do require all client-side validation to be mirrored on the server-side.

Hello,

is it possible to pass any GET parameters (like input data from a former step) to an async loaded step?

Thanks

Hi,thank For your nice jquery step
I want to use your step wizard in my project but i need to use Validator of .net too
and button validate input data ,help me plz
what i must do?

I am looking for the functionality to reset the currentIndex of steps to be resetted to the first step once onFinished is called

Can't pass in a labels property to the Defaults object without the rest becoming undefined.

For example:

$(".wizard").steps({
headerTag: "h5",
labels: {
previous: "Back"
}
});

(E.g., the next property becomes undefined.)

Hi Rafael,
Is there a way to render the interface without the tabs? I'd like to have the user interact only with the Next and Previous buttons.

Thanks,
Chris

The .content area should auto expand and contract to accommodate the content. This would be a very welcome addition.

Hi,

I am using ajax Calendar control in asp.net web application. Its working fine initially but after installing jquery-steps plugin(plugin works correctly)ajax calendar control is not working.
Iam using update panel in my application.Controls inside update panels are not working.What could be the problem.

I posted this on stackoverflow - http://stackoverflow.com/questions/20503444/jquery-steps-a-href-triggering-tabs but thought I should post it on here as well.

Is it possible to have a link or button trigger the click on tab event? Someone said the function is under development...

On this example http://www.jquery-steps.com/Examples#basic, I would like to call the anchor (ie below) and have the tab function as if I had clicked the tab itself.

Step 3 or Pager

Hello,
I'm having a hard time figuring out how to wire up the finish button and make it do anything productive. Everything else is going okay. I've looked closely at this page for reference: http://www.rafaelstaib.com/category/jQuery-Steps at the onFinished event but I guess I am very confused.

I'm parsing JSON and dynamically injecting tabs based on the JSON. That is going well. But I can't figure out how to make the Finish button fire? I would like to have all the form values from the tabs saved in session and redirect to another page.

Please send advice.
Thanks!
Chris

Hello.
How can I send to a server some values and to get from it some values too?

Bower Install.

bower install jquery-steps

I will make a pull request in the next couple days if there is interest in this. Please +1 if you are interested 👍.

Update:
Currently using:

bower install https://github.com/rstaib/jquery-steps.git

I would like to go to a specific step on the wizard.

The solution suggested on this stackoverflow answer http://stackoverflow.com/a/20683212/2866985 worked for me, but it would be preferable that the solution is part of the original code.

Thanks.

I have used the solution mentioned here http://stackoverflow.com/a/20683212 to set a specific step on when the page load. But the issue is that I can't go back because an error: Uncaught TypeError: Cannot read property 'settings' of undefined jquery.validate.js:900

When I start the debugging mode it works. What could be the issue?

Thanks for a great plugin. Wish I would've found it sooner. Makes my long forms much more readable. :)

I do have an issue when inserting steps:
$('#wizard').steps('insert', 1, {
title: 'Bla',
contentMode: "async",
contentUrl: "url to whatever"
});

Works just great but when I try to set enableContentCache: true, it still goes in to the
if (!options.enableContentCache || !currentStep.contentLoaded) statement in the jquery.steps.js file (line 645). Seems like currentStep.contentLoaded is always false. Is there no way to cache the contents of these inserted steps?

Hi,

I'm trying to use jquery-steps with datepicker, but getting a weird issue. Datepicker's attributes loading well, but box not opening.

It could be conflict.

So I added a button with a custom click event that's written in a separate js file. I do the .steps method inside a script block in the html file and then all of a sudden the button's click event doesn't work. Do you block/reset click events from elements inside the wizard after .steps is called? Will I have to repaste the event into the button after the .steps method is called?

Hello, and congratulations for your work.

It is possible to make sure that the height of the "content" adapts automatically to its content?
Maybe setting a minimum height, below which one should not go down, and then doing so that the height of the content increases in case there is a very long content.

I used your script, but in some steps of the wizard I have a content too long, which consequently is not shown

Thanks

How get Total number of steps i.e total count in current wizard ?? any method ??

hi,

thanks for the great plugin.

is there any way that i can use skip button to skip that particular steps without validating.

I cant get it to work with jQuery 2.0. Can that be fixed? Otherwise I need to find another solution, as its not futureproof

When a user reaches a certain step i want him not to be able to go back to the previous steps. Is this possible?

Hi Rafael,
I have a text box on each tab, in a for loop, how can I step back through the tabs and get the value of each text box? I've tried wizard.steps.getStep(j) but that's not working for me. Any help greatly appreciated.
-Chris

for (var j = 0; j <= wizard.length; j++) {
var mystep = wizard.steps.getStep(j);
var myContent = mystep.content;
alert(myContent);
}

I would like to disable next button and set text to loading. Is there any way to do it.

I pasted the example into a HTML file and when I fire it up - nothing. I then add some steps as per the doco and it just shows the plain HTML. So, I think the doco is missing something ...

After the Content has been loaded using the async ContentMode, there should be a way to attach a callback function. Or at least allow the Content option to call a ajax function.

Will allow convenient CSS targeting.

For example, output would be:

<h1 id="steps-uid-1-0" tabindex="-1" class="active title" style="display: block;">First Step</h1>

<div class="active body" style="display: block;">
    First Content
</div>

Your script is awesome and just what I need.

But.. could you please make a few stand alone examples? I'm trying to follow your documentation for the "Advanced Form Example" - but it's not functioning properly as in the demo. As fully functioning standalone example (with comments) - would go a long way.

Thank you!

Great plugin! I noticed on your examples that the tabs will shrink down and turn into 4 rows if you open on mobile or make your browser small. I installed bootstrap into my code and tried to replicate your source closely (like use a row-fluid and a span) but I can't get them to wrap - the tabs still just get really small but stay side by side. Can you offer any tips to get this to work? What versions of the .js and .css are you using?

Can I use this as package in meteor to create wizard?

frist of all thanks for great work
please give some detailed examples to implement. your demos are good but where can I find the code samples of demos.
thank you

Hello there,

I setup a web page with your wonderful Steps plugin and i just realized that it is blocking any interaction with sliders created with this plugin: http://ionden.com/a/plugins/ion.rangeSlider/en.html

I am not sure which plugin is the culprit but basically, once you have a slider inside a section of steps it shows up fine but you can't interact with it as if it has been disabled somehow. If i comment out the call to the steps plugin all sliders work well.

I figured this might have something to do with events or something like that but after a few hours of debugging i couldn't make any of it. Could you take a look at this please?

Thanks!

I need nested wizards, is this possible?

And is it possible that the nested wizard is dynamic, i mean:

main wizard: step1 | step2 | step3

then, step 2 would have a nested wizard inside like subtab1 | subtab2 ...
This substeps would be created dinamically in step1 but instead of being added to the main wizard they would be added to nested wizard, like this:

I've readed the doc and i can add tabs dinamically, but i can't find anything about nested ones.

One of the most fundamental reasons for having forms is to collect data. This wizard lacks those very fundamentals.

Server-side examples are none existent, PHP form submission should at least be in the documents - Or so I think.

Tried to use the only way is to hack the script to have a custom type="submit" button. Time to move back to the old and trusted wizards.

in this code validate() js method is used but where is definition of that method. in which file..