2012-05-11 58 views
0

我想創建一個mash up of sorts ...我想要的功能是在一個文件,但是當我添加我的Ajax功能(一半向下)沒有任何顯示。如何將多個函數添加到一個文件?

此外,我想用jQuery顯示它們,並且頂部函數(帶有標記和信息的Google地圖)都會工作,直到添加底層函數。

我應該將它們添加到像Google一樣的函數(){})中,以及什麼是(); googlemap函數的結尾?

當我在我的代碼中調用函數時,我將如何調用ajax進行預覽,因爲window.onload已在Google中調用。

我知道,我可以用$ .ready函數(){}但我只是把函數名的.ready函數{}

我不能確定如何添加的所有功能於一身的文件並讓他們工作。基本上

這是代碼:

(function() { 

     //define global variables 
     var map, geocoder, marker, infowindow; 

     window.onload = function() { 

      //creating the map 
      var options = { 
       zoom: 5, 
       center: new google.maps.LatLng(53.383, -1.483), 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 

      map = new google.maps.Map(document.getElementById('map'), options); 

      //code for catching the form submit event goes here 
      //Getting the reference to the HTML form 
      var form = document.getElementById('addressForm'); 

      //Catching the forms submit event 
      form.onsubmit = function() { 

       //getting the address from the text input 
       var address = document.getElementById('address').value; 

       //Making the geocode call 
       getAddress(address); 

       //Preventing the form from doing a page submit 
       return false; 
       } 
      } 

      //Function Stub 
      function getAddress(address) { 

       //Check to see if we already have a geocode object. 
       //If not we create one 
       if(!geocoder) { 
        geocoder = new google.maps.Geocoder(); 
       } 

       //Creating the geoCoderRequest Object 
       var geocoderRequest = { 
        address: address 
       } 

       //Making the geocode request 
       geocoder.geocode(geocoderRequest, function (results, status) { 

        //Check if status is ok beofre proceeding 
        if (status == google.maps.GeocoderStatus.OK){ 

         //Center the map on the returned location 
         map.setCenter(results[0].geometry.location); 

         //Check to see if already a Marker there 
         if (!marker){ 
          //Create a new marker and add it to the map 
          marker = new google.maps.Marker({ 
           map: map  
           }); 
          } 
         //Setting position of the Marker to returned location 
         marker.setPosition(results[0].geometry.location); 

          //Check to see if we've already an info window 
          if(!infowindow) { 
           //Creating a new info window 
           infowindow = new google.maps.InfoWindow(); 
           } 
          //Creating the content of the info window to the Address 
          //and the returned position 
          var content = '<strong>' + results[0].formatted_address + '</strong><br />'; 
          content += 'Lat: ' + results[0].geometry.location.lat() + '<br />'; 
          content += 'Lng: ' + results[0].geometry.location.lng(); 

          //Adding the content to the info window 
          infowindow.setContent(content); 

          //Opening the infoWindow 
          infowindow.open(map, marker); 

         } 

       }); 
      } 

      })(); 


    // beginning of new function 
      var xhr = false; 
      var xPos, yPos; 

      function prev(){ 
        var link = document.getElementByTagName("a").onmouseover = showPreview; 
       } 

     function showPreview(evt) { 
      if (evt) { 
       var url = evt.target; 
      } 
      else{ 
       evt = window.event; 
       var url = evt.srcElement; 
      } 
      xPos = evt.clientX; 
      yPos = evt.clientY; 

      if (window.XMLHttpRequest) { 
       xhr = new XMLHttpRequest(); 
      } 
      else { 
       if (window.ActiveXObject) { 
        try { 
         xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
        } 
        catch (e) { } 
       } 
      } 

      if (xhr) { 
       xhr.onreadystatechange = showContents; 
       xhr.open("GET", url, true); 
       xhr.send(null); 
      } 
      else { 
       alert("Sorry, but I couldn't create an XMLHttpRequest"); 
      } 
      return false; 
     } 

      function showContents() { 
       if (xhr.readyState == 4) { 
        if (xhr.status == 200) { 
         var outMsg = xhr.responseText; 
        } 
        else { 
         var outMsg = "There was a problem with the request " + xhr.status; 
         } 
         var preview = document.getElementById('preview'); 
         preview.innerHTML = outMsg; 
         preview.style.top = parseInt(yPos)+2 + "px"; 
         preview.style.left = parseInt(xPos)+2 + "px"; 
         preview.style.visibility = "visible"; 

         preview.onmouseout = function(){ 
          document.getElementById('preview').style.visibility = "hidden"; 
         } 
        } 

回答

3

這取決於你爲什麼要添加的功能。但這是一個簡單的公式。如果您希望只在文檔中調用函數,並且希望在加載文檔時調用它們。然後添加他們爲「匿名函數」

例:

$(function() { 
    //you code 
    ............... 
    // you can call your named functions also here. 
    //like 
    somefunction(); 
}); 

但是,如果你希望他們在後面叫爲好,該文件已加載時。然後添加「命名函數」

例:

function somename() 
{ 
    ............ 
} 

在這兩種情況下,你可以讓他們在一個文件和關於();在函數結束時,它立即調用匿名函數的方式在JavaScript中,如jQuery中的document.ready

相關問題