kristianmandrup / gmaps-autocomplete-rails

Google Maps v3 search with jQuery UI Autocomplete, ready for use with Rails asset pipeline
MIT License
73 stars 35 forks source link

Uncaught TypeError: Object #<HTMLInputElement> has no method 'geocodeLookup' #4

Closed danil-z closed 11 years ago

danil-z commented 11 years ago

third line throws an error...

  GmapsCompleter.prototype.keyDownHandler = function(event) {
    if (event.keyCode === 13) {
      this.geocodeLookup('address', $(this.inputField).val(), true);
      return $(this.inputField).autocomplete("disable");
    } else {
      return $(this.inputField).autocomplete("enable");
    }
  };

  return GmapsCompleter;

i'm using coffee script

jQuery ->
  temp = new GmapsCompleter
    inputField: '#ride_s',
    errorField: '#ride_s_error_code'
  temp.autoCompleteInit
    debugOn: true
  return

why does this happen?

debug info

<exception>: TypeError
event: jQuery.Event
this: input#ride_s.string optional ui-autocomplete-input
accept: ""
accessKey: ""
align: ""
alt: ""
attributes: NamedNodeMap
autocomplete: "off"
autofocus: false
baseURI: "http://localhost:3000/ru/rides/new"
checked: false
childElementCount: 0
childNodes: NodeList[0]
children: HTMLCollection[0]
classList: DOMTokenList
className: "string optional ui-autocomplete-input"
clientHeight: 28
clientLeft: 1
clientTop: 1
clientWidth: 218
contentEditable: "inherit"
dataset: DOMStringMap
defaultChecked: false
defaultValue: ""
dir: ""
dirName: ""
disabled: false
draggable: false
files: null
firstChild: null
firstElementChild: null
form: form#new_ride.simple_form form-horizontal
formAction: ""
formEnctype: ""
formMethod: ""
formNoValidate: false
formTarget: ""
height: 0
hidden: false
id: "ride_s"
incremental: false
indeterminate: false
innerHTML: ""
innerText: ""
isContentEditable: false
jQuery110205148881799541414: 32
labels: NodeList[1]
lang: ""
lastChild: null
lastElementChild: null
list: null
localName: "input"
max: ""
maxLength: 524288
min: ""
multiple: false
name: "ride[s]"
namespaceURI: "http://www.w3.org/1999/xhtml"
nextElementSibling: null
nextSibling: null
nodeName: "INPUT"
nodeType: 1
nodeValue: null
offsetHeight: 30
offsetLeft: 315
offsetParent: body.rides new
offsetTop: 208
offsetWidth: 220
onabort: null
onbeforecopy: null
onbeforecut: null
onbeforepaste: null
onblur: null
onchange: null
onclick: null
oncontextmenu: null
oncopy: null
oncut: null
ondblclick: null
ondrag: null
ondragend: null
ondragenter: null
ondragleave: null
ondragover: null
ondragstart: null
ondrop: null
onerror: null
onfocus: null
oninput: null
oninvalid: null
onkeydown: null
onkeypress: null
onkeyup: null
onload: null
onmousedown: null
onmousemove: null
onmouseout: null
onmouseover: null
onmouseup: null
onmousewheel: null
onpaste: null
onreset: null
onscroll: null
onsearch: null
onselect: null
onselectstart: null
onsubmit: null
onwebkitfullscreenchange: null
onwebkitfullscreenerror: null
onwebkitspeechchange: null
outerHTML: "<input class="string optional ui-autocomplete-input" id="ride_s" name="ride[s]" type="text" autocomplete="off">"
outerText: ""
ownerDocument: document
parentElement: div.controls
parentNode: div.controls
pattern: ""
placeholder: ""
prefix: null
previousElementSibling: span.ui-helper-hidden-accessible
previousSibling: span.ui-helper-hidden-accessible
readOnly: false
required: false
scrollHeight: 20
scrollLeft: 0
scrollTop: 0
scrollWidth: 206
selectionDirection: "none"
selectionEnd: 14
selectionStart: 14
size: 20
spellcheck: true
src: ""
step: ""
style: CSSStyleDeclaration
tabIndex: 0
tagName: "INPUT"
textContent: ""
title: ""
translate: true
type: "text"
useMap: ""
validationMessage: ""
validity: ValidityState
value: "Москва, Россия"
valueAsDate: null
valueAsNumber: NaN
webkitEntries: EntryArray
webkitGrammar: false
webkitPseudo: ""
webkitShadowRoot: null
webkitSpeech: false
webkitdirectory: false
webkitdropzone: ""
width: 0
willValidate: true
__proto__: HTMLInputElement
kristianmandrup commented 11 years ago

I think the following tweak could solve the problem, passing in the current GmapsCompleter instance as the eventData argument.

    # triggered when user presses a key in the address box
    $(self.inputField).bind 'keydown', @, @keyDownHandler
  # autocomplete_init

  keyDownHandler: (event, completer) ->
    if (event.keyCode == 13)
      completer.geocodeLookup 'address', $(@inputField).val(), true

Look into http://api.jquery.com/bind/ to see how to use it correctly.

Please feel free to improve the basic structure of the javascript. I could use some love for sure, fx by using more classes, diving by functionality such as logging, errors, event handlers etc. Thanks!

Also improve the README as you see fit, not very clear (a bit confusing) IMO. Simplify! I think the Coffeescript approach using class instances should be the only option moving forward ;)

Cheers!

kristianmandrup commented 11 years ago

I just released a new version 1.3 which should fix the problem and make it much easier to customise, much better README etc. Hope you find it useful. Cheers!

danil-z commented 11 years ago

Could not find gem 'gmaps-autocomplete-rails (>= 0.1.3) ruby' in the gems available on this machine.

danil-z commented 11 years ago

tried to use github also give me an error: Could not find gem 'gmaps-autocomplete-rails (>= 0.1.3) ruby' in git://github.com/kristianmandrup/gmaps-autocomplete-rails.git (at master). Source contains 'gmaps-autocomplete-rails' at: 0.1.2.1