why can't this javascript function be found

Question

i have some javascript code that is supposed to run on document.ready but i keep getting an error in firebug saying the onLoad() method can't be found.

here is the code (which clearly shows that method there):

<script type="text/javascript">

    var tl;
    function onLoad1() {

        debugger;

        var eventSource = new Timeline.DefaultEventSource(0);

        // Example of changing the theme from the defaults
        // The default theme is defined in 
        // http://simile-widgets.googlecode.com/svn/timeline/tags/latest/src/webapp/api/scripts/themes.js
        var theme = Timeline.ClassicTheme.create();
        theme.event.bubble.width = 350;
        theme.event.bubble.height = 300;

        var d = Timeline.DateTime.parseGregorianDateTime("1900")
        var bandInfos = [
            Timeline.createBandInfo({
                width: "80%",
                intervalUnit: Timeline.DateTime.DECADE,
                intervalPixels: 200,
                eventSource: eventSource,
                date: d,
                theme: theme,
                layout: 'original'  // original, overview, detailed
            }),
            Timeline.createBandInfo({
                width: "20%",
                intervalUnit: Timeline.DateTime.CENTURY,
                intervalPixels: 200,
                eventSource: eventSource,
                date: d,
                theme: theme,
                layout: 'overview'  // original, overview, detailed
            })
        ];
        bandInfos[1].syncWith = 0;
        bandInfos[1].highlight = true;

        debugger;

        tl = Timeline.create(document.getElementById("tl"), bandInfos, Timeline.HORIZONTAL);
        // Adding the date to the url stops browser caching of data during testing or if
        // the data source is a dynamic query...
        var jsonFile = "<%= Url.Content("~/scripts/Views/Business/")%>test.js?"+ (new Date().getTime());

        tl.loadJSON(jsonFile), function(json, url) {
            eventSource.loadJSON(json, url);
        });
    }
    var resizeTimerID = null;
    function onResize() {
        if (resizeTimerID == null) {
            resizeTimerID = window.setTimeout(function() {
                resizeTimerID = null;
                tl.layout();
            }, 500);
        }
    }
</script>

<script type="text/javascript">

    $(document).ready(function() {
        debugger;
        onLoad1();
    });
    </script>

any idea why it can't "find" that method.

EDIT

• I put all of the javascript above (removed the image)
• I renamed it onLoad1() but i still got the same issue
• I moved the first code below the function but i still get the same issue.

Answer 1

Open the error console (The native one of Firefox, not firebug) and you'll see the reason.

Answer 2

I suspect your problem is the mismatched quotes, change:

var jsonFile = "<%= Url.Content("~/scripts/Views/Business/")%>test.js?"+ (new Date().getTime());

to:

var jsonFile = '<%= Url.Content("~/scripts/Views/Business/")%>' + "test.js?"+ (new Date().getTime());

You should see this line verbatim before the change (`<%= %> tags)

Answer 3

You have a syntax error here:

tl.loadJSON(jsonFile), function(json, url) {
                    ^ the parentheses is prematurely closed
    eventSource.loadJSON(json, url); 
});
 ^ syntax error, unexpected token

You have to remove the closing parenthesis after the jsonFile argument:

tl.loadJSON(jsonFile, function(json, url) {
    eventSource.loadJSON(json, url);
});

This SyntaxError was breaking the function declaration, what's why onLoad was not defined.