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

[ghost]

Hi,

First thanks for great work. I put a anchor link in my wizard section. Now i want when user click this anchor link then go the next step or specific step. How i do this ?

Regards Sarwar

[ghost]

Also i notice another thing when i put following link plugin with jQuery Steps plugin then following link plugin not work properly. How fix this problem ?

https://github.com/seiyria/bootstrap-slider http://ionden.com/a/plugins/ion.rangeSlider/

Can you please tell me how i solve above both of issue. Eagerly waiting for your response. Thank advanced.

[arthurkarganyan]

Hello! I use this dirty trick: $('#wizard-t-1').click(); =)

[ghost]

Hi,

Thanks for your answer. I'm not understand you answer properly. Sorry for that. I have a anchor tag like this Skip this step in my first step.

Now i want when user click this anchor tag then go second step. How i do this ?

Regards Sarwar

[arthurkarganyan]

When the wizard is generated, it has steps like links - , then you can click programmatically using jquery click method. BUT! This is possible only when the 'step link' is clickable, not grey. For example, lets go to http://jquery-steps.com/Examples and open web developer console. Using it, we can find that on the first wizard, the first step(Keyboard) is < a id="wizard-1-t-0" aria-controls="wizard-1-p-0" href="#wizard-1-h-0"> and if we click on the next button, going to the next (Effects) step, we can go back using javascript: $('#wizard-1-t-0').click();

Also you probably should find on what step your anchor is.

I hope my idea will be helpful.

Best regards, Arthur

[arthurkarganyan]

Also I want to add, that every step on the wizard except current is hidden, so you can not go the the hidden anchor link, that is not on current step.

[ghost]

Hi Arthur,

Thanks a lot for your kind help. Lack of my programming knowledge i'm not understand it properly. Sorry for that. I make a fiddle for demonstration.

http://jsfiddle.net/Sarwarir/rrL3A/

Now when user click "Skip this step" link then it's go the next step or specific step. How i can do this ?

Regards Sarwar

[arthurkarganyan]

Hi Sarwarir Sarwar,

Thank you for example. I slightly understood you. My solution is: http://jsfiddle.net/rrL3A/1/ Skip step - is 'alias' for next button.

Best regards, Arthur

[ghost]

Hi Arthur,

Great! It's wok fine. Thanks a lot :)

Regards Sarwar

[sravanthim]

what does saveState do? according to the documentation, it saves the last selected active tab to a cookies. I tried setting saveState to true, but on page reload, its not saving the state.

Thanks, Sri

[mogambooo]

stepsWizard.steps("next"); it will move to next step :-)

[laxen00]

Hi Arthur,

i need the solution too but i can't see the jsfiddle that you created, can you re create that so i can see? i really appreciate that

[SamarMuhammad]

Hi,

Thank you for your awesome work.

I would like to run the wizard in circular way. For example rather than hiding the Next button, user could click on Next button and control should move to the first section again.

Could you please help me on this matter. Thanks.

[Rmathusuthanan]

Hi @mdgolamsarwar

I need to create the programmatically in alpaca wizard steps. its any possible to do that? i can't see the jsfiddle that you created, can you re create that so i can see?

[Rmathusuthanan]

Hi Team I Created form builder on JsFiddle . I have some issues on Form Builder JSFiddle Link : https://jsfiddle.net/mathusuthanan/zkerhd8v/

1) Now I created the steps using hard-Code. I need to create the steps on dynamically.
2) I can’t able reordering the field after inserting. 3) I can’t able to insert the field in the 2nd page . If I select second page and insert field on that page it is inserted on the first page.

[karygrafika]

@arthurkarganyan Hi, I'm with the same issue as @mdgolamsarwar. Could you please share your solution in http://jsfiddle.net again, It seems it is not been loaded anymore. Thank you for your assistance :).

[ramansharma89]

@karygrafika : Here is a simple example. Let's suppose you have a button <a href="" class="mybutton">Go to step 1</a>

Now you need to check the ID of you the first tab, which you can do by using "Inspect element/ Developer tool" in any browser. Here is the code from jQuery Steps Example page ("Basic form example"):

<div class="steps clearfix">
<ul role="tablist">
<li role="tab" class="first current error" aria-disabled="false" aria-selected="true"><a id="steps-uid-8-t-0" href="#steps-uid-8-h-0" aria-controls="steps-uid-8-p-0"><span class="current-info audible">current step: </span><span class="number">1.</span> Account</a></li>
<li role="tab" class="disabled" aria-disabled="true"><a id="steps-uid-8-t-1" href="#steps-uid-8-h-1" aria-controls="steps-uid-8-p-1"><span class="number">2.</span> Profile</a></li>
<li role="tab" class="disabled" aria-disabled="true"><a id="steps-uid-8-t-2" href="#steps-uid-8-h-2" aria-controls="steps-uid-8-p-2"><span class="number">3.</span> Hints</a></li>
<li role="tab" class="disabled last" aria-disabled="true"><a id="steps-uid-8-t-3" href="#steps-uid-8-h-3" aria-controls="steps-uid-8-p-3"><span class="number">4.</span> Finish</a></li>
</ul>
</div>

As you can see that the ID for first tab is "#steps-uid-8-t-0"

so to go to first step, all you need to do is click this first tab using jquery (virtually simulate the click) like this:

$('.mybutton').click(function(e){ $("#steps-uid-8-t-0").click(); });

Note: This above mentioned HTML code is generated by teh jquery Step plugin in the browser. So you won't find this in your file. I extracted this code using Developer Tool of Google Chrome browser.