jQuery and the browser

JavaScript
1

can anyone explain to me why I would be unable to test pages that include jQuery code locally in my browser? (Safari 5.0.6 and Firefox 3.6.28) It seems I need to upload the page to a web server for testing results. The pages include a link to a jQuery external library and work for the most part. Some features don’t seem to work. Do browser compatibility issues exist?

2

Hi there,

How are you including jQuery?

Often it is done like this:

<script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

and this won’t work locally.

The local variation would be:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

Otherwise, if you could post a bit of code that works on your server, but not locally, that would help diagnose things further.

3

I’m going through some exercises in a book. The following is an example of a script I’m trying to run. Again, the functionality appears when run from a server but not when run locally. Also, I can’t seem to get this simple exercise to run correctly. The script never gets beyond the first IF conditional because it doesn’t see any numerical values entered. I noticed, that the ‘Miles Per Gallon’ form element should reflect the calculated value when the script runs correctly but the values don’t persist on the form, the elements immediately reset themselves. How do I get the values to remain on the form when the script completes?

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<style type = 'text/css'>
</style>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
[COLOR="#808080"]<!--<script type="text/javascript" src="jquery-1.7.2.min.js"></script>-->[/COLOR]
<script type='text/javascript'>

 $(document).ready(function()
    { $('input').change(function()
        { var startMiles = parseInt($('#startingMiles').attr('value'));
          var endMiles = parseInt($('#endingMiles').attr('value'));
          var gallons = parseInt($('#gallonsUsed').attr('value'));
          if (isNaN(startMiles) || isNaN(endMiles) || isNaN(gallons))
            window.alert('you must enter numeric values!');
          else
            if (gallons > 0)
                { var mpg = (endMiles - startMiles) / gallons;
                  $('#mpg').attr('value', mpg); } }); });
      
</script>                    
</head>

<body>
<h1>Gas Mileage</h1>
<form action = ''>
    <p>Starting Mileage<input type = 'text' id = 'startingMiles' value = '0' /></p>
     <p>Ending Mileage<input type = 'text' id = 'endingMileage' value = '0'/></p>
     <p>Gallons Used<input type = 'text' id = 'gallonsUsed' value = '0'/></p>
     <p>Miles Per Gallon<input type = 'text' id = 'mpg' value = '0'/></p>
</form>    
</body>
</html>
4

Simply change all the src="// references to src="http// as Pullo already advised

5

thanks, that small revision seemed to clear up my other problems as well. All set for now.