clement l
Reputation: 109
jquery error $ is not a function
I'm trying to use highchart library for an application.
I don't understand why I have this error:
TypeError: $ is not a function $(function () {
I tried to add jQuery.noConflict(); but it doesn't work
Here's my code:
<script type="text/javascript">
$(function () {
var datasAxisX;
var datasAxisY;
setTimeout('functionAddition()', 1000);
$('#container').highcharts({
chart: {
type: 'spline'
},
title: {
text: 'Statistiques sur la longueur des produits'
},
subtitle: {
text: 'Du 23/09/2014 au 26/09/2014'
},
xAxis: {
categories: datasAxisX,
tickInterval: 5 /*on affiche l'abscisse tous les 5 points*/
},
yAxis: {
title: {
text: 'longueur (mm)'
},
min: 0,
minorGridLineWidth: 0,
gridLineWidth: 0,
alternateGridColor: null,
plotBands: [{ // zone bleue produit toléré variation longueur
from: 6, //val min tolérée
to: 9, //val max tolérée
color: 'rgba(68, 170, 213, 0.1)', //couleur de la zone
label: {
text: 'variation longueur tolérée',
style: {
color: '#606060' //ou c'est celle la la couleur de la zone?
}
}
}]
},
tooltip: {
valueSuffix: ' mm' //unité lorsqu'on zoom sur un point particulier de la courbe (dans le carré qui apparait)
},
plotOptions: {
spline: {
lineWidth: 4, //épaisseur de la courbe
states: {
hover: {
lineWidth: 5 //aucune idée
}
},
marker: {
enabled: false
},
}
},
series: [{
name: 'Longueur produit',
data: datasAxisY
}],
navigation: {
menuItemStyle: {
fontSize: '10px'
}
}
});
});
function functionAddition()
{
$.ajax(
{
type : 'POST',
url : "/addition",
contentType: "application/json;charset=UTF-8",
dataType:'json',
data : JSON.stringify( { "chiffre1" : "2" , "chiffre2" : "3" } ),
success : function(data)
{
if (data !=null)
{
datasAxisX=data.reponseServer.axisX;
datasAxisY=data.reponseServer.axisY;
}
}/*success : function() {}*/
});/*$.ajax*/
}
</script>
I tried:
Sorry i'm french i don't really understand your post. I added one script you give me and jQuery.noConflict() but i have always the same error
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link href="{{ url_for('static', filename='jquery.min.js') }}" type="text/javascript" />
<link href="{{ url_for('static', filename='highcharts.js') }}" type="text/javascript" />
<link href="{{ url_for('static', filename='exporting.js') }}" type="text/javascript" />
<link href="{{ url_for('static', filename='csvChart.js') }}" type="text/javascript" />
<style type="text/css">
<!-- ${demo.css} -->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script type="text/javascript">
jQuery.noConflict();
$(function () {
...
UPDATE:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link href="/static/jquery.min.js" type="text/javascript" />
<!--<script type="text/javascript" src="../jquery.min.js"></script>-->
<link href="/static/highcharts.js" type="text/javascript" />
<!--<script src="../highcharts.js"></script>-->
<link href="/static/exporting.js" type="text/javascript" />
<!--<script src="../exporting.js"></script>-->
<link href="/static/csvChart.js" type="text/javascript" />
<!--<script src="../csvChart.js"></script>-->
<style type="text/css">
<!-- ${demo.css} -->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script type="text/javascript">
//jQuery.noConflict();
$(function () {
var datasAxisX;
var datasAxisY;
/*datasAxisX=['2014-10-07 23:43:19','2014-10-07 23:43:20','2014-10-07 23:43:20','2014-10-07 23:43:21','2014-10-07 23:43:23','2014-10-07 23:43:24','2014-10-07 23:43:24','2014-10-07 23:43:25','2014-10-07 23:43:25','2014-10-07 23:43:25','2014-10-07 23:43:25','2014-10-07 18:52:41','2014-10-07 18:52:41','2014-10-07 18:52:41','2014-10-07 18:52:42','2014-10-07 18:52:42','2014-10-07 18:52:42','2014-10-07 18:52:42'];*/
/*functionAddition();*/
// setTimeout('functionAddition()', 1000);
console.log(datasAxisX);
//console.log("typedatasAxisX = "+typeof datasAxisX[0]);
/*datasAxisY = [296.134,275.982,281.109,273.363,292.042,274.022,286.898,271.463,279.182,279.805,272.717,272.192,268.225,270.166,271.432,270.803,275.939,272.748];*/
$('#container').highcharts({
chart: {
type: 'spline'
},
title: {
text: 'Statistiques sur la longueur des produits'
},
subtitle: {
text: 'Du 23/09/2014 au 26/09/2014'
},
xAxis: {
// type: 'linear',
// labels: {
// overflow: 'justify'
// }
categories: datasAxisX,
tickInterval: 5 /*on affiche l'abscisse tous les 5 points*/
},
yAxis: {
title: {
text: 'longueur (mm)'
},
min: 0,
minorGridLineWidth: 0,
gridLineWidth: 0,
alternateGridColor: null,
plotBands: [{ // zone bleue produit toléré variation longueur
from: 6, //val min tolérée
to: 9, //val max tolérée
color: 'rgba(68, 170, 213, 0.1)', //couleur de la zone
label: {
text: 'variation longueur tolérée',
style: {
color: '#606060' //ou c'est celle la la couleur de la zone?
}
}
}]
},
tooltip: {
valueSuffix: ' mm' //unité lorsqu'on zoom sur un point particulier de la courbe (dans le carré qui apparait)
},
plotOptions: {
spline: {
lineWidth: 4, //épaisseur de la courbe
states: {
hover: {
lineWidth: 5 //aucune idée
}
},
marker: {
enabled: false
},
//pointInterval: 3600000, // one hour
//pointStart: Date.UTC(2009, 9, 6, 0, 0, 0)
}
},
series: [{
name: 'Longueur produit',
data: datasAxisY
}],
navigation: {
menuItemStyle: {
fontSize: '10px'
}
}
});
$.ajax(
{
type : 'POST',
url : "/addition",
contentType: "application/json;charset=UTF-8",
dataType:'json',
data : JSON.stringify( { "chiffre1" : "2" , "chiffre2" : "3" } ),
success : function(data)
{
alert("data = "+data);
if (data !=null)
{
console.log("toto = "+data.reponseServer.axisX);
<!-- console.log("data = "+data); -->
<!-- console.log("data[axisX] = "+data["axisX"]); -->
<!-- console.log("data[axisY] = "+data["axisY"]); -->
/*messageServer=parseInt(data.reponseServer);
$('#UID_afficheTest').val(messageServer);
document.getElementById('UID_afficheTest').innerHTML = messageServer;*/
datasAxisX=data.reponseServer.axisX;
datasAxisY=data.reponseServer.axisY;
console.log("datasAxisX = "+datasAxisX);
console.log("datasAxisY = "+datasAxisY);
}
}/*success : function() {}*/
});/*$.ajax*/
});
</script>
</body>
</html>
Upvotes: 0
Views: 648
Answers (2)
George Mauer
Reputation: 122052
Check the html being output for your page (right click - view page source). You should have a script tag that includes jquery
<script src="/url/to/jquery.js"></script>
before your script.
Edit: I see after your edit that you are including jquery properly (three different times actually! You should only include it once). In this case I don't understand why you are using noConflict, you shouldn't call it.
Upvotes: 1
wnbates
Reputation: 753
The $ symbol often associated with jQuery is not a core part of javascript. You need a separate script tag linking to a copy of the jQuery framework before you try and use $. Using jQuery.noConflict() will then remove the association with $ so that other libraries can use it. The Google CDN tags are as follows, you only need one of them depending on which version you are using.
1.x snippet: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
2.x snippet: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Upvotes: 0
Related Questions
- $ is not a function - jQuery error
- How to Solve "Uncaught TypeError: $ is not a function"?
- both jQuery and $ is not a function
- $ is not defined with jQuery
- jQuery "$ is not a function" error
- Jquery TypeError: $ is not a function
- jQuery $ is not defined
- Type Error $ is not a function
- Error: $ is not a function
- $ is not a function