title: Basic RequireJS Help - How do I call / define a function? Using onclick and jquery as well
body: <p>Help!</p>
  
  <p>I'm super confused guys... I have no idea what I'm doing</p>
  
  <p>I've been looking at RequireJS and AMD tutorials &amp; examples all day yesterday and today and got to this point, however I think I still have a fundamental misunderstanding as to what a module <em>is</em>. </p>
  
  <ul>
  <li>I have a bunch of functions that get called "onClick" from my HTML elements...
  
  <ol>
  <li>How do I <strong>define my functions</strong> with RequireJS <strong>so that I can call</strong> them? So confused :/ Also I don't understand </li>
  <li>how to get my <strong>onLoad</strong> function to get called (in my case its <strong>$(function()</strong>, but how to I kick this off in RequireJS?)</li>
  </ol></li>
  </ul>
  
  <p>I am using Node v0.10.12</p>
  
  <pre><code>&lt;html&gt;
  ...
  &lt;head&gt;
  &lt;script data-main="" src="libraries/require.js"&gt;&lt;/script&gt;
  ...
  &lt;script&gt;
  ...
       //I really need all these javascript files for every function defined on this page...
       require(['simulatorConfiguration.js', 
                'modelConfiguration.js', 
                'libraries/jquery-1.10.2.min.js', 
                'libraries/jquery.lightbox_me.js', 
                'libraries/jquery-migrate-1.2.1.js', 
                'libraries/raphael-min.js'], function(start) { 
  
              $(function() {
  
                  loadPage();  //&lt;--- CALL LOAD PAGE, but it can't find the function
                  //do some jquery stuff
              });
  
          });
  
      //function that get's called on body onload!
      define('loadPage', function loadPage()
      {
          hideAllDivs();
          //more jquery stuff...
  
          createModelMenu();
          //more jquery stuff...
      });
  
      define('hideAllDivs', function hideAllDivs()
      {
          //some UI stuff...
  
      });
  
      define('createModelMenu', function createModelMenu()
      {
          //some jquery stuff...
      });
  
      define('createTestMenu', function createTestMenu(model_key)
          {
          var javascriptLoc = "models/" + models[model_key].modelDir + "/testConfiguration.js";
          require([javascriptLoc], function(util) {
  
              showModelInformation(model_key);
              //some Jquery stuff...
          });
          });
  
      define('showModelInformation', function showModelInformation(model_key)
      {
          hideAllDivs();
          //some jquery stuff
      });
  
      define('showTest', function showTest(test_key)
      {       
          hideAllDivs();
          //some RaphaelJS stuff...
      });
  
  
      define('takeControl', function takeControl()
      {
          //some UI stuff
      });
  
      define('giveUpControl', function giveUpControl()
      {
          //some UI stuff...
  
      });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  ...
  &lt;li&gt;&lt;a href="#" id="AoD" onclick="showTests(this.id)"&gt;Audio On Demand&lt;/a&gt;&lt;/li&gt;
  ...
  &lt;input type="submit" value="Yes, Release Control" onclick="giveUpControl()"&gt;
  ....
  &lt;input type="submit" value="Take Control" onclick="takeControl()"&gt;
  ....
  &lt;/body&gt;
  </code></pre>
  
  <p>Do I need to do something like:</p>
  
  <pre><code>//function that get's called on body onload!
  define('loadPage', function loadPage()
  {
      return function(loadPage)
          {
              hideAllDivs();
              //more jquery stuff...
  
              createModelMenu();
              //more jquery stuff...
          }
  });
  //and call it with loadPage.loadPage(); ?
  </code></pre>
  
  <p>or maybe something like:</p>
  
  <pre><code>//function that get's called on body onload!
  define('loadPage', function loadPage()
  {
      return function()
          {
              hideAllDivs();
              //more jquery stuff...
  
              createModelMenu();
              //more jquery stuff...
          }
  });
  </code></pre>
  
  <p>or</p>
  
  <pre><code>function(loadPage)?
  </code></pre>
  
  <p>I did look at these similar questions:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/10302724/calling-methods-in-requirejs-modules-from-html-elements-such-as-onclick-handlers">Calling methods in RequireJs modules from HTML elements such as onclick handlers</a></li>
  <li><a href="https://stackoverflow.com/questions/12113172/how-do-i-use-jquery-ui-with-requirejs">How do I use jquery ui with requirejs</a></li>
  <li><a href="https://stackoverflow.com/questions/10237384/how-can-i-include-jqueryui-in-my-modular-backbone-js-app-using-requirejs">How can I include jQueryUI in my modular backbone.js app using RequireJS?</a></li>
  </ul>
  
  <p>These were helpful too, but still not there yet:</p>
  
  <ul>
  <li><a href="http://hippieitgeek.blogspot.se/2013/07/load-jquery-ui-with-requirejs.html" rel="nofollow noreferrer">http://hippieitgeek.blogspot.se/2013/07/load-jquery-ui-with-requirejs.html</a></li>
  <li><a href="http://www.requirejs.org/jqueryui-amd/example/webapp/app.html" rel="nofollow noreferrer">http://www.requirejs.org/jqueryui-amd/example/webapp/app.html</a></li>
  <li><a href="https://github.com/jrburke/jqueryui-amd" rel="nofollow noreferrer">https://github.com/jrburke/jqueryui-amd</a></li>
  </ul>
  
  <p>I tried separating the functions into another file, so I have "index.html" and "Logic.js"... here is the gist:</p>
  
  <ul>
  <li><a href="https://gist.github.com/anonymous/6439418" rel="nofollow noreferrer">https://gist.github.com/anonymous/6439418</a></li>
  </ul>
  
  <p>=========================================</p>
  
  <h1>SOLUTION</h1>
  
  <p><a href="https://gist.github.com/anonymous/6470443" rel="nofollow noreferrer">https://gist.github.com/anonymous/6470443</a></p>