CODEWITHSUNDEEP
twitter-bootstrapfuelux
embedded
embedded

Reputation: 729

FuelUX: How can I load only wizard.js?

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

Upvotes: 3

Views: 2283

Answers (1)

Adam Alexander
Adam Alexander

Reputation: 15180

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+

Upvotes: 3

Related Questions