Custom Scripts

Load a custom jQuery plugin

At the end of your page, before the </body> tag, load the desired plugins as:

<script>
require(["epfl-jquery", "../relative/path/to/jquery-plugin.js", "/absolute/path/to/jquery-plugin.js"], function($) {

  // jQuery is available as $ with the plugins included
  $(".my-class").myPlugin();

});
</script>

If your plugin is not AMD compatible, you may need to load it as:

<script>
require(["epfl-jquery"], function($) {

  // jQuery is available as $ with the plugins included
  $.getScript("../relative/path/to/jquery-plugin.js", function(){
    $(".my-class").myPlugin();
  });

});
</script>

If you used epfl-jquery-notracking.js instead of epfl-jquery.js, or if you included footer-scripts-notracking.html instead of footer-scripts, you will need to call require with epfl-jquery-notracking instead of epfl-jquery.

Load datatables script

In the <head> of the page import:

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.6/css/jquery.dataTables.css">

<script>

    require(["epfl-jquery", "//cdn.datatables.net/1.10.6/js/jquery.dataTables.js"], function($) {
        "use strict";

        require(["datatables"], function() {
              $(function() {
                $('#example').dataTable( {
                    "order": [[ 3, "desc" ]]
                } );
              });
        })
    });
</script>

Load a jQuery plug-in different from epfl-jquery

<script>

require(['epfl-jquery'], function($){
    //disable epfl-jquery
    requirejs.undef('jquery');
    //jQuery new variable
    require(['http://code.jquery.com/jquery-1.11.2.min.js'], function(){
        console.log($.fn.jquery, jQuery.fn.jquery);
    });
});

</script>

Load a custom script

Define your scripts as AMD modules:

define("script1", ["epfl-jquery"] , function ($) {

  // jQuery is available as $

  var _foo = function(){
    ...
  };

  var _bar = function(){
    ...
  };

  return {
    foo: _foo,
    bar: _bar,
  };
});

define("script2", ["epfl-jquery"] , function ($) {

  // jQuery is available as $

  var _baz = function(){
    ...
  };

  var _qux = function(){
    ...
  };

  return {
    baz: _baz,
    qux: _qux,
  };
});

At the end of your page, before the </body> tag, load the desired scripts as:

<script>
require(["epfl-jquery", "../relative/path/to/custom/script1.js", "/absolute/path/to/custom/script2.js"], function($, s1, s2) {

  // jQuery is available as $

  // script1 is available as s1
  s1.foo()
  s1.bar()

  // script2 is available as s2
  s2.baz()
  s2.qux()

});
</script>