call a function using requirejs

Question

How do I call a function using requirejs?

It's an overly simple question, but surprisingly enough no tutorial or example has been able to help me so far.

This is the code in my html file.

...
<script src = "stuff.js"></script>
<button onclick="doStuff(4, 2)";>DoStuff</button>
...

This is my require js.

define(["jquery"], function ($) {
  function doStuff(a, b) {
    //does some stuff
  }
});

Why does this not work? I get ReferenceError: doStuff is not defined

`doStuff` will only exist within the scope of the require callback. The reason there's no tutorial on it is because you shouldn't be adding this sort of dependency in inline event handlers. Keep your JS out of your HTML. — zzzzBov, Dec 02 '13 at 19:45

score 6 · Answer 1 · edited May 23 '17 at 11:45

6

The answer to your immediate problem could be something like this:

index.html

<button id="the-button">DoStuff</button>
<script data-main="stuff" src="scripts/require.js"></script>

stuff.js

require(["jquery"], function ($) {
  function doStuff(a, b) {
    //does some stuff
  }

  $('#the-button').click(function() {
    doStuff(4, 2);
  });
});

But it looks like you would benefit from taking a step back and reading about modern JavaScript architecture and techniques. This should be a good starting point: Why is using onClick() in HTML a bad practice?

edited May 23 '17 at 11:45

Community

1
1

answered Dec 02 '13 at 21:46

kryger

12,906
8
44
65

Thank you, however I can't do this in my actual work as I dynamically create the functions in my html. – user3037540 Dec 02 '13 at 22:45
2

Which benefit or RequireJS made you decide to use it, then? It's *a bit* unreasonable to expect a technology that's essentially all about adding structure to JS apps to support such an outdated and deprecated architecture (i.e. mixing HTML and JS). – kryger Dec 03 '13 at 00:15
1

User's browser still downloads all the code, that's an inherent feature of client-side Javascript. RequireJS is not going to help you, Chrome's or FF's dev tools make it easier and easier to navigate through any page's code (and even change it on the fly). The best thing you can do if you're concerned with security is to prepare for it. – kryger Dec 04 '13 at 12:48
Yes, but requireJS caches faster. I ended up finding a way to dynamically create my functions, declaring them inside of other functions. Thank you all. – user3037540 Dec 04 '13 at 18:10
I ran into this problem as well there is some dynamic content that gets loaded as I generate the page, that I can't possibly know in the future. The problem is RequireJS is trying to load in a synchronous dependency way. If you load stuff inline after then it has potential to load out of sync. My solution is to put information in div tags and then select based on that. Similar to how BootstrapJS works. – Atherion Oct 29 '14 at 21:12

score 2 · Accepted Answer · answered Dec 04 '13 at 19:33

I managed to find a solution for the question by passing the function into the html code. It's not very elegant, but it works.

index.html

<button onclick = "doSomeStuff(4,2);">DoStuff</button>
<script>
  require(['stuff.min'], function(myStuff){
    function doSomeStuff(a,b) {
      myStuff.doStuff(a,b);
    }
  });
</script>

stuff.js

define(["jquery"], function ($) {
  function doStuff(a,b) {
    //does some stuff
  }
  return {doStuff:doStuff};
});

call a function using requirejs

2 Answers2

Linked