Question

I have a problem with my Google closure code.
I’m trying to implement an App using HTML5 History feature.

But unfortunately this is not working as I’m getting an ‘CANNOT READ PROPERTY ‘HTML5HISTORY’ OF UNDEFINED’ on Chrome and ‘goog.history is undefined’on Firefox.

Basically the “var h” is never created with the History instance, as I’m getting the error from the “try/catch” loop, and the error.message displayed.

I really don’t know what’s the problem…

Thanks Guys

goog.require('goog.events');
goog.require('goog.events.EventTarget');
goog.require('goog.history.EventType');
goog.require('goog.history.Html5History');
goog.require('goog.Uri');

var h;

try {

 h = new goog.history.Html5History();

} catch (e) {

     document.write(e.message);
}

if (h) {

    var cur = 'kittens';

    goog.events.listen(h, goog.history.EventType.NAVIGATE, function(e) {
        var token = e.token || 'kittens';

        var next = document.getElementById(token);

        if (next) {

            document.getElementById(cur).className = 'section';
            next.className = 'section active';
            cur = token;
        }
    });

    h.setUseFragment(false);
    h.setPathPrefix(new goog.Uri(document.location.href).getPath() + '/');
    h.setEnabled(true);

    goog.events.listen(document.getElementById('links'), 'click', function(e) {

        if (e.target.tagName == 'A') {

            h.setToken(e.target.getAttribute('token'), e.target.title);
            e.preventDefault();
        }
    });
 }

Answer 1

Include all imports (goog.require() calls) in a separate JavaScript file or tag before this your script including.

Documentation says:

Note: Do not put your goog.require() statements in the same script tag
as the entry point to code that uses the goog.required functions or
classes. A goog.require() call adds code to the document after the
script tag containing the call. For example, this code works:

<script src="closure-library/closure/goog/base.js"></script>
<script>
  goog.require('goog.dom');
</script>
<script>
  var newHeader = goog.dom.createDom('h1');
</script>

In contrast, the following code produces an error:

<script src="closure-library/closure/goog/base.js"></script>
<script>
  // DON'T DO THIS.
  goog.require('goog.dom');
  var newHeader = goog.dom.createDom('h1');
</script>