Call function of included JavaScript code from another included JavaScript

Question

I'm trying to work with different loaded JavaScript in my page, but I'm not able to let them talk.

<html>
<script type="text/javascript" src="jquery144.js"></script>
<script type="text/javascript" src="shared_functions.js"></script>
<script type="text/javascript" src="page_function_callers.js"></script>
</html>


// shared_functions.js
$(document).ready (function () {
    function sayHello (what) {
        alert (what);
    }
});

// page_function_callers.js
$(document).ready (function () {
    $("div.my_button").click (function () {
        sayHello ("Hello world!");
    });
});

I work with jQuery and I'd like to use this way because it should let me recyle many public methods. Where I'm wrong?

David Hedlund · Accepted Answer · 2010-02-13 16:31:18Z

3

The function sayHello is declared inside the scpoe of the DOMReady event ( $(document).ready ). It will not be available outside of that scope. But there is no need to declare a function inside that scope. Even if sayHello uses a lot of DOM objects (which in your example it doesn't), it will not be executed until it's being called, so the only thing you need to make sure is that such a function is not called until after DOMReady.

So you can simply remove the first and the last line in shared_functions.js, i.e. $(document).ready(function() { and }); respectively, and your code will work.

answered Feb 13, 2010 at 16:31

David Hedlund

130k33 gold badges205 silver badges223 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pointy · Accepted Answer · 2010-02-13 16:32:24Z

2

When you declare "sayHello" (does anybody remember that Charlotte Church song? Gosh, the memories ...) inside the "ready" function, it's local to that function. You can make it global if you like by doing this:

window['sayHello'] = function sayHello(what) {
  alert(what);
};

(It's nice to give the function a "local" name — the name after the "function" keyword — because then the function won't show up as "anonymous" in Firebug.)

I would encourage you to investigate making your global function into a jQuery plugin, or at least a jQuery "global" by putting it on the jQuery object instead of "window".

answered Feb 13, 2010 at 16:32

Pointy

415k62 gold badges600 silver badges631 bronze badges

Comments

wsanville · Accepted Answer · 2010-02-13 16:29:36Z

2

Try defining the function sayHello outside of your call $(document).ready.

answered Feb 13, 2010 at 16:29

wsanville

37.6k8 gold badges78 silver badges102 bronze badges

Comments

Lior Cohen · Accepted Answer · 2010-02-13 16:30:48Z

0

In your code above, the sayHello() method is only defined inside the anonymous function's scope.

This code might work better for you:

// shared_functions.js
window.MyNamespace = window.MyNamespace || {};
MyNamespace.sayHello = function(what)
{
  alert(what);    
};

// page_function_callers.js
$(document).ready (function ()
{
    $("div.my_button").click (function ()
    {
      MyNamespace.sayHello('hello world');    
    });
});

Make sure you're loading your JS files in the right order tho. There are more elegant solutions out there, but this is a fairly simple and straightforward one.

One advantage to this approach would be not polluting the global namespace.

answered Feb 13, 2010 at 16:30

Lior Cohen

9,0652 gold badges31 silver badges27 bronze badges

2 Comments

David Hedlund Over a year ago

your code will work, but what's the point? why postpone the declaration until DOMReady, and then extract it from that scope, rather than declaring it outside of the DOMReady context to begin with? and are you aware that the namespace is redundant here; simply typing window.sayHello =... would've worked equally well...

Lior Cohen Over a year ago

Modified the code to reflect your comments. I'd still suggest placing this code under a namespace, if possible.

Collectives™ on Stack Overflow

Call function of included JavaScript code from another included JavaScript

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related