1

I have a simple wizard that only needs a 'previous' and 'next' button. On the the third and final step, the next button launches a file uploader.

So far, I have this:

I did this to make it easier to reference the buttons themselves.

$( document ).ready(function() {

  $("#wizard .actions a[href='#next']").attr("id","next_button");
  $("#wizard .actions a[href='#previous']").attr("id","previous_button")

 });

Then here's the body of my code:

  $("#wizard").steps({

 bodyTag: "section",
 transitionEffect: "slideLeft",
 autoFocus: true,
 enableFinishButton: false,
  enableCancelButton: false,

 onStepChanged: function (event, currentIndex, priorIndex) {


      if (currentIndex ==2 ) {
          console.log('currentIndex is:'+currentIndex);
               //this returns '2' which is correct

        $("#next_button").show();
        $(function(){
            $("#next_button").click(function(){
                //custom function here
            });
        });

When I get to the third step (currentIndex = 2), the next step button disappears so I tried to do a $("#next_button").show(); but that does not work.

Any help, much appreciated!

tomish
  • 77
  • 1
  • 13
  • why this ready function **$(function(){....})** used in between – Akshay Dec 15 '16 at 05:27
  • Why next_button disappears? in jquery-steps the buttons don't disappear on step change. Are there any code to do that? You should give more complete code. – Hank Phung Dec 15 '16 at 09:04
  • The function in between is my custom function that will fire when the next button is clicked, and it kinda makes sense that the next button would disappear on the last step, but I am trying to override that. Alternatively, I would settle for the 'finish' button to show on only the final step but $("#final_button").show(); does not work either. And I have tried it with $("#wizard .actions a[href='#finish']").attr("id","finish_button"); – tomish Dec 15 '16 at 15:11

1 Answers1

2

it disappears because you set it to do so by addingenableFinishButton: false so, you should remove that and simply change the text of the last step's button to "next" instead of "finish" from the labels

labels: {
    finish: "Next"
}

The last button will have this href

<a href="#finish" role="menuitem">Next</a>

So, you can either add a custom ID to it as you did to the next and previous buttons. or you can simply use something like this

$('a[href="#finish"]').click(function() {
     //custom function here
});

Which will run your custom function on last "Next" button's click. Without needing to check the step or anything.

Hope that helps.

Ahmed Mosaad
  • 41
  • 5