How to fix '$.ajax' not defined?

Question

I already to make simple CRUD Laravel and then i tried to make simple ORM with search feature in multiple tables. The issue appears when i use jQuery in my Data Result, i got the error :

$.ajax not defined

here my results.js :

$(document).ready(function () {
    ...
    $.ajax({
    ...
    });
});

here my layout.blade.php :

<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>NCI ORM App Example</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
   </head>
   <body>
      <style>
      ...
      </style>
      <div class="container">
         @yield('content')
      </div>
      <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha384-xxxxxxxxxxxxxxxx" crossorigin="anonymous" type="text/javascript"></script>
      <script src="https://code.jquery.com/jquery-3.6.3.slim.min.js" integrity="sha384-xxxxxxxxxxxxxxxx" crossorigin="anonymous" type="text/javascript"></script>
      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" type="text/js"></sc>
      <script type="text/javascript" src="{{ asset('results.js') }}"></script>
   </body>
</html>

i tried to ask in chatGPT and recommended to make generate a new integrity and add typ="text/javascript" in <script> and change $.ajax to jQuery.ajax, still not work.

Thanks in advance.

move the jquery library in the header so it loads before the ajax call — Mohammad Edris Raufi, Feb 10 '23 at 17:44
@MohammadEdrisRaufi — Do not confuse `
` (or the HTTP header) with the ``. They are very different things. — Quentin, Feb 10 '23 at 18:12
@MohammadEdrisRaufi — The Ajax call is made by `` which appears **after** the code which loads jQuery. Moving the jQuery import even higher up the page won't help anything. — Quentin, Feb 10 '23 at 18:13

score 3 · Accepted Answer · answered Feb 10 '23 at 18:12

3

Load jQuery once and only once. Do not load jQuery and then overwrite it with a different version of jQuery.

Load the full version of jQuery. Do not load jQuery slim which doesn't include the ajax method.

In short, remove <script src="https://code.jquery.com/jquery-3.6.3.slim.min.js" integrity="sha384-xxxxxxxxxxxxxxxx" crossorigin="anonymous" type="text/javascript"></script>

answered Feb 10 '23 at 18:12

Quentin

914,110
126
1,211
1,335

Well Done, that's my bad. Thanks. – Sad3ng Feb 10 '23 at 18:24

Darko Pantovic · Answer 2 · 2023-02-10T17:57:22.887

This is functional code:

<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>NCI ORM App Example</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container">
        
      </div>
      <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" type="text/js"></sc>
       <script>
         $(document).ready(function () {
            $.ajax({});
         });
         </script>
   </body>
</html>

Just use my jQuery import script. Source: https://releases.jquery.com/

And, check your path to the js file. Maybe you need something like: {{ asset('something/result.js') }}

Previously, my path asset already fixed. – Sad3ng Feb 10 '23 at 18:20 — Sad3ng, Feb 10 '23 at 18:20

How to fix '$.ajax' not defined?

2 Answers2