Uncaught ReferenceError: $ is not defined - Rails

Question

I keep getting this console error when trying to load data from an API

Uncaught ReferenceError: $ is not defined

I have tried placing a JQuery script within the app and it does not work.

I just want the data to append to the #resultContainer when the page is loaded

app/views/locations/show.html.erb

<div id="resultContainer"></div>

app/assets/javascripts/application.js

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 +
                               "&format=" + input.format +
                               "&fx=" + input.fx +
                               "&key=" + _PremiumApiKey +
                               "&tide=yes&";

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 = "<br/> Date: " + allDataToday.date;
    output += "<br/> Min Temp (f): " + allDataToday.mintempF;
    output += " - Max Temp (f): " + allDataToday.maxtempF;
    output += "<br/>";
    //6AM
    output += "<br/> 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);
}

Help

that means jquery is not loaded – Pitabas Prathal May 18 '16 at 18:33 — Pitabas Prathal, May 18 '16 at 18:33

Jenson M John · Answer 1 · 2016-05-18T18:52:37.717

Make sure you've properly included jQuery library before calling jQuery functions Or Check any conflicting JavaScript libraries which shares jQuery $ alias.

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

IF any other JavaScript libraries' $ variable has some conflicts with jQuery, You can use jQuery.noConflict() method to avoid the same.

Eg.

var jq = jQuery.noConflict();
jq( "div p" ).hide(); //Instead of $( "div p" ).hide();

score 0 · Answer 2 · answered May 18 '16 at 18:55

0

If you can access jQuery by typing jQuery, you can alias it yourself with $ = jQuery;

answered May 18 '16 at 18:55

RayfenWindspear

6,116
1
30
42

Why the downvote? I have actually had to do this on one occasion. Though it was probably a conflict as in the answer by Jenson M John. – RayfenWindspear May 18 '16 at 20:48

Uncaught ReferenceError: $ is not defined - Rails

2 Answers2