views:

52

answers:

1

I am getting a function not defined error with my jquery script and i'm not sure why.

JQuery Code:

<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;">&nbsp;&nbsp;</span>
                        <br />
                        <span class="placeholderAddress" style="font-size:14px; font-weight:bold; line-height:22px;">&nbsp;&nbsp;</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">&nbsp;&nbsp;</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">&nbsp;&nbsp;</a>
    <div id="directions">&nbsp;&nbsp;</div>
</div>
<div class="footer-fix">&nbsp;&nbsp;</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 call initialize_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!

+2  A: 

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.

Nick Craver
ok, but if i move `show_address` outside the `ready` handler, will `initialize_map` break since it uses that function?
RyanPitts
@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.
Nick Craver
I don't think thats true ... I have code set up the same way on one of my pages see here http://stackoverflow.com/questions/3726646/problem-creating-markers-from-json/3726781#3726781 very similar senerio doesn't mean its good practice though
mcgrailm
@mcgrailm - You're not trying to use the function from an outer scope (e.g. inline `onclick` handler)...even binding the `click` handlers inside the `document.ready` would work here, but a reference to a global function not scoped as such won't work.
Nick Craver
ok, i'll give that a whirl and see if it resolves the issue. Thanks!
RyanPitts
ohh i see you mean in the html I did see that now I understand what your saying good to know
mcgrailm
now, 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 the `ready` handler. The function `show_address` uses the address variable to start the map centered in the right spot. Is there any way to work around this?
RyanPitts