2010-09-22 6 views
2

Je reçois une erreur de fonction non définie avec mon script jquery et je ne sais pas pourquoi.Fonction non définie

code JQuery: 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 de la page HTML:

<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> 

problème: Quoi qu'il en soit, comme vous pouvez le voir dans le code, je suis d'abord en train de paramétrer toutes les variables (y compris le nom du client et customerAddress, qui sont les plus importants dans ce cas). Ensuite, j'ai quatre fonctions et à la fin du script j'initialise la carte. Tout fonctionne sauf deux choses sur la page html. Il existe un "onClick" pour centrer la carte qui ne fonctionne pas et le formulaire de soumission ne fonctionne pas.

Je crois que c'est parce que j'ai les fonctions définies dans le gestionnaire ready. On m'a dit que je devais lier les fonctions à leurs événements dans ce gestionnaire, comme je l'ai fait avec initialize_map. J'ai essayé de le faire mais tout ce que j'essaie ne fonctionne pas. Note de côté et astuce utile peut-être: show_address s'exécute immédiatement pour démarrer la carte quand j'appelle initialize_map; Cependant, c'est aussi ce qui est censé être appelé lorsque vous cliquez sur le bouton «Carte du centre sur le concessionnaire». get_directions n'est appelée que lorsque vous envoyez le formulaire.

A partir de maintenant tout apparaît à droite lorsque les chargement de la page; Cependant, lorsque je clique sur «Centre carte sur concession» ou que je soumets le formulaire, j'obtiens une erreur javascript qui me dit que la fonction n'est pas définie.

Je suis au point mort avec cela. Je ne sais pas comment le faire fonctionner correctement. Toute aide est grandement appréciée. Merci!

+0

quelle fonction ne définit pas généralement il vous dira quelle ligne avez-vous trop charger google maps et jquery? – mcgrailm

+0

le show_address et get_directions ... je reçois les erreurs quand je clique sur l'un des deux boutons – RyanPitts

+0

oui, à la fois JQuery et google maps sont chargés. – RyanPitts

Répondre

16

Il est parce que votre show_address et get_directions sont définis seulement à l'intérieur que le champ d'application de gestionnaire document.ready, vous devez déplacer les fonctions en dehors de là-bas si vous voulez les appeler via le script en ligne.

+0

ok, mais si je déplace 'show_address' en dehors du gestionnaire' ready', est-ce que 'initialize_map' va s'arrêter car il utilise cette fonction? – RyanPitts

+1

@RyanPitts - Non, une fonction dans une portée externe est visible à une fonction dans une portée en son sein, mais pas vice-versa ... si vous les déplacez dehors (ne casse aucune référence à quoi que ce soit * ces fonctions * utilisent .. .move that stuff à l'extérieur, par exemple la variable 'geocoder', etc.) alors vous êtes tous ensemble. –

+0

Je ne pense pas que des thats vrai ... J'ai le code mis en place de la même façon sur une de mes pages voir ici http://stackoverflow.com/questions/3726646/problem-creating-markers-from-json/3726781# 3726781 très similaire senerio ne signifie pas pour autant ses bonnes pratiques si – mcgrailm