title: Uncaught ReferenceError: $ is not defined - Rails
body: <p>I keep getting this console error when trying to load data from an API</p>
  
  <pre><code>Uncaught ReferenceError: $ is not defined
  </code></pre>
  
  <p>I have tried placing a JQuery script within the app and it does not work.</p>
  
  <p>I just want the data to append to the #resultContainer when the page is loaded</p>
  
  <p><strong>app/views/locations/show.html.erb</strong></p>
  
  <p><code>&lt;div id="resultContainer"&gt;&lt;/div&gt;</code></p>
  
  <p><strong>app/assets/javascripts/application.js</strong></p>
  
  <pre><code>var _PremiumApiBaseURL = 'http://api.worldweatheronline.com/premium/v1/';
  var _PremiumApiKey = 'APIKEY';
  
  //Get Marine Weather Data
  function JSONP_MarineWeather(input) {
  var url = _PremiumApiBaseURL + "marine.ashx?q=" + input.query +
                                 "&amp;format=" + input.format +
                                 "&amp;fx=" + input.fx +
                                 "&amp;key=" + _PremiumApiKey +
                                 "&amp;tide=yes&amp;";
  
  jsonP(url, input.callback);
  }
  
  // Helper
  function jsonP(url, callback) {
  $.ajax({
      type: 'GET',
      url: url,
      async: false,
      contentType: "application/json",
      jsonpCallback: callback,
      dataType: 'jsonp',
      success: function (json) {
          console.dir('success');
      },
      error: function (e) {
          console.log(e.message);
      }
  });
  }
  
  
  
  var resultContainer = $('#resultContainer');
  var output = '';
  
  
  $(document).ready(function () {
    GetMarineWeather();
  });
  
  
  function GetMarineWeather(e) {
      var marineWeatherInput = {
        query: '26.13,-80.10',
        format: 'JSON',
        fx: '',
        callback: 'MarineWeatherCallback'
       };
      JSONP_MarineWeather(marineWeatherInput);
      e.preventDefault();
  }
  
  
  
  function MarineWeatherCallback(marineWeather) {
      var allDataToday = marineWeather.data.weather[0]
      output = "&lt;br/&gt; Date: " + allDataToday.date;
      output += "&lt;br/&gt; Min Temp (f): " + allDataToday.mintempF;
      output += " - Max Temp (f): " + allDataToday.maxtempF;
      output += "&lt;br/&gt;";
      //6AM
      output += "&lt;br/&gt; Time: 6AM";
      output += " - Surf: " + allDataToday.hourly[2].swellHeight_ft + "ft";
      output += " - Swell: " + allDataToday.hourly[2].swellDir16Point + " " + allDataToday.hourly[2].swellPeriod_secs + "sec";
  
      resultContainer.empty();
      resultContainer.html(output);
  }
  </code></pre>
  
  <p>Help</p>