未捕获的ReferenceError：$未定义 - Rails [重复]

This question already has an answer here:

这个问题在这里已有答案:

Uncaught ReferenceError: $ is not defined rails 5 answers

未捕获的ReferenceError:$未定义rails 5个答案

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

尝试从API加载数据时,我一直收到此控制台错误

Uncaught ReferenceError: $ is not defined

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

我尝试在应用程序中放置一个JQuery脚本,但它不起作用。

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

我只是希望在加载页面时将数据附加到#resultContainer

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

3 个解决方案

#1

You might be do not have jQuery Plugin...

你可能没有jQuery插件......

#2

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

确保在调用jQuery函数之前已正确包含jQuery库或检查任何共享jQuery $别名的冲突JavaScript库。

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

如果任何其他JavaScript库的$变量与jQuery有一些冲突,您可以使用jQuery.noConflict()方法来避免相同。

Eg.

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

#3

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

如果你可以通过输入jQuery来访问jQuery,你可以用$ = jQuery自己别名;

#1