$.ajax is not a function

Jquery is a framework of javascript and ajax is included in jquery we use ajax with jquery for building dynamic web pages. Basically ajax is a tool we can say which helps in browsing the data without refreshing the web page and speedups the websites.

Ajax stands for asynchronous javascript and XML, it allows the developer to make little changes asynchronously without reloading the page again and again.

Sometimes ajax throws an unexpected error that is “$.ajax is not a function” let’s discuss the reason behind this error:

Mostly the main reason behind the occurrence of this error is adding the wrong jquery CDN in the file. People do this mistake often that instead of copying the regular jquery CDN they copy the slim jquery CDN.

You will be thinking that what’s wrong with the usage of slim CDN, well the slim cdn doesn’t include ajax within it, ajax is the combination of all those methods and effects modules of jquery which are the essentials for creating a dynamic page.

These methods and functions are not included by the slim jquery cdn that’s why the error occurs, now we have known the reason behind the error “$.ajax is not a function” let’s see how can we solve it.

Check out the example below.

Example

<!DOCTYPE html>
<html>
<head>
  <title></title>


</head>
<body>

<button id="req">send a request</button>
    <script src="myy.js"></script>

</body>
</html>

$(document).ready(function () {
  $('#req').click(function () {
    $.ajax({
      url: 'https://randomuser.me/api/',
      dataType: 'json',
      success: function (data) {
        console.log(data);
      },
    });
  });
});

Code Explanation

We created 2 separate files you can create a single file it’s up to you, In the above example, we created a basic function that will send a request when the button will be clicked and then a get request will be received by API that will print the output in the console.

Let’s see whether the above code will work or not.

Uncaught TypeError: $.ajax is not a function

at HTMLButtonElement . <anonymous> (myy.js:3.7)

at HTMLButtonElement . dispatch (jquery-3.6.0.slim.js:5430:27)

at elemData.handle (jquery-3.6.0.slim.js:5434:28)

As you can see it is showing an error in the console “$.ajax is not a function” Do you know why?

How to solve $.ajax is not a function

Because we added the slim jquery CDN instead of the regular cdn so let’s add the right one: Go here and select the minified CDN like below.

After clicking on a minified copy of the minified CDN.

Then add the minified CDN to your file.

Now your code will be like this.

<!DOCTYPE html>
<html>
<head>
  <title></title>


 <!--  jQuery -->

      <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    
</head>
<body>

<button id="req">send a request</button>

    <script src="myy.js"></script>

</body>
</html>

$(document).ready(function () {
  $('#req').click(function () {
    $.ajax({
      url: 'https://randomuser.me/api/',
      dataType: 'json',
      success: function (data) {
        console.log(data);
      },
    });
  });
});

Let’s see if is it working fine or not.

As you can see from the above console, it’s working fine now, it is not showing the “$.ajax is not a function” error.

Conclusion

In this tutorial, we saw how to solve the “$.ajax is not a function” error.

first, we discussed what is ajax jquery and its uses then we talked about the reason behind the occurrence of this error.

We also share a site from which you can copy the regular jquery CDN and in the end, we shared a demo example as well for better understanding.

That’s all for today hope you like the tutorial if you have any queries regarding this tutorial so feel free to contact us below. Thanks for reading.

Leave a Comment