Wizard content not visible after closing and opening about bootstrap-application-wizard HOT 3 CLOSED

I figured out the problem. The plugin is trying to create a new wizard and show it. But i'm unable to resolve it.

from bootstrap-application-wizard.

@rajprince

To resolve this, first initialize all wizards, and save them in variable.

var wizard_32 = $("#wizard_32").wizard({
    show: false
});

On your click event you them only have to do refer to the variable.

$(".button").on("click", function() {
    var id = $(this).data("btnid");
    switch (id) {
        case 32:
            wizard_32.show();
            break;
    }
});

I hope you understand what I'm trying to show here.

Hope this helps you in the right direction.

from bootstrap-application-wizard.

I'm doing the exact same thing, but again the issue is the re-initilalizing of the wizard component, but it seems illogical to load 100+ wizard forms if you are only going to use 1 or 2 of them on a page...

** EDIT **

here is how I fixed the issue...

<script>
    $(function() {

        var wizards = [];
        var options = {
            keyboard : false,
            contentHeight : 400,
            contentWidth : 700,
            backdrop: 'static'
        };            

        $.each($('.wizard'), function(index, value) {
            wizard = $(value);
            wizards[wizard.attr('id')] = wizard.wizard(options);
        });

        $.fn.wizard.logging = true;

        $('a[data-wizard-id]').on('click',function(e) {
            e.preventDefault();

            var form = $(this).data('wizard-id');
            wizards[form].show();                
        });

    });
</script>

This way, all wizards will be loaded when the page loads (for that page) and pushed into the wizards array... Then, you can reference each wizard by the 'id' which is now the array key index of that initialized wizard.

from bootstrap-application-wizard.