2012-05-11 20 views
0

マッシュを作成しようとしています。複数の機能を1つのファイルにまとめたいのですが、私のAjax機能を追加すると(何も表示されません)何も表示されません。1つのファイルに複数の機能を追加するにはどうすればよいですか?

また、jQueryで表示したい場合は、下の機能を追加するまでトップ機能(Googleマップのマーカーと情報付き)がすべて動作します。

Googleのように(function(){})に追加する必要があります。 googlemap関数の終わりに?

私のコードで自分の関数を呼び出すと、window.onloadがGoogleのもので呼び出されたので、どのようにプレビュー用にajaxを呼び出すのでしょうか。

私は1つのファイルにすべての機能を追加する方法がわからないよ、私は(){}私は$ .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() 
{ 
    ............ 
} 

あなたがそれら1つのファイルにして、関数の最後に();に関する持つことができますが、それはすぐに無名関数を呼び出す方法ですJavaScriptでは、jQueryのdocument.readyのようになります。

関連する問題