3

when only loading wizard.js and require.js I'm getting this error:

TypeError: $(...).wizard is not a function


$('#checkout-wizard').wizard({'selectItem': options.step });

Did I miss some js? I don't want to load whole project.

10x

embedded
  • 717
  • 4
  • 11
  • 25

1 Answers1

3

Here's a working example of just loading the wizard:

http://jsbin.com/kesikoli/1/

Source:

<html class="fuelux">
<head>
    <title>wizard</title>
    <link href="//www.fuelcdn.com/fuelux/2.6.0/css/fuelux.min.css" rel="stylesheet" type="text/css">
    <style>
        body { padding: 20px }
    </style>
    <script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.11/require.min.js">    </script>
    <script>
        require.config({
            paths: {
                'fuelux': 'http://www.fuelcdn.com/fuelux/2.6.0/',
                'jquery': 'http://code.jquery.com/jquery-1.11.0.min'
            }
        });
        require(['fuelux/wizard']);
    </script>
</head>
<body>
<div id="MyWizard" 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 type="button" class="btn btn-mini btn-prev"> <i class="icon-arrow-left"></i>Prev</button>
        <button type="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">This is step 1</div>
    <div class="step-pane" id="step2">This is step 2</div>
    <div class="step-pane" id="step3">This is step 3</div>
    <div class="step-pane" id="step4">This is step 4</div>
    <div class="step-pane" id="step5">This is step 5</div>
</div>
</body>
</html>

Loading strategy will very likely change for Fuel UX 3.0+

Adam Alexander
  • 15,132
  • 5
  • 42
  • 41
  • hello, I'm trying to load the wizard in an Angular JS project. I tried your sample (but I removed the jquery reference since I'm already loading it), however the wizard does not render with the proper css styling. In other words, all the
      and
    • elements are just showing up without the tabs, etc. I need an angular-specific sample, if possible. regards, Bob
     – bob.mazzo Jul 25 '14 at 02:58