jshimko / meteor-geocomplete

Geocoding and Places Autocomplete Plugin
http://ubilabs.github.com/geocomplete/
44 stars 4 forks source link

TypeError: undefined is not a function on $('input').geocomplete() #8

Closed v3rron closed 9 years ago

v3rron commented 9 years ago

I'm having an issue with geocomplete() function being undefined. All I need is an input with autocomplete dropdown to work. Here's the full error I'm getting from Chrome Console:

Exception from Tracker recompute function: undefined is not a function
TypeError: undefined is not a function
    at http://localhost:3000/client/js/profile.js?f257098d39aee6fbccb2fee6303ef488783247fe:16:23
    at Tracker.Computation._compute (http://localhost:3000/packages/tracker.js?517c8fe8ed6408951a30941e64a5383a7174bcfa:296:36)
    at Tracker.Computation._recompute (http://localhost:3000/packages/tracker.js?517c8fe8ed6408951a30941e64a5383a7174bcfa:310:14)
    at Tracker.flush (http://localhost:3000/packages/tracker.js?517c8fe8ed6408951a30941e64a5383a7174bcfa:440:14)

More info from Safari Console:

Exception from Tracker recompute function: undefined is not a function (evaluating '$("#location").geocomplete()')
http://localhost:3000/client/js/profile.js?f257098d39aee6fbccb2fee6303ef488783247fe:16:34
_compute@http://localhost:3000/packages/tracker.js?517c8fe8ed6408951a30941e64a5383a7174bcfa:296:36
_recompute@http://localhost:3000/packages/tracker.js?517c8fe8ed6408951a30941e64a5383a7174bcfa:310:22
flush@http://localhost:3000/packages/tracker.js?517c8fe8ed6408951a30941e64a5383a7174bcfa:440:24

I set up my project with iron-router like this:

if (Meteor.isClient) {
  // Keep showing the launch screen on mobile devices until we have loaded
  // the app's data
  dataReadyHold = LaunchScreen.hold();

  // Show the loading screen on desktop
  Router.onBeforeAction('loading', {except: ['welcome']});
  Router.onBeforeAction('dataNotFound', {except: ['welcome']});

  Router.onBeforeAction(function() {
    if (!Meteor.loggingIn() && !Meteor.user()) {
      Router.go('welcome');
      this.next();
    } else if(Router.current().route.getName() === 'welcome'){
      Router.go('profile');
    }else{
      this.next();
    }
  });

  Router.onBeforeAction(function() {
    GoogleMaps.load({
      key: 'MY-API-KEY',
      libraries: 'places'
    });
    this.next();
  }, { only: ['profile'] });
}

And my template looks like this:

Template.profile.rendered = function () {
    Tracker.autorun(function () {
        if (GoogleMaps.loaded()) {
          $("#location").geocomplete();
        }
    });
};
jshimko commented 9 years ago

Your onBeforeAction's for the loading screen are only being passed strings. Those are hooks that expect a function to be passed in to be executed on the routes you specify (or globally on every route). See the Iron Router docs.

  // Show the loading screen on desktop
  Router.onBeforeAction('loading', {except: ['welcome']});
  Router.onBeforeAction('dataNotFound', {except: ['welcome']});

That also means the required this.next() isn't happening in each of those and any subsequent onBeforeAction's probably aren't happening either (which is why the maps API never loads).