3

I have a small google map script to get location, either from Lat Lon pair, or address , and also to UPDATE those lat, lon and address input fields ..

See jsfiddle here

When clicking the "draw" button - a function called codeAddress() is supposed to be called . but on the firebug console i get :

Error: ReferenceError: codeAddress is not defined

I do not understand why the codeAddress() is not defined ...

The strange thing is , that if I move the function OUTSIDE of the

jQuery(document).ready(function(){} it DOES work (See jsFIDDLE)

(I also need to move the var marker - otherwise it will only center the map,and gives marker is undefined error;

So my question is very simple, What am i doing wrong ? Why the same function works outside the jQuery(document).ready(function(){} but not inside ?

And a sidekick question : How do I get to update the address input field when the marker is dragged (like with the lon lat inputs..) ???

UPDATE - thanks to all - learned another important thing . Unfortunately - all are valid answeres and solutions - but I can accept only one, and for me , the easiest solution to understand (being so unfamiliar with JS - and despite it being maybe a not perfect practice ) is @cowls thanks again to everyone..

0

3 Answers 3

3

The simple solution is to replace

function codeAddress() { ... }

with

codeAddress = function() { ... }

Your problem is that you're declaring codeAddress as a variable whose scope is local to the function you're binding to the document ready handler. So as soon as that function exits, codeAddress doesn't exist any more. The second declaration (note the missing "var") declares codeAddress as a global variable, so it will remain accessible after the ready function has exited.

5
  • Thanks, it does work - But I would like to understand in order to not repeat this mistake . If I use a jquery()click. event - instead of the onclick) - then I could move it back inside ?? Dec 6, 2012 at 10:06
  • 1
    @ObmerkKronen Yes, that also works. The reason is that you're then binding the function from within the scope in which it's visible (inside the function where it is declared). Once you've bound the function, the variable codeAddress that refers to it will leave scope, so "codeAddress" will be undefined, but the function to which it referred will stay bound to the click event of your DOM element. Dec 6, 2012 at 10:12
  • +1 for the comment explanation and upvote for a possible solution - see my update. thanks .. Dec 6, 2012 at 10:45
  • @ObmerkKronen You don't have to apologize for not accepting an answer - I answer questions to force myself to deal with at least one problem a day that is alien to me. It's not for reputation, it's to keep the brain lubricated :) Dec 6, 2012 at 11:06
  • not for apologizing - but honestly all answers - even if displaying different logic - were ok for me . And I understand about the "brain lubrication" - based on time available I also try to do that (although not with JS related questions - more of PHP and Wordpress..) Thanks again. Dec 6, 2012 at 11:12
2

Rather than use onclick, you should assign a click handler to the required elements INSIDE your document.ready method.

E.g.

$(input).click(function() { codeAddress() });

Would assign the code address function to the click event for all input boxes, obviously you want to target this at specific classes or ids

this is best practice rather than using onclick.

5
  • This is not an answer to the question being asked Dec 6, 2012 at 9:46
  • 1
    It would solve the question being asked and is better practice.
    – cowls
    Dec 6, 2012 at 9:47
  • It does solve the problem, actually - I misread your answer. I disagree, though, that it's best practice. I find it much easier to understand what a button is supposed to do if its click handler is bound in the onclick attribute, because the behavior is immediately visible when you look at the element, rather than having to search for references to it. The only time I think it's really advantageous to bind in code is when you're actually binding dynamically. Dec 6, 2012 at 9:52
  • 1
    See: stackoverflow.com/questions/5871640/…
    – cowls
    Dec 6, 2012 at 9:54
  • The problem isn't that I'm unfamiliar with the concept of unobtrusive javascript, it's that I disagree with it as a blanket solution. In the case of a function that has a fixed, 1:1 relationship with a DOM element, I find in-HTML binding perfectly reasonable and more readable. Dec 6, 2012 at 9:58
2

When the button is clicked, codeAddress() is looked up in the global scope, but you've defined it inside $(document).ready().

Declaring the function outside of $(document).ready() is probably the best here, only functions that you will only be calling from inside the ready handler should be defined inside; doing this will also keep your ready handler cleaner.

To find the location when a marker has been dragged over a location you need to use the GeoCoder server to map it to a textual location:

var geocoder = new google.maps.Geocoder();

google.maps.event.addListener(marker, 'dragend', function(evt) {
    geocoder.geocode({latLng: evt.latLng}, function(results, status) {
        if (status==google.maps.GeocoderStatus.OK && results.length) {
            // do something with results[0..x].formatted_address
        }
    })
});
5
  • Thanks for the answer - but for sake of understanding better - what you are saying, is that I do not need the document.ready at all ? for all the functions ? and if not - why only that one ?. Dec 6, 2012 at 10:04
  • @ObmerkKronen No, just to define functions you will be using in other places outside of $(document).ready( ... ).
    – Ja͢ck
    Dec 6, 2012 at 10:05
  • ok. I know that this is my own ignorance talking here - but doesn´t the $(document).ready( ... )function supposed to load wahtever other function is inside when the document load is done , AND make them available for use ?? Or maybe you mean that the onclickis actually considered outside? Dec 6, 2012 at 10:09
  • 1
    @ObmerkKronen Function declarations don't do anything by themselves, so they're safe outside of the ready handler. The rest of the code should stay inside, because they can only run when the document is actually ready. And yes, code inside onclick attributes run globally.
    – Ja͢ck
    Dec 6, 2012 at 10:11
  • +1 +up for the explanation and the Patience. learned a lot. see Update Dec 6, 2012 at 10:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.