CODEWITHSUNDEEP
javascriptjqueryhtml
David Faizulaev
David Faizulaev

Reputation: 5761

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

Upvotes: 3

Views: 42145

Answers (5)

Alvaro Pereira
Alvaro Pereira

Reputation: 643

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.

Upvotes: 0

Rob Sedgwick
Rob Sedgwick

Reputation: 5226

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

Upvotes: 8

laaposto
laaposto

Reputation: 12213

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)

See more

Upvotes: 1

Godinall
Godinall

Reputation: 2290

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

  1. 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>' ); }

Upvotes: 2

winterfall
winterfall

Reputation: 164

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.

Upvotes: 3

Related Questions