javascriptjqueryjquery-steps

How to have two buttons in JQuery Steps


I really need some help here. So I am using one Jquery Steps PlugIn. Now in this PlugIn when we go to the last tab it has a button name as "Finish" when clicked calls "onFinishing" Method.

onFinishing: function () {
            var loadedPrefix = MyNamespace.loadedPrefix;
            var inputBoxPrefix = $('#SitePrefix').val();
            $.ajax({
                type: 'POST',
                url: '/Settings/IsPrefixExists',
                data: { newPrefix: inputBoxPrefix, prefixLoadedFromDB: loadedPrefix },
                success: function (data) {
                      // do some stuff here
                    }
                },
                error: function () {
                    DisplayError('Failed to load the data.');
                }
            }); 
        }

Now above works perfectly fine. But my manager wants me to have two button there. One as "Save" and another as "Submit". And clicking on each of them will perform a different action. But this plugin has only one "Finish" button. And it is getting generated via PlugIn's Javascript code. Can I somehow use JQuery/Javascript to have one more button there, and write some code against it.

JS FIDDLE SAMPLE: JS FIDDLE SAMPLE

Image 1: enter image description here

I want something like below Image 2: enter image description here

SAMPLE Example: JS FIDDLE


Solution

  • Using the onStepChanged event found in the Steps plugin documentation...

    You could do this:

    $( window ).load(function() {
      $("#example-basic").steps({
        headerTag: "h3",
        bodyTag: "section",
        transitionEffect: "slideLeft",
        autoFocus: true,
        onFinishing: function () {
          alert("Hello");
        },
        onStepChanged:function (event, currentIndex, newIndex) {
          console.log("Step changed to: " + currentIndex);
    
          if(currentIndex == 2){
            console.log("ok");
            var saveA = $("<a>").attr("href","#").addClass("saveBtn").text("Save");
            var saveBtn = $("<li>").attr("aria-disabled",false).append(saveA);
    
            $(document).find(".actions ul").prepend(saveBtn)
          }else{
            $(".actions").find(".saveBtn").remove();
          }
          return true;
        },
    
      });
    
    
      // on Save button click
      $(".actions").on("click",".saveBtn",function(){
        alert("Saving!");
      });
    });
    

    Updated JSFiddle