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/
bu demo sayfasının kodlarını paylaşbilir misin hocam güzelmiş
birde oraya diğer örnekleride atarsan bence tadından yenmez
Range slider is not working when include jquery step js
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")
}
});
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>
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.
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?
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]")
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.
Hi, Thanks for the great plugin. I want to know how to validate the form fields when moving forward?
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?
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>
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;
}
i've been searching the source for a while now. but can't understand it. is there an api for programmatically changing the step?
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.
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?
Hello,
Is there a way to set doneClass to last step selecter on onFinish event?
It looks to me like the code only allows you to prevent a forward change? Why can't we stop a backwards one?
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.