Function not defined
It's because your show_address
and get_directions
are defined only inside that document.ready
handler's scope, you need to move the functions outside there if you want to call them via inline script.
RyanPitts
Updated on July 09, 2022Comments
-
RyanPitts almost 2 years
I am getting a function not defined error with my jquery script and i'm not sure why.
JQuery Code: http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAhTrgZ5jvdqcEQouEpPcZ_hS81NmJwGXlxuJr8lEEo4Njw3WRVhT8auzZb55JSMDkwIaCdNkPHL5gNg" type="text/javascript">
<script type="text/javascript"> $(document).ready(function(){ var dealerName = $('.name', '.adr').text(); var customerName = dealerName.slice(0, - 1); var customerAddress = $('.street', '.adr').text() + ', ' + $('.locality', '.adr').text() + ', ' + $('.state', '.adr').text() + ', ' + $('.zipCode', '.adr').text(); $("#nameAddress .placeholderName").html(customerName); $("#nameAddress .placeholderAddress").html(customerAddress); var error_address_empty = 'Please enter a valid address first.'; var error_invalid_address = 'This address is invalid. Make sure to enter your street number and city as well?'; var error_google_error = 'There was a problem processing your request, please try again.'; var error_no_map_info = 'Sorry! Map information is not available for this address.'; var default_address = customerAddress; var current_address = null; var map = null; var geocoder = null; var gdir = null; var map_compatible = false; if( GBrowserIsCompatible() ) { map_compatible = true; } function initialize_map() { if( map_compatible ) { map = new GMap2(document.getElementById('map_canvas')); geocoder = new GClientGeocoder(); show_address(default_address); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); } } function show_address(address) { if( map_compatible && geocoder ) { current_address = address; geocoder.getLatLng( address, function( point ) { if( !point ) { alert(error_no_map_info); } else { map.setCenter(point, 13); var marker = new GMarker(point); map.addOverlay(marker); marker.openInfoWindowHtml("<span style='font-size:14px; font-weight:bold;'>" + customerName + "<br /></span><span style='font-size:12px;'>" + address + "</span>"); } } ); } return false; } function get_directions() { if( map_compatible ) { if( document.direction_form.from_address.value == '' ) { alert(error_address_empty); return false; } document.getElementById('directions').innerHTML = ''; gdir = new GDirections(map, document.getElementById('directions')); GEvent.addListener(gdir, 'error', handleErrors); set_directions(document.direction_form.from_address.value, current_address); } return false; } function set_directions(fromAddress, toAddress) { gdir.load("from: " + fromAddress + " to: " + toAddress, { "locale": "en" }); } function handleErrors(){ if( gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS ) alert(error_invalid_address); else if( gdir.getStatus().code == G_GEO_SERVER_ERROR ) alert(error_google_error); else if( gdir.getStatus().code == G_GEO_MISSING_QUERY ) alert(error_address_empty); else alert(error_invalid_address); } $(window).load(initialize_map); }); </script>
Code from the HTML page:
<div id="main-map-wrapper"> <div id="seperator"></div> <table width="100%" height="94"> <tr valign="top"> <td width="33%" colspan="3"> <div id="headertextdiv"> <div id="nameAddress"> <span class="placeholderName" style="font-size:20px; font-weight:bold; line-height:22px;"> </span> <br /> <span class="placeholderAddress" style="font-size:14px; font-weight:bold; line-height:22px;"> </span> <br /> <input type="submit" onClick="return show_address('5930 West Plano Pkwy, Plano, Texas, 75093');" value="Center Map on Dealership"> </div> </div> </td> </tr> </table> <div id="map_canvas"> </div> <form name="direction_form" onSubmit="get_directions(); return false;" class="form"> <span style="font-size:18px; font-weight:bold;">Need directions?</span> <br /> <span style="font-size:14px; margin-top:7px;">Enter your address below to get turn-by-turn directions:</span> <br /> <input type="text" name="from_address" class="form-field" /> <input type="submit" value="Get Directions" class="form-submit" style="margin-left:10px;" /> </form> <a name="directions_table"> </a> <div id="directions"> </div> </div> <div class="footer-fix"> </div>
Problem: Anyway, as you can see in the code i am first setting all of the variables (including the customerName and customerAddress, which are the most important in this case). Then i have four functions and at the end of the script i initialize the map. Everything works except for two things on the html page. There is an "onClick" to center the map that is not working and the form submit does not work.
I believe this is because i have the functions set inside the
ready
handler. I have been told that i need to bind the functions to their events within that handler just as i have with initialize_map. I have tried to do this but everything i try does not work. Side note and helpful tip maybe:show_address
runs immediately to start the map when i callinitialize_map
; however, it is also what is supposed to be called when you click the button "Center Map on Dealership".get_directions
is only called when you submit the form.As of now everything shows up right when the page loads; however, when i click on "Center map on Dealership" or submit the form i get a javascript error that is telling me that the function is not defined.
I am at a standstill with this. Not sure how to get this functioning properly. Any help is greatly appreciated. Thanks!
-
RyanPitts almost 14 yearsok, but if i move
show_address
outside theready
handler, willinitialize_map
break since it uses that function? -
Nick Craver almost 14 years@RyanPitts - Nope, a function in an outer scope is visible to a function in a scope within it, but not vice-versa...if you move them outside (not breaking any references to anything those functions use...move that stuff outside, e.g. the
geocoder
variable, etc.) then you're all set. -
mcgrailm almost 14 yearsI don't think thats true ... I have code set up the same way on one of my pages see here stackoverflow.com/questions/3726646/… very similar senerio doesn't mean its good practice though
-
Nick Craver almost 14 years@mcgrailm - You're not trying to use the function from an outer scope (e.g. inline
onclick
handler)...even binding theclick
handlers inside thedocument.ready
would work here, but a reference to a global function not scoped as such won't work. -
RyanPitts almost 14 yearsok, i'll give that a whirl and see if it resolves the issue. Thanks!
-
mcgrailm almost 14 yearsohh i see you mean in the html I did see that now I understand what your saying good to know
-
RyanPitts almost 14 yearsnow, i think i'm still having an issue. The problem with putting these out side the
ready
handler is that for the way i am manipulating this website, i have to set the variable for the address inside theready
handler. The functionshow_address
uses the address variable to start the map centered in the right spot. Is there any way to work around this?