JavaScript function scope between script tags

Question

I have two different JSPs that the Java backend concatenates together and sends back to the same rendered HTML page.

Each JSP has its own <script> block and defines functions inside that block:

JSP #1:

<script type="text/javascript">
    function blah() { ... }
</script>

JSP #2

<script type="text/javascript">
    function foo()
    {
        blah();
    }
</script>

Like I said, the backend adds these to the HTTP response and sends them back to the browser during the same request.

When I run this page in my browser, I can tell right away that blah() is not executing when foo() is getting called. I see a console error in Firebug stating blah() is not defined. I'm wondering if blah() only has scope inside its own <script> tag, and likewise for foo(). Is that the case here, or is something else awry?

When I go to view the page source I see both script blocks and both functions. This tells me everything is being generated/rendered correctly server-side, but perhaps my approach is inherently wrong (defining the functions inside different script tags). Thanks in advance.

Answer 1

all of them are global. they can see each other. the problem is when they get defined and call each other.

you should define and call them in this order:

1. bar
2. foo
3. call foo
   • foo executed and calls bar
   • bar is executed

Answer 2

You can call function like this:

  (function($) {

     var namespace;
         namespace = {
                     something : function() {
                                             alert('hello there!');
                                            },
                      bodyInfo : function() {
                                             alert($('body').attr('id'));
                                            }
                     };
         window.ns = namespace;
    })(this.jQuery);

   $(function() {
              ns.something();
              ns.bodyInfo();
   });