How to disable NEXT button on step 1 of FuelUX Wizard

Question

I am creating a wizard control pages using the FuelUX wizard plugin http://getfuelux.com/javascript.html#wizard

And I am trying to disable the NEXT button only on the STEP1 of the wizard.

Kindly check this image for better understanding: https://i.stack.imgur.com/YLbnl.png

I would love to have some help on this. Let me know if need anything from my side.

You want to disable Next button in Step1. So how you want to enable it back and how would you like to navigate to next step??? Just asking because the image is not opening for me and it will be good if you place your complete requirements here itself. — Guruprasad J Rao, Mar 24 '15 at 06:23
Hi guru..I will add a button inside and trigger to next step via jquery. — MercuryUIX, Mar 24 '15 at 06:47
Ok. So you don't want the next button and you have an alternate button which does the functionality right?? — Guruprasad J Rao, Mar 24 '15 at 07:15

Guruprasad J Rao · Answer 1 · 2015-03-24T10:18:21.200

Ok. After much research I just have this solution for you. You need to modify the plugin fuelux.js. Take unminified version of fuelux.js and find below line of code

var canMovePrev = ( this.currentStep > 1 ); //remember, steps index is 1 based...
var isFirstStep = ( this.currentStep === 1 );
var isLastStep = ( this.currentStep === this.numSteps );

// disable buttons based on current step
if ( !this.options.disablePreviousStep ) {
         this.$prevBtn.attr( 'disabled', ( isFirstStep === true || canMovePrev === false ) );
}

// change button text of last step, if specified
var last = this.$nextBtn.attr( 'data-last' );
if(isFirstStep) //Add this line
{
    this.$nextBtn.attr( 'disabled', ( isFirstStep === true || canMoveNext === false ) );
}

The above line you can find it in setState: function() { which is in Line number 3652

Let me know if you face any issue

EDIT: and to work with you alternate next button you can write it as below

$(document).ready(function(){
   $('.btnext').on('click',function(){
         $('.wizard').wizard('next');
         $nextBtn = $('.wizard').find( 'button.btn-next' );
         $nextBtn.removeAttr('disabled');
    });
});

Add your alternate button wherever you want and just add a class btnext to it.

score 0 · Answer 2 · answered Jun 05 '15 at 15:24

I really tried all the suggestions given by peoples. I dont know why none seemed to work for me. May be bacause I didn't provide enough information. Out of several methods I tried. I found this one to be the easiest.

protected void NextButton_Click(object sender, WizardNavigationEventArgs e)
{
       //Suppose You have a control on your webpage. Just check if it has
       //the information you require. In my case lblpasskeytextbox
       //and if the condtion is not fulfilled I am not letting user to move
       //next page
        if (lblPasskeyInformation.Text[0] == 'I')
        {
            e.Cancel = true;
            return;
        }
}

score 0 · Answer 3 · answered Jan 04 '17 at 19:50

After reading the fuel ux documentation, here seems to be a hack that allows you to disable a specific step without modifying any source fuelux.js code.

    $wizard.on('actionclicked.fu.wizard', function (evt) {

    //Check the current step 
    var currentStep = $wizard.wizard('selectedItem').step;

    //If current step needs to be disabled, disable it and then return.
    if (currentStep === 1)
    {
        evt.preventDefault();
        return; 
    }



});

Please note that $wizard here is just my way of saying $('#myWizard') as described in the fuel ux documentation.

How to disable NEXT button on step 1 of FuelUX Wizard

3 Answers3