Geek Answers Handbook

Uncaught TypeError implementing Fuelux wizard

I am trying to implement the Fuelux wizard function and hit a brick wall. I'm just trying to make a working copy of a live example , but keep getting an error in my console:

Uncaught TypeError: Object [object Object] has no method 'wizard'

I find a lot of documentation a bit overwhelming and appreciate some clarity on this subject in plain [or more clear] English.

My markup:

 <!DOCTYPE html> <html class="no-js fuelux"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>E-Learning</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/fuelux.min.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <div class="container"> <div id="my-wizard" class="wizard"> <ul class="steps"> <li data-target="#step1" class="active"><span class="badge badge-info">1</span>Step 1<span class="chevron"></span></li> <li data-target="#step2"><span class="badge">2</span>Step 2<span class="chevron"></span></li> <li data-target="#step3"><span class="badge">3</span>Step 3<span class="chevron"></span></li> <li data-target="#step4"><span class="badge">4</span>Step 4<span class="chevron"></span></li> <li data-target="#step5"><span class="badge">5</span>Step 5<span class="chevron"></span></li> </ul> <div class="actions"> <button class="btn btn-mini btn-prev"> <i class="icon-arrow-left"></i>Prev</button> <button class="btn btn-mini btn-next" data-last="Finish">Next<i class="icon-arrow-right"></i></button> </div> </div> <div class="step-content"> <div class="step-pane active" id="step1"> ... </div> <div class="step-pane" id="step2"> ... </div> <div class="step-pane" id="step3"> ... </div> </div> </div> <script src="js/vendor/jquery-1.9.1.min.js"></script> <script src="js/bootstrap.js"></script> <script src="js/require.js"></script> <script src="js/wizard.js"></script> <script> $(document).ready(function(){ $('#my-wizard').on('change', function(e, data) { console.log('change'); if(data.step===3 && data.direction==='next') { // return e.preventDefault(); } }); $('#my-wizard').on('changed', function(e, data) { console.log('changed'); }); $('#my-wizard').on('finished', function(e, data) { console.log('finished'); }); $('.btn-prev').on('click', function() { console.log('prev'); $('#my-wizard').wizard('previous'); }); $('.btn-next').on('click', function() { console.log('next'); $('#my-wizard').wizard('next','foo'); }); }); </script> </body> </html>
+6
source share
1 answer

So close! For CSS and JS, since Fuel UX includes Bootstrap, you simply enable Fuel UX instead of Boostrap and get all Bootstrap plus Fuel UX:

 <link rel="stylesheet" href="https://fuelcdn.com/fuelux/2.3/css/fuelux.min.css"> <script src="https://fuelcdn.com/fuelux/2.3/loader.min.js"></script>

Your template looks great and only with the above changes, and also deletes a couple of lines that cause double processing, this works as expected. See the full example here:

Gist: https://gist.github.com/adamalex/5412079

Real-time example: http://bl.ocks.org/adamalex/5412079

+7
source

More articles:


All Articles