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
I want something like below Image 2:
SAMPLE Example: JS FIDDLE
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!");
});
});