oguzhanoya / jquery-steps Goto Github PK
View Code? Open in Web Editor NEW✅ Lightweight jQuery step wizard plugin.
Home Page: https://oguzhanoya.github.io/jquery-steps/
✅ Lightweight jQuery step wizard plugin.
Home Page: https://oguzhanoya.github.io/jquery-steps/
When add any logics (alert, console.log or call APIs) in "onChange" function, they will be carry out twice...I just use the alert do this test, I found when trigger onChange function, the alert will be show twice, could u please help to fix this issue?
bu demo sayfasının kodlarını paylaşbilir misin hocam güzelmiş
birde oraya diğer örnekleride atarsan bence tadından yenmez
i've been searching the source for a while now. but can't understand it. is there an api for programmatically changing the step?
with the demo setup and hooking into the onChange event, the 'validate!' alert is showing console.log() result depend on the number of the newIndex when hitting next from step 2.
$('#demo').steps({
onChange: function (currentIndex, newIndex, stepDirection) {
if (stepDirection == 'forward') {
console.log("currentIndex " + currentIndex + " newIndex " + newIndex + "")
}
return true;
},
onFinish: function () {
console.log("finished")
}
});
I am forced to include an anchor tag in my <li>
which I do not want to do. Why cant we just do:
<li data-step-target="step1">
<li data-step-target="step2">
And later:
<div class="step-content" data-step-id="step1">
<div class="step-content" data-step-id="step2">
Does this hut accessibility?
I've installed the scripts and got the steps working - however, this causes the signature option in contact 7 to stop functioning and doesn't allow you to draw a signature.
If I remove the scripts for steps it works again so it does seem to be clashing with it.
There aren't any errors to work with which is frustrating.
I was curious if you'd mind publishing jquery-steps to npm? It looks like the name jquery-steps
is taken, but you could change name
in package.json to jquery.steps
which is available and then npm publish
and it'd allow for much easier package management when using webpack.
Should these have spaces?
https://github.com/oguzhanoya/jquery-steps/blob/master/dist/jquery-steps.js#L70-L72
IE: $(".step-steps[data-step]")
!== $(".step-steps [data-step]")
Range slider is not working when include jquery step js
Hi,
I am trying to get this working inside WordPress but keep getting this error:
Uncaught TypeError: can't access property "noop", $ is undefined
and also
Uncaught TypeError: $(...).steps is not a function
The dist/jquery-steps.js is loading as depending on jQuery but still get this error. WordPress is running jQuery 3.5.1.
I already tried setting up de init script as below, but still getting the error. Do you have any advice?
<script> jQuery( document ).ready(function($) { $('#demo').steps({ onFinish: function () { alert('complete'); } }); }); </script>
Yesterday, I tried to integrate this plugin into a WordPress site, and it failed. Upon investigating I found the plugin fails if jQuery.noConflict() is called. So, I tested it with stock jQuery from the jQuery site and added a noConflit and bam the same noop error.
Uncaught TypeError: Cannot read properties of undefined (reading 'noop')
It's the same closed issue posted at #19
But it isn't resolved actually.
It looks to me like the code only allows you to prevent a forward change? Why can't we stop a backwards one?
For me, with the demo setup and hooking into the onChange event, the 'validate!' alert is showing 2 times when hitting next from step 2.
<script>
$('#wizard').steps({
onFinish: function() {
alert('yo');
},
onChange: function(currentIndex, newIndex, stepDirection) {
if( stepDirection == 'forward' ) {
alert('validate!');
}
return true;
}
});
</script>
Hi
Thank you for this amazing library.
In a new web app I have to create dynamic tabs with dynamics fields in them. I don't know how many tabs there are, and I don't know how many fields exists in each tab.
Thus on clicking next, I have to raise an event ( validationRequested) and wait for all fields of the current tab to validate and return. Some of those fields need to validate based on server, thus they might take even some seconds before validation results can be known.
Here's the code I come up with. But it does not work:
onChange: function (currentIndex, newIndex, stepDirection) {
if (stepDirection === "backward" || stepDirection === "none") {
return true;
}
if (app.allowChangeToNextStep) {
app.allowChangeToNextStep = false;
return true;
}
var stepFields = app.findScopeFields($('#wizardForm .step-tab-panel[data-step=step' + (currentIndex + 1) + ']'));
var fieldsThatNeedValidation = app.filterFieldsThatNeedValidation(stepFields);
app.validateForm(fieldsThatNeedValidation)
.then(function (submissionResults) {
if (submissionResults.success) {
app.allowChangeToNextStep = true;
wizard.data('plugin_Steps').next();
}
return false;
})
.catch(function (error) {
console.error(error);
});
return false;
},
This causes to go forward two steps.
Can you provide built-in support for async scenarios?
Hello,
Is there a way to set doneClass to last step selecter on onFinish event?
Hi, Thanks for the great plugin. I want to know how to validate the form fields when moving forward?
When I try to return false when in the 4th index page to hold it to the next step, it goes directly to the first page, is there a way when the return false function stays on the current page ?
Here is the code condition, each function reverses a boolean value :
onChange: function onChange(currentIndex, newIndex, stepDirection) {
index = newIndex;
if (index==1){
return sendData1();
} else if (index==2){
return sendData2();
} else if (index==3){
return sendData3();
} else if (index==4){
return sendData4();
} else if (index==5){
return sendData5();
} else if (index==6){
return sendFinalData();
}
return true;
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.