Question 11243 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to fix '$.ajax' not defined? – Jquery

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/[email protected]/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.

Tags:

2

Answers


  1. 0

    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/[email protected]/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’) }}

    Login or Signup to reply.
  2. 0

    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>

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search