how add class to div#id on state change for steps

[Devric]

hi i have 4 buttons set to each step e.g.:

        <div id="form-menu">
            <a href="#=&_book=personal" class="form-personal" onclick="addc('personal')">Your Detail</a>
            <a href="#=&_book=speaker" class="form-speaker" onclick="addc('speaker')">Speaker</a>
            <a href="#=&_book=venue" class="form-venue" onclick="addc('venue')">Venue</a>
            <a href="#=&_book=additional" class="form-additional" onclick="addc('additional')">Additional</a>
        </div> <!-- form menu -->

i made the menu clickable to change steps, but it didn't work so well on validation part, so may remove the on click function, but how do i extend formwiz state so that e.g.: class="form-speaker"(or the 2nd step) will add an active class to it as you click next.

i know you can add state navigation, but that is adding new elements to the form. I only want to add class of current active state to the navigation menu.

[Devric]

by the way, this is the 2 function i added on my tab navigation. to add the active class by reading the browser url, and by pressing the on the step menu for onclick="". probably i don't need these if i can get the state working.

 // add class active to #url
var formpage = location.href.split('_book=');       // get url after the second = sign
if (formpage.length > 1) {                          // if hash is more than 1 characters
    $('a.form-'+formpage[1]).addClass('active');
}

//add active class when hit tab
function addc(active) {
    $('#form-menu > a').removeClass('active');     //remove all active class
    $('#form-menu > a.form-'+active).addClass('active');     // show only #+name
}

[thecodemine]

Hi,

to achieve this you should be able to do something like the following.

Add the form-menu like this (note the "activated" class on the first element):

<div id="form-menu"> <a href="#" class="form-personal activated">Your Detail</a> <a href="#" class="form-speaker">Speaker</a> <a href="#" class="form-venue">Venue</a> <a href="#" class="form-additional">Additional</a> </div>

then add the following code to your javascript:

$(function(){ $("#book").bind("step_shown", function(event,data){ $("#form-menu a").removeClass("activated").filter(".form-" + data.currentStep).addClass("activated"); }) });

This binds a function to the step_shown event which is triggered when a new step is shown. The function removes the activated class of the anchors in the form-menu, then sets the class activated only for the current step. The id of the current step is used to find the anchor with a class = "form-" + the id of the current step.

Note the step id:s of the steps would in this case be "personal", "speaker","venue" and "additional"

Hope this helps.

[Devric]

that is awesome!! thnx problem SOLVED!!!

[Devric]

just found out another issue, once i add this code, it interferes with jqueryUI data picker, or any other links that has href="#".

it basically takes the form back to step1 whenever something with a # is clicked on.

is there a way to make all href="#" to prevent the click??

[thecodemine]

I'm not sure that I understand exactly, could you please elaborate?

I guess that you have historyEnabled : true set when initializing the wizard? This means that the wizard will navigate to the first step when a link is clicked which overwrites the url hash.

"is there a way to make all href="#" to prevent the click??" Yes, the following should prevent the click event on every anchor with href="#" on the page:

                $('a[href^="#"]').click(function(){
                    return false;
                });

Hope this helps, otherwise please send me (or link to) a small working example of a formwizard which displays this issue.

My email is jan.sundman[at]aland.net