search

VinceG / twitter-bootstrap-wizard

This twitter bootstrap plugin builds a wizard out of a formatter tabbable structure. It allows to build a wizard functionality using buttons to go through the different wizard steps and using events allows to hook into each step individually.
MIT License
1.39k stars 676 forks source link

Adding option to instance #151

Closed rhythmicdevil closed 8 years ago

rhythmicdevil commented 8 years ago

I have a case where I have two JS files. The first creates the instance. The second is only loaded on some views and in it I want to add an option to the wizard. I cant seem to get it to work.

File 1:

$(document).ready(function() {
    $('#rootwizard').bootstrapWizard({
        onTabShow: function(tab, navigation, index) {
            var total = navigation.find('li').length;
            var current = index+1;
            var percent = (current/total) * 100;
            $('#rootwizard').find('.progress-bar').css({width:percent+'%'});

            // If it's the last tab then hide the last button and show the finish instead
            if(current >= total) {
                $('#rootwizard').find('.pager .next').hide();
                $('#rootwizard').find('.pager .finish').show();
                $('#rootwizard').find('.pager .finish').removeClass('disabled');
                /*
                 * Hide the link to the advanced view when not on the first page.
                 */
                $("a[href='advanced']").parent().hide();
            } 
            else if (current == 1){
                $('#rootwizard').find('.pager .previous').hide();
                $('#rootwizard').find('.pager .cancel').show().removeClass('disabled');
                /*
                 * Show the link to the advanced view when on the first page.
                 */
                $("a[href='advanced']").parent().show();
            }
            else {
                $('#rootwizard').find('.pager .previous').show();
                $('#rootwizard').find('.pager .cancel').hide().addClass('disabled');
                $('#rootwizard').find('.pager .next').show();
                $('#rootwizard').find('.pager .finish').hide().addClass('disabled');
                /*
                 * Hide the link to the advanced view when not on the first page.
                 */
                $("a[href='advanced']").parent().hide();
            }
        }
    });
});

File 2:

$(document).ready(function() {

        $('#rootwizard').bootstrapWizard({
            'onNext': function (tab, navigation, index){
                console.log(this);
            }
        });

});
VinceG commented 8 years ago

@rhythmicdevil file2 will create a new instance. currently events must be declared at instance initiation.

You can do however something like this:

$(document).ready(function() {
    $('#rootwizard').bootstrapWizard({
        onTabShow: function(tab, navigation, index) {
            var total = navigation.find('li').length;
            var current = index+1;
            var percent = (current/total) * 100;
            $('#rootwizard').find('.progress-bar').css({width:percent+'%'});

            // If it's the last tab then hide the last button and show the finish instead
            if(current >= total) {
                $('#rootwizard').find('.pager .next').hide();
                $('#rootwizard').find('.pager .finish').show();
                $('#rootwizard').find('.pager .finish').removeClass('disabled');
                /*
                 * Hide the link to the advanced view when not on the first page.
                 */
                $("a[href='advanced']").parent().hide();
            } 
            else if (current == 1){
                $('#rootwizard').find('.pager .previous').hide();
                $('#rootwizard').find('.pager .cancel').show().removeClass('disabled');
                /*
                 * Show the link to the advanced view when on the first page.
                 */
                $("a[href='advanced']").parent().show();
            }
            else {
                $('#rootwizard').find('.pager .previous').show();
                $('#rootwizard').find('.pager .cancel').hide().addClass('disabled');
                $('#rootwizard').find('.pager .next').show();
                $('#rootwizard').find('.pager .finish').hide().addClass('disabled');
                /*
                 * Hide the link to the advanced view when not on the first page.
                 */
                $("a[href='advanced']").parent().hide();
            }
        },
        'onNext': function (tab, navigation, index){
            if(typeof onNextCallback == 'function') {
                onNextCallback();
            }
        }
    });
});

file 2

function onNextCallback() {
    ....
}

You get the idea.