jquery error $ is not a function

Question

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>

Have you included jQuery in your page BEFORE you try to use the $ symbol? — jfriend00
– jfriend00, Commented Feb 1, 2015 at 21:01
Side note: jQuery.noConflict() serves the opposite purpose — to remove the synonym "$ = jQuery" — Alex Shesterov
– Alex Shesterov, Commented Feb 1, 2015 at 21:04
Ok, thanks for the edit. So now can you explain why you're including jquery 3 times and why you're calling noConflict? What are you trying to do with that? I'm not sure where you got the idea for it. noConflict is used ensure compatibility in some very edge situations and is something you should almost never have to do. — George Mauer
– George Mauer, Commented Feb 1, 2015 at 21:26
The only reason why you would ever get this error is if $ is not a global function. jQuery adds this function when loaded by default and noConflict removes it (again, you should almost never use it). If removing noConflict still fails, then the only possibility remaining is that jquery never loaded. To diagnose this look in the network tab of your browser's developer tools. Those urls to googleapis look correct though, so I doubt that's the issue. — George Mauer
– George Mauer, Commented Feb 1, 2015 at 21:31

George Mauer · Accepted Answer · 2015-02-01 21:46:35Z

1

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.

edited Feb 1, 2015 at 21:46

answered Feb 1, 2015 at 21:02

George Mauer

123k140 gold badges400 silver badges632 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

clement l Over a year ago

thank you very much for your answer. yes i have in the head section : <script type="text/javascript" src="ajax.googleapis.com/ajax/libs/jquery/1.8/…> <link href="/static/jquery.min.js" type="text/javascript" /> <link href="/static/highcharts.js" type="text/javascript" /> <link href="/static/exporting.js" type="text/javascript" /> <link href="/static/csvChart.js" type="text/javascript" />

George Mauer Over a year ago

If that's what you have then I see the issue. Look at the network tab in devtools on chrome (ctrl+shift+j) and reload the page. You'll see jquery show up in red because it's not being loaded. double check the url. It's looking for it on your site because you're linking ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js when you should be linking //ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js (note the // prefix that tells it the resource is not on your domain, you could also try prefixing with https://). Oh, and don't call jQuery.noconflict()!

George Mauer Over a year ago

Yes, I see, your post didn't paste the url correctly in the comments because you didn't use `. See the comments on the main post after your edit.

clement l Over a year ago

i'm sorry i'm new here, and in programation, and in english language... so do you know what's my problem? Thank's a lot !

George Mauer Over a year ago

Please look at the comments on your question above. You include jQuery 3 different times and you call noConflict when you shouldn't.

|

jfriend00 · Accepted Answer · 2015-02-01 21:10:24Z

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>

Collectives™ on Stack Overflow

jquery error $ is not a function

2 Answers 2

6 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Related