javascriptjqueryjquery-steps

JQuery Steps Wrapper


I am using jQuery Steps library but my form structure is generated and I can't change it. I have a structure similar to this:

<form method="POST" action="#" id="form">
    <div>
        <div>some necessary content</div>
        <div>some necessary content</div>

        <div id="" class="wrapper" data-name="group">
            <div class="another-class">
                <label>Group</label>
            </div>
            <div class="some-other-class">
                more codes
            </div>
        </div>

        <div id="" class="wrapper" data-name="group">
            <div class="another-class">
                <label>Group</label>
            </div>
            <div class="some-other-class">
                more codes
            </div>
        </div>


        <div class="submit">
            <button type="submit">Submit</button>
        </div>
    </div>
</form>

the problem is that jQuery Steps doesnt work with wrappers for title and content

$("#form").steps({
    headerTag: ".wrapper label",
    bodyTag: ".wrapper .some-other-class",
    transitionEffect: "slideLeft",
    autoFocus: true
});

here is my first attempt: fiddle and also here is my second attempt: fiddle

So I want a step for each wrapper div with label as title of the step but I can't get it to work.


Solution

  • you need to manipulate the DOM and elements generated with JS to give him the right structure.

    // Insert new div contains your steps    
    $('<div id="steps"></div>').insertBefore('.submit');
    
    // Loop each step
    $('.wrapper').each(function(){
        // Add to steps container, the title
        $('#steps').append('<div class="title">' + $(this).find('label').text() + '</div>');
        // Add to steps container, the content
        $('#steps').append('<div class="content">' + $(this).find('.some-other-class').html() + '</div>');
        // Remove useless code
        $(this).remove();
    
    });
    
    // Now, you have the right structure, you can fire your lib script
    $("#steps").steps({
        headerTag: ".title",
        bodyTag: ".content",
        transitionEffect: "slideLeft",
        autoFocus: true
    });