ReferenceError: define is not defined while embedding fuelux in datagrid.js

Question

I wanted to add use http://exacttarget.github.com/fuelux/ to build a datagrid. I wanted to add the library to use it. I did the following:

<link href="<spring:url value='/assets/css/fuelux.min.css' htmlEscape='true' />"      media="all" rel="stylesheet" type="text/css" />
<link href="<spring:url value='/assets/css/fuelux-responsive.min.css' htmlEscape='true' />" media="all" rel="stylesheet" type="text/css" />
<script src="<spring:url value='/assets/js/fuelux-datagrid.js' htmlEscape='true' />" type="text/javascript"></script>

I am sure that the path are correct because they work in other libraries. However, I get following error:

ReferenceError: define is not defined
[Break On This Error] 
define(['require','jquery'],function(require) {

where define(['require','jquery'],function(require) {... is code in fuelux-datagrid.js.

• What is this error?
• I think define is a keyword of require.js. Does this mean fuelux-datagrid has dependency on require.js?
• Can anybody explain me how to load the library so to make it work?

Answer 1

This worked for me:

<script src="https://raw.github.com/ExactTarget/fuelux/master/lib/require.js"></script>
<script type="text/javascript" src="https://raw.github.com/ExactTarget/fuelux/master/dist/datagrid.js"></script>

I tried what @AdamAlexander suggested and what is suggested here and didn't work. I also tried the latest requiredjs and got a nasty exception. Go figure.

Answer 2

If you are not using RequireJS you can get around this by loading just the loader.min.js in a basic script tag:

<script src="http://fuelcdn.com/fuelux/2.3/loader.min.js"></script>

This package contains all of the JavaScript needed for Bootstrap and Fuel UX, with no external dependency on an AMD loader.

Answer 3

Yes, they seem to have a dependency on RequireJS. I must agree they don't have much resources that explains how to load the library (at least from what I saw), but what I would do is load require.js and check what other resources it is trying to load afterwards, by looking at the network requests.

Here's an example on how to setup RequireJS. You can also look at their docs.

<script src="scripts/require.js"></script>
<script>
  require.config({
    baseUrl: "/another/path", //here's where it will look for scripts
    paths: {
        "some": "some/v1.0" //path to other dependencies not located in the base path
    }
  });
</script>