Dynamically create steps for jQuery Steps
I am having some trouble dynamically creating some steps using the jQuery Step Wizard plugin.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"><\/script>')</script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js" type="text/javascript"></script>
<script>$.mobile || document.write('<script src="js/jquery.mobile-1.4.0.min.js"><\/script>')</script>
<script src="scripts/libs/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script src="scripts/libs/jquery.steps-1.0.4.js"></script>
<script src="scripts/libs/jquery.validate-1.11.1.min.js"></script>
</head>
<body>
<script>
$(document).ready(function () {
$("#wizard").steps();
var wizard = $("#wizard").steps();
wizard.steps("add", {
title: "HTML code",
content: "This is a test"
});
wizard.steps("add", {
title: "HTML code2",
content: "This is a test2"
});
});
</script>
<div id="wizard"></div>
</body>
</html>
When this page is run, all that is shown on the web page is a "next" and a "previous", yet no steps at all.
The console error I am getting is this:
SCRIPT5022: One or more corresponding step titles are missing. jquery.steps-1.0.4.js, line 1252 character 5
Can I have some help to get this working?
Thanks in advance
Answer
It looks like you need to include something in your call to $('#wizard').steps();
Look at the basic example.
$("#wizard").steps("add", {
title: "Step Title",
contentMode: "async",
contentUrl: "data.xml"
});
Try changing yours to
$(function () {
$('#wizard').steps("add", {
title: "HTML code",
content: "This is a test"
})
.steps("add", {
title: "HTML code2",
content: "This is a test2"
});
});