[SOLVED] jQueryui timespinner example gives undefined error

jQueryui timespinner example gives undefined error

I've derived this from the sample code for a timespinner at http://jqueryui.com/spinner/. I can't get it to work.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Spinner - Time</title>
<script src="/jquery-2.1.0.min.js"></script>
<script src="/jquery-ui-1.11.2/jquery-ui.min.js"></script>
<script src="/resources/jquery-mousewheel-master/jquery.mousewheel.js"></script>
<script src="/resources/globalize-1.0.0-alpha.10/dist/globalize.js"></script>

<script>
    $.widget( "ui.timespinner", $.ui.spinner, {
            options: { step: 60 * 1000, page: 60 },

            _parse: function( value ) {
                    if ( typeof value === "string" ) {
                            if ( Number( value ) == value ) {
                                    return Number( value );
                            }
                            return +Globalize.parseDate( value );
                    }
                    return value;
            },
            _format: function( value ) {
                    return Globalize.format( new Date(value), "t" );
            }
    });

    $(function() {
            $( "#spinner" ).timespinner();
            $( "#culture" ).change(function() {
                    var current = $( "#spinner" ).timespinner( "value" );
                    Globalize.culture( $(this).val() );
                    $( "#spinner" ).timespinner( "value", current );
            });
    });
</script>
</head>
<body>

<p> <label for="spinner">Time spinner:</label> <input id="spinner" name="spinner" value="08:30 PM"> </p>
<p>
<label for="culture">Select a culture to use for formatting:</label>
<select id="culture">
<option value="en-EN" selected="selected">English</option>
<option value="de-DE">German</option>
</select>
</p>

<div class="demo-description">
<p>
A custom widget extending spinner. Use the Globalization plugin to parse and output
a timestamp, with custom step and page options. Cursor up/down spins minutes, page up/down
spins hours.
</p>
</div>
</body>
</html>

In Chrome, I get: Uncaught TypeError: undefined is not a function

In Firefox, I get: TypeError: Globalize.parsedate is not a function

Both are on the line, return +Globalize.parseDate( value );.

All of the locations of scripts in script tags are correct. I get no other error. The up/down arrows for the spinner are missing.

Am I missing a script?

Solution

First off your script should never be in your head. You should always load it below your dom because loading a script blocks rendering the page. See https://developers.google.com/speed/docs/insights/BlockingJS for more information on it. I copied your code as best I could and had no issues. I would suggest looking at your globalize file. I used CDN's for all the files I loaded and used the http://cdnjs.com/libraries/globalize for the globalize.js file. So double check your globalize.js or provide a link so I can look at it. Hope that helps.