Uncaught ReferenceError:foobar is not defined (anonymous function)

Question

I have this js file serving from some domain say foobar.com

at http://foobar.com/static/js/main.js:

$(document).ready(function() {
        function foobar(bar){
            $.ajax({
                    url: "/site/foo/",
                data: {'foo':bar},
                    dataType: "jsonp",
                    crossdomain: !0,
                    success: function (data) {
                alert(data);
                    },
                    error: function () {
                    }
                })
        }   
    });

On barfoo.com on some url, I have something like this:

<script src='http://foobar.com/static/js/main.js' type='text/javascript'></script>
<script type='text/javascript'>foobar('123456')</script>

When I hit that url : it says

Uncaught ReferenceError:foobar is not defined (anonymous function)

How to access function from other domains?

Your `foobar` is not a global function, so you can't invoke it as one... — Šime Vidas, Dec 19 '11 at 22:21

score 11 · Accepted Answer · answered Dec 19 '11 at 22:21

11

You've defined "foobar()" inside the "ready" handler. It's therefore a local variable in that function, and invisible outside it.

You could add this to the end of the "ready" handler:

  window['foobar'] = foobar;

and then it'd be visible globally.

By the way this is something that can bite at jsfiddle because it (by default) will wrap code in a "load" handler. Thus, if you copy/paste from a JavaScript file included in the <head>, a function that would be global in that context ends up not global in the fiddle.

answered Dec 19 '11 at 22:21

Pointy

405,095
59
585
614

It is fine to declared it as globally? Any side effect? – Tauquir Dec 19 '11 at 22:23
Well @Tauquir there could be side effects if the name of the function collides with another `window` property. – Pointy Dec 19 '11 at 22:25
you can declare the function outside $(document).ready(function() { – khaled_webdev May 21 '12 at 16:31

score 0 · Answer 2 · answered Dec 19 '11 at 22:48

Your function is not visible globally as pointed out by Pointy. But you are also loading a script and calling a function defined by the ready() function. I guess it's possible ready() may not have been called when your script calls foobar() which would generate the same error. I would recommend you set a global value in your script and then use that variable in the ready() function.

Set the value in the script:

<script src='http://foobar.com/static/js/main.js' type='text/javascript'></script>
<script type='text/javascript'>var bar = '123456'</script>

Then you can use it in the ready() function.

$(document).ready(function() {
        $.ajax({
                url: "/site/foo/",
                data: {'foo':bar},
                dataType: "jsonp",
                crossdomain: !0,
                success: function (data) {
                   alert(data);
                },
                error: function () {
                }
            });  
       });

If you want to define a function so you can use it again you can call it in ready() but make sure you set the global variable bar to what you want.

window.foobar = function() {
        $.ajax({
                url: "/site/foo/",
                data: {'foo':bar},
                dataType: "jsonp",
                crossdomain: !0,
                success: function (data) {
                   alert(data);
                },
                error: function () {
                }
            });
       }

$(document).ready(function() {
    foobar();
    // other stuff 
});

Uncaught ReferenceError:foobar is not defined (anonymous function)

2 Answers2

Linked