rstaib / jquery-steps Goto Github PK
View Code? Open in Web Editor NEWA powerful jQuery wizard plugin that supports accessibility and HTML5.
Home Page: http://www.jquery-steps.com
License: MIT License
A powerful jQuery wizard plugin that supports accessibility and HTML5.
Home Page: http://www.jquery-steps.com
License: MIT License
Hello.
How can I send to a server some values and to get from it some values too?
The .content area should auto expand and contract to accommodate the content. This would be a very welcome addition.
Great plugin! I noticed on your examples that the tabs will shrink down and turn into 4 rows if you open on mobile or make your browser small. I installed bootstrap into my code and tried to replicate your source closely (like use a row-fluid and a span) but I can't get them to wrap - the tabs still just get really small but stay side by side. Can you offer any tips to get this to work? What versions of the .js and .css are you using?
Hi, first of all...great plugin! - I already posted my guestion on stackoverflow, but I couldn't attach the required tag: 'jquery-steps' to it.
My question is about dynamic steps. The content of the next step should depend on the answer of the previous step. How can I send additional data with the AJAX call to my backend? My backend will serve the content of the next step based on that value.
I searched the documentation and source code, but couldn't find an answer. Thank you in advance
Hi Rafael,
Thanks for your work on this plugin. I was wondering if you had any recommendations for how to do form validation on the server side. I would like to POST
the form content from one of the steps to the server and prevent going to the next step until the response is received.
By browsing your code I guess that maybe the onStepChanging
option could be changed to be a function that returns a Deferred Object
and then you could attach all the stuff in goToStep
to its done
callbacks (such as saving new state and changing visualization). Is there an easier way?
Anyway, just an idea since most applications do require all client-side validation to be mirrored on the server-side.
Thanks for a great plugin. Wish I would've found it sooner. Makes my long forms much more readable. :)
I do have an issue when inserting steps:
$('#wizard').steps('insert', 1, {
title: 'Bla',
contentMode: "async",
contentUrl: "url to whatever"
});
Works just great but when I try to set enableContentCache: true, it still goes in to the
if (!options.enableContentCache || !currentStep.contentLoaded) statement in the jquery.steps.js file (line 645). Seems like currentStep.contentLoaded is always false. Is there no way to cache the contents of these inserted steps?
When a user reaches a certain step i want him not to be able to go back to the previous steps. Is this possible?
Hi Rafael,
Is there a way to render the interface without the tabs? I'd like to have the user interact only with the Next and Previous buttons.
Thanks,
Chris
I am looking at the examples both on your site and on my web app and am noticing that the currentIndex variable is always 'undefined' when getting to the onFinished and onFinishing event. I was using this to do some validation and discovered this.
I would think this should be passed to the event or it should be removed from the documentation.
Will allow convenient CSS targeting.
For example, output would be:
<h1 id="steps-uid-1-0" tabindex="-1" class="active title" style="display: block;">First Step</h1>
<div class="active body" style="display: block;">
First Content
</div>
After the Content has been loaded using the async ContentMode, there should be a way to attach a callback function. Or at least allow the Content option to call a ajax function.
in this code validate() js method is used but where is definition of that method. in which file..
I posted this on stackoverflow - http://stackoverflow.com/questions/20503444/jquery-steps-a-href-triggering-tabs but thought I should post it on here as well.
Is it possible to have a link or button trigger the click on tab event? Someone said the function is under development...
On this example http://www.jquery-steps.com/Examples#basic, I would like to call the anchor (ie below) and have the tab function as if I had clicked the tab itself.
Step 3 or Pager
like the title said :)
I am looking for the functionality to reset the currentIndex of steps to be resetted to the first step once onFinished is called
I would like to disable next button and set text to loading. Is there any way to do it.
There any method to reset and restart the steps in the first step?
So I added a button with a custom click event that's written in a separate js file. I do the .steps method inside a script block in the html file and then all of a sudden the button's click event doesn't work. Do you block/reset click events from elements inside the wizard after .steps is called? Will I have to repaste the event into the button after the .steps method is called?
I cant get it to work with jQuery 2.0. Can that be fixed? Otherwise I need to find another solution, as its not futureproof
Provide several CSS themes to help People get started quickly.
Hello, and congratulations for your work.
It is possible to make sure that the height of the "content" adapts automatically to its content?
Maybe setting a minimum height, below which one should not go down, and then doing so that the height of the content increases in case there is a very long content.
I used your script, but in some steps of the wizard I have a content too long, which consequently is not shown
Thanks
Hello,
Thanks for sharing this nice plugin.
I have a question.
I need to validate each of steps based on AJAX request.
I've been trying to deal with onStepChanging() but seems it doesn't work well.
Here's what i've been doing:
<script>
var jSteps = [];
</script>
<div id="competition-wizard">
<h3>First Step</h3>
<section>
<div>First Step</div>
<script>
jSteps.push('first_step');
</script>
</section>
<h3>Second Step</h3>
<section>
<div>Second Step</div>
<script>
jSteps.push('second_step');
</script>
</section>
</div>
<script>
function checkStatus(field) {
$.ajaxSetup({
cache: false
});
return $.get(ajaxUrl, {
"field": field
},
function(data) {
return data;
}, "json");
}
$(function() {
$("#competition-wizard").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
stepsOrientation: "vertical",
onStepChanging: function(event, currentIndex, newIndex) {
if (jSteps[currentIndex] === 'first_step') {
return checkStatus('first_step').done(function(response) {
return response.success;
});
} else if (jSteps[currentIndex] === 'second_step') {
return checkStatus('second_step').done(function(response) {
return response.success;
});
} else if (currentIndex > newIndex) {
$("#competition-wizard .body:eq(" + newIndex + ") label.error").remove();
$("#competition-wizard .body:eq(" + newIndex + ") .error").removeClass("error");
return true;
}
return false;
},
onStepChanged: function(event, currentIndex, priorIndex) {
},
onFinishing: function(event, currentIndex) {
},
onFinished: function(event, currentIndex) {
}
});
});
</script>
Am I doing it incorrectly?
TIA
Hi,
I'm trying to use jquery-steps with datepicker, but getting a weird issue. Datepicker's attributes loading well, but box not opening.
It could be conflict.
One of the most fundamental reasons for having forms is to collect data. This wizard lacks those very fundamentals.
Server-side examples are none existent, PHP form submission should at least be in the documents - Or so I think.
Tried to use the only way is to hack the script to have a custom type="submit" button. Time to move back to the old and trusted wizards.
Hello,
I'm having a hard time figuring out how to wire up the finish button and make it do anything productive. Everything else is going okay. I've looked closely at this page for reference: http://www.rafaelstaib.com/category/jQuery-Steps at the onFinished event but I guess I am very confused.
I'm parsing JSON and dynamically injecting tabs based on the JSON. That is going well. But I can't figure out how to make the Finish button fire? I would like to have all the form values from the tabs saved in session and redirect to another page.
Please send advice.
Thanks!
Chris
Hi,
I am using ajax Calendar control in asp.net web application. Its working fine initially but after installing jquery-steps plugin(plugin works correctly)ajax calendar control is not working.
Iam using update panel in my application.Controls inside update panels are not working.What could be the problem.
hi,
thanks for the great plugin.
is there any way that i can use skip button to skip that particular steps without validating.
Hi,thank For your nice jquery step
I want to use your step wizard in my project but i need to use Validator of .net too
and button validate input data ,help me plz
what i must do?
Hello there,
I setup a web page with your wonderful Steps plugin and i just realized that it is blocking any interaction with sliders created with this plugin: http://ionden.com/a/plugins/ion.rangeSlider/en.html
I am not sure which plugin is the culprit but basically, once you have a slider inside a section of steps it shows up fine but you can't interact with it as if it has been disabled somehow. If i comment out the call to the steps plugin all sliders work well.
I figured this might have something to do with events or something like that but after a few hours of debugging i couldn't make any of it. Could you take a look at this please?
Thanks!
I would like to go to a specific step on the wizard.
The solution suggested on this stackoverflow answer http://stackoverflow.com/a/20683212/2866985 worked for me, but it would be preferable that the solution is part of the original code.
Thanks.
I pasted the example into a HTML file and when I fire it up - nothing. I then add some steps as per the doco and it just shows the plain HTML. So, I think the doco is missing something ...
I'm looking at adding jquery-steps to an older project, running jQuery 1.7.1. Is there a minimum level of jQuery required for using jquery-steps?
It would be a great feature to allow for easy customization of the various presentation templates.
For instance, it would be ideal to customize the steps navigation, as I would like to make it more Twitter Bootstrap compatible with pillboxes or tabs.
I have used the solution mentioned here http://stackoverflow.com/a/20683212 to set a specific step on when the page load. But the issue is that I can't go back because an error: Uncaught TypeError: Cannot read property 'settings' of undefined jquery.validate.js:900
When I start the debugging mode it works. What could be the issue?
frist of all thanks for great work
please give some detailed examples to implement. your demos are good but where can I find the code samples of demos.
thank you
Hi Rafael,
I have a text box on each tab, in a for loop, how can I step back through the tabs and get the value of each text box? I've tried wizard.steps.getStep(j) but that's not working for me. Any help greatly appreciated.
-Chris
for (var j = 0; j <= wizard.length; j++) {
var mystep = wizard.steps.getStep(j);
var myContent = mystep.content;
alert(myContent);
}
Hi,
Is it possible to display the wizard/pagination bar at top AND bottom.
Indeed one of my page is very long and I want the users to be able to go to the next page without having to scroll to the top of the page.
I need nested wizards, is this possible?
And is it possible that the nested wizard is dynamic, i mean:
main wizard: step1 | step2 | step3
then, step 2 would have a nested wizard inside like subtab1 | subtab2 ...
This substeps would be created dinamically in step1 but instead of being added to the main wizard they would be added to nested wizard, like this:
I've readed the doc and i can add tabs dinamically, but i can't find anything about nested ones.
Can't pass in a labels property to the Defaults object without the rest becoming undefined.
For example:
$(".wizard").steps({
headerTag: "h5",
labels: {
previous: "Back"
}
});
(E.g., the next property becomes undefined.)
Your script is awesome and just what I need.
But.. could you please make a few stand alone examples? I'm trying to follow your documentation for the "Advanced Form Example" - but it's not functioning properly as in the demo. As fully functioning standalone example (with comments) - would go a long way.
Thank you!
Hi,
I want to enable and disable all steps not on load but afterwards by click. How can I achieve this? Thanks.
G.
Hello,
is it possible to pass any GET parameters (like input data from a former step) to an async loaded step?
Thanks
Can I use this as package in meteor to create wizard?
Bower Install.
bower install jquery-steps
I will make a pull request in the next couple days if there is interest in this. Please +1 if you are interested ๐.
Update:
Currently using:
bower install https://github.com/rstaib/jquery-steps.git
How get Total number of steps i.e total count in current wizard ?? any method ??
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.