javascript - Jquery '$' is undefined

I have created the webpage below and successfully ran it on several machines. When I run it on another machine it fails. When debugging it this error: Error: '$' is undefined

Running on IE 9.

I have tried to change the Jquery link to:

<script src="//ajax.googleapis/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

but it didn't help. What can be the reason for the error ?

There is the complete code:

   <!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <META HTTP-EQUIV="Refresh" CONTENT="420">
    <style type="text/css">
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }


       .labels {
     color: orange;
     background-color: black;
     font-family: "Lucida Grande", "Arial", sans-serif;
     font-size: 10px;
     font-weight: bold;
     text-align: center;
     width: 50px;     
     border: 2px solid black;
     white-space: nowrap;}
    </style>
    <script src=".10.2/jquery.min.js"></script>
    <script src=".xml2json.js" type="text/javascript" language="javascript"></script>
    <script src=".exp&sensor=false"></script>
    <script src=".0.1/src/markerwithlabel.js"></script>
    <script>
var markers = [];
var map = null;

  $.get('Customers.xml', function(xml) {
      var jsonObj = $.xml2json(xml);
        $.each(jsonObj.Marker, function(){
            var stat = this.site_status == "Critical" ? ".png" : ".png";
                 var mark = {
                        title: this.title,
                        location: this.site_location,
                        icon: stat
                        }
                markers.push(mark);
        });
        for(var i=0; i< markers.length; i++){
          var maddress = markers[i].location;
          var image = markers[i].icon;
          var custname = markers[i].title;
          geocodeAddress(maddress, image, custname,map); 
        } 
});     

function geocodeAddress(maddress, image, custname,map) {
  var geocoder = new google.maps.Geocoder();
  geocoder.geocode( { 'address': maddress}, function(results, status) { 
    if (status == google.maps.GeocoderStatus.OK) {   
      var myLatlng = new google.maps.LatLng(results[0].geometry.location.lat(),results[0].geometry.location.lng());
      var iconBase = '/';
      var marker = new MarkerWithLabel({
      position: myLatlng, map:map, icon: image,labelContent: custname,
       labelAnchor: new google.maps.Point(22, 0),
       labelClass: "labels", // the CSS class for the label
       labelStyle: {opacity: 0.75}});
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}

function initialize() {
    var chicago = new google.maps.LatLng(35.442579,-40.895920);
    var mapOptions = {
        zoom: 4,
        center: chicago,
        mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
     <div id="map-canvas"></div>
  </body>
</html>

Thanks in advance.

I have created the webpage below and successfully ran it on several machines. When I run it on another machine it fails. When debugging it this error: Error: '$' is undefined

Running on IE 9.

I have tried to change the Jquery link to:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

but it didn't help. What can be the reason for the error ?

There is the complete code:

   <!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <META HTTP-EQUIV="Refresh" CONTENT="420">
    <style type="text/css">
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }


       .labels {
     color: orange;
     background-color: black;
     font-family: "Lucida Grande", "Arial", sans-serif;
     font-size: 10px;
     font-weight: bold;
     text-align: center;
     width: 50px;     
     border: 2px solid black;
     white-space: nowrap;}
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://jquery-xml2json-plugin.googlecode.com/svn/trunk/jquery.xml2json.js" type="text/javascript" language="javascript"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.0.1/src/markerwithlabel.js"></script>
    <script>
var markers = [];
var map = null;

  $.get('Customers.xml', function(xml) {
      var jsonObj = $.xml2json(xml);
        $.each(jsonObj.Marker, function(){
            var stat = this.site_status == "Critical" ? "http://maps.google.com/mapfiles/ms/micons/red-dot.png" : "http://maps.google.com/mapfiles/ms/micons/green-dot.png";
                 var mark = {
                        title: this.title,
                        location: this.site_location,
                        icon: stat
                        }
                markers.push(mark);
        });
        for(var i=0; i< markers.length; i++){
          var maddress = markers[i].location;
          var image = markers[i].icon;
          var custname = markers[i].title;
          geocodeAddress(maddress, image, custname,map); 
        } 
});     

function geocodeAddress(maddress, image, custname,map) {
  var geocoder = new google.maps.Geocoder();
  geocoder.geocode( { 'address': maddress}, function(results, status) { 
    if (status == google.maps.GeocoderStatus.OK) {   
      var myLatlng = new google.maps.LatLng(results[0].geometry.location.lat(),results[0].geometry.location.lng());
      var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
      var marker = new MarkerWithLabel({
      position: myLatlng, map:map, icon: image,labelContent: custname,
       labelAnchor: new google.maps.Point(22, 0),
       labelClass: "labels", // the CSS class for the label
       labelStyle: {opacity: 0.75}});
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}

function initialize() {
    var chicago = new google.maps.LatLng(35.442579,-40.895920);
    var mapOptions = {
        zoom: 4,
        center: chicago,
        mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
     <div id="map-canvas"></div>
  </body>
</html>

Thanks in advance.

Share Improve this question edited Jan 1, 2014 at 14:25 asked Jan 1, 2014 at 14:12 David Faizulaev 5,72123 gold badges86 silver badges141 bronze badges

What URL are you running from? What do you see in the Network tab on the dev tools? – SLaks Commented Jan 1, 2014 at 14:14
2 tip: browser details are important not OS when its Browser related application. – harshal Commented Jan 1, 2014 at 14:18
1 Right now i am running this URL: "C:\inetpub\wwwroot\alarm_map\nmap.html" – David Faizulaev Commented Jan 1, 2014 at 14:25
@DavidFaiz they are asking about the URL in the location bar in the browser, not where your web root is in the filesystem. – Dagg Nabbit Commented Jan 1, 2014 at 14:26
1 Given that a green tick has appeared on an answer with the same question, I guess you hadn't tried opening the jQuery URL. – Popnoodles Commented Jan 1, 2014 at 14:39

| Show 6 more comments

5 Answers 5

Sorted by: Reset to default 8

The function $ is held within the script :

//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

So even calling $(function() { ... or $(document).ready( ... before this script has loaded will both result in $ being undefined

As your load order of the scripts looks correct, it appears like you are not able to load the jquery.min file - try clicking this link from the machine with the problem to make sure

And /or ( and not to spark a CDN vrs Local debate ) - download the jquery file and call it locally (what if your visitor could not see the file for other reasons? ) - at teh very least have a back up plan.

<script src="/pathtojsfiles/jquery.min.js"></script>

as an aside, a better ( loading your markup that that scripts are going to use ) document setup would be to place the scripts and your functions using these scripts under the markup, before the closing </body> tag. This ( for more SEO related websites ) will ensure your page contents are loaded before you add external JS.

! - This looks already said by some of these answers popping in as a type, but posting anyway ..

Open your browser's developer tool, see the network, to see if the cdn failed to load the jquery lib.

if not, try to move the script code after the html code.

normally this means jquery is not loaded, verify that in developer tool. if that is the case:1. see if javascript is disabled, as you are using IIS I guess you also use IE as browser? try to add your localhost to trusted domains

add this to your code

if (!window.jQuery) { document.write( '<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"><\/script>' ); }

Try to put

jQuery.noConflict();

and replace your $ symbol with jQuery in your code.

For example replace $.get('Customers.xml', function(xml) with jQuery.get('Customers.xml', function(xml)

None of above worked for me. I did it work after a complete browser cache refresh. Using the Developer Network trace, I saw a 304 (jquery-xxxx.js not downloaded0.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Jquery '$' is undefined - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)