jQuery.ajax is not a function TypeError

Question

I'm not sure why my code is bringing up an error. What have I got wrong?

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
      $( document ).ready(function() {
        var logResp = $('#food-hygiene');

        logResp.ajax({
                        url: "food-hygiene.html",
                        async: false,
                        type: "GET",
                        dataType: "string"
                    }).done( function(data) {
                        alert(data);
                    })
      });
    </script>
  </head>
  <body>
    <div class="container-fluid">
      <div class="content-wrapper">
        <div id="food-hygiene">Loading...</div>
         </div>

        </div>
        <!-- jQuery first, then Tether, then Bootstrap JS. -->
        <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
      </body>
    </html>

UPDATE: As pointed out by Satpal, there are two references to jQuery. The lower one is a slim version which doesn't support jQuery.

The "slim" version of jQuery doesn't include the $.ajax API. Use full version — charlietfl
– charlietfl, Commented May 25, 2018 at 11:38
code.jquery.com/jquery-3.1.1.slim.min.js which is added at bottom of page which is override previous loaded ibrary — Satpal
– Satpal, Commented May 25, 2018 at 11:40

KodeFor.Me · Accepted Answer · 2018-05-25 11:35:10Z

1

logResp it contains the instance of the #food-hygiene element you select using this statement: $('#food-hygiene');.

Replace this code:

logResp.ajax({
                    url: "food-hygiene.html",
                    async: false,
                    type: "GET",
                    dataType: "string"
                }).done( function(data) {
                    alert(data);
                })

With this:

jQuery
    .ajax(
        {
            url: "food-hygiene.html",
            async: false,
            type: "GET",
            dataType: "string"
         }
    )
    .done(
        function(data) {
            alert(data);
        }
    );

answered May 25, 2018 at 11:35

KodeFor.Me

13.5k30 gold badges104 silver badges174 bronze badges

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

3 Comments

Ivan Over a year ago

It solves one issue but doesn't solve the OP's problem.

Ivan Over a year ago

You might want to check that the code is actually solving the OP's problem before saying that @BlindRoach.

Blind Roach Over a year ago

We all come here to learn and share our knowledge, and I feel like the whole downvoting system was poorly made. I think you should have pointed that out as comment, the answer isn't something that was scribbled in a few seconds, its well enough constructed and I think he would edit/remove after a heads up. Didn't mean to offend by my comment, I just think the downvote should be reserved for ignorant out of context answers that don't even aim to fix the problem at hand.

user9846301 · Accepted Answer · 2018-05-25 11:41:53Z

1

I had the same issue.

Just replace:

'src="https://code.jquery.com/jquery-3.1.1.slim.min.js"'

with

'src="https://code.jquery.com/jquery-3.1.1.min.js"'

in script tag and add it in head tad

answered May 25, 2018 at 11:41

user9846301

Comments

Ivan · Accepted Answer · 2018-05-25 11:43:12Z

It seems the jQuery file is not loaded properly, I have tried without another <link> tag and the code doesn't throw any errors:

Also $('#food-hygiene') doesn't have a method ajax() put $ does.

$(document).ready(function() {
  
  $.ajax({
    url: "food-hygiene.html",
    async: false,
    type: "GET",
    dataType: "string"
  }).done(function(data) {
    alert(data);
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <!--<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>-->

</head>

<body>
  <div class="container-fluid">
    <div class="content-wrapper">
      <div id="food-hygiene">Loading...</div>
    </div>

  </div>
  <!-- jQuery first, then Tether, then Bootstrap JS. -->
  <!--<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>

</html>

Death-is-the-real-truth · Accepted Answer · 2018-05-25 11:43:50Z

You are creating an object and trying to use it as a prefix for ajax which is wrong
Add only one jQuery library either jquery-3.2.1.min.js or jquery-3.1.1.slim.min.js
Put script code down on the page and check. (Or you can leave it there also)

Do like below:-

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  </head>
  <body>
    <div class="container-fluid">
      <div class="content-wrapper">
        <div id="food-hygiene">Loading...</div>
         </div>

        </div>
        <!-- jQuery first, then Tether, then Bootstrap JS. -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
         <script>
          $( document ).ready(function() {
            var logResp = $('#food-hygiene');

            logResp.ajax({
                            url: "food-hygiene.html",
                            async: false,
                            type: "GET",
                            dataType: "string"
                        }).done( function(data) {
                            alert(data);
                        })
          });
        </script>
      </body>
    </html>

Collectives™ on Stack Overflow

jQuery.ajax is not a function TypeError

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related