Jquery SmartWizard Add Extra Button

Question

How to add the extra buttons in jquery smart wizard

Tried Code :

I have added the toolbar section code.. Still its not working. Can someone help me on this?

$('#wizard').smartWizard({
            transitionEffect: 'slide',
            keyNavigation: false,
            onLeaveStep:leaveAStepCallback,
            onShowStep:showAStepCallBack,
            labelNext:'Save', 
            labelPrevious:'Back',
            labelFinish:'Finish',
      enableFinishButton: true,
            selected: 0,
        // step bar options
        toolbarSettings: {
          toolbarPosition: 'bottom', // none, top, bottom, both
          toolbarButtonPosition: 'left', // left, right
          showNextButton: false, // show/hide a Next button
          showPreviousButton: true, // show/hide a Previous button
          toolbarExtraButtons: ['NextBtn']
        }, 
        });

Expected Output

I'm trying to add one more button near to "Next" button.

this plugin is no more maintained. If you need to updated funcionalities you need to fork it on github..... **toolbarSettings** comes from another wizard plugin. It seems you are messing up the code. — gaetanoM, Aug 17 '18 at 13:22

score 4 · Answer 1 · answered Oct 14 '18 at 10:48

If anyone has the same problem, try this way:

    $('#smartwizard').smartWizard({
        toolbarSettings: {
            toolbarExtraButtons: [
                $('<button></button>').text('Finish')
                            .addClass('btn btn-info')
                            .on('click', function(){ 
                                alert('Finish button click');                            
                            }),
                $('<button></button>').text('Cancel')
                            .addClass('btn btn-danger')
                            .on('click', function(){ 
                                alert('Cancel button click');                            
                            })
            ]
        },
    });

score -1 · Answer 2 · answered Aug 17 '18 at 13:04

-1

In document.ready() function you can append you extra button like:

$('.actionBar').append("<button class='buttonNext'>Extra</button>")

you can give your class and id so you can call any function on button click.

answered Aug 17 '18 at 13:04

Jigarb1992

828
2
18
41

This has no effect in the current version, and it is misleading people. – Mecanik Oct 11 '18 at 13:10
@NorbertBoros, as per the question asked the answer is right, and in my given solution I have written a pure jQuery and it is not misleading anyone. If you know the correct answer then please post it. – Jigarb1992 Oct 12 '18 at 09:35

Jquery SmartWizard Add Extra Button

2 Answers2