TypeError: $(document).ready is not a function in jQuery

# Introduction

The article covers common "jQuery is not a function" errors.

Make sure to click on the correct subheading in the table of contents based on your error message.

# Table of Contents

# TypeError: $(document).ready is not a function in jQuery

The "TypeError: $(document).ready is not a function" error occurs for multiple reasons:

Placing a second set of parenthesis after the call to the ready() method.
Loading the jQuery library after running your JavaScript code.
Forgetting to load the jQuery library.
Loading the jQuery library more than once on the same page.
Overriding the $ or jQuery variables in your code.

typeerror document ready is not a function

Here is an example of how the error occurs.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

  </head>

  <body>
    <div>Hi There</div>

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

    <!-- ✅ Your JS script here ✅ -->
    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

Here is the related JavaScript code.

index.js

Copied!
$(document).ready(function () {
  console.log('hello world');
})(); // 👈️ has extra set of ()
// ⛔️ TypeError: $(...).ready(...) is not a function

The error occurred because we placed a second set of parentheses after the $(document).ready() method, so we effectively invoked the return value of the ready() method.

To resolve this issue, remove the second set of parentheses.

index.js

Copied!
$(document).ready(function () {
  console.log('hello world');
}); // ✅ Works

The code for this article is available on GitHub

To solve the "$(document).ready is not a function" error, make sure to load the jQuery library before running your JavaScript code and load jQuery only once on the page.

The order in which we loaded the scripts is important. The scripts in your index.html file should be loaded in the following order:

Load the jQuery library.
Load your JavaScript code.

If you try to load the jQuery library after running your index.js file, the jQuery global will not be accessible in your JS file and you will get the error back.

The same would happen if you load the jQuery library twice on the same page. Loading the library twice reruns the initialization process and often glitches the global jQuery variable causing the error.

Another cause for the error is forgetting to load the jQuery library on the page. If you don't load the library, you can't access the jQuery global variable in your code.

Lastly, the error also occurs if you declare the $ or jQuery variables in your code and shadow the values from the library.

This could also happen if you're bringing in another third-party package that defines the $ or jQuery variable and clashes with the original jQuery library.

# Conclusion

To solve the "$(document).ready is not a function" error, make sure to load the jQuery library before running your JavaScript code and load jQuery only once on the page.

# TypeError: $(...).autocomplete is not a function in jQuery

The "$(...).autocomplete is not a function" jQuery error occurs for multiple reasons:

Forgetting to include the jQuery UI library.
Loading the jQuery UI library before the jQuery library.
Loading the jQuery library twice.
Specifying an incorrect path to the jQuery files.

To solve the "$(...).autocomplete is not a function" jQuery error, make sure to load the jQuery library before loading the jQuery UI library.

The libraries have to be loaded only once on the page, otherwise, the error is thrown.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- ✅ Load CSS file for jQuery UI  -->
    <link
      href="https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css"
      rel="stylesheet"
    />
  </head>

  <body>
    <div class="ui-widget">
      <label for="tags">Tags: </label>
      <input id="tags" />
    </div>

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

    <!-- ✅ load jQuery UI ✅ -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"
      integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

The order in which the scripts are loaded is very important. We loaded the scripts in the following order:

jQuery UI CSS stylesheet
jQuery library
jQuery UI library
our own index.js file

Here's the code for the index.js file.

index.js

Copied!
$(document).ready(function () {
  $(function () {
    const availableTags = [
      'ActionScript',
      'AppleScript',
      'Asp',
      'BASIC',
      'C',
      'C++',
      'Clojure',
      'COBOL',
      'ColdFusion',
      'Erlang',
      'Fortran',
      'Groovy',
      'Haskell',
      'Java',
      'JavaScript',
      'Lisp',
      'Perl',
      'PHP',
      'Python',
      'Ruby',
      'Scala',
      'Scheme',
    ];
    $('#tags').autocomplete({
      source: availableTags,
    });
  });
});

The code for this article is available on GitHub

If you open the page you will see an input field with working autocomplete.

The error most commonly occurs if you forget to load the jQuery UI library or load the jQuery library twice.

Loading the jQuery library twice reruns the initialization and causes the error.

If you're loading the libraries from files on your local file system, make sure that you're specifying the correct path.

Specifying an incorrect path when loading a script is the same as not loading the script at all and leads to the error.

You can check if you're loading the scripts correctly by opening your Developer tools by pressing F12 and clicking on the Console tab.

If you see any 404 errors related to loading the jQuery scripts, then the path to the file is incorrect.

# Conclusion

To solve the "$(...).autocomplete is not a function" jQuery error, make sure to load the jQuery library before loading the jQuery UI library.

The libraries have to be loaded only once on the page, otherwise, the error is thrown.

# TypeError: $(...).validate is not a function in jQuery

The "$(...).validate is not a function" jQuery error occurs when the jQuery validation plugin is not loaded or the jQuery-related scripts are loaded in an incorrect order.

The validation plugin should be loaded after the jQuery library.

Here's the HTML for a working example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <!-- 👇️ Example form from docs  -->
    <form id="commentForm" method="get" action="">
      <fieldset>
        <p>
          <label for="cname">Name (required, at least 2 characters)</label>
          <input id="cname" name="name" minlength="2" type="text" required />
        </p>
        <p>
          <label for="cemail">E-Mail (required)</label>
          <input id="cemail" type="email" name="email" required />
        </p>
        <p>
          <label for="ccomment">Your comment (required)</label>
          <textarea id="ccomment" name="comment" required></textarea>
        </p>
        <p>
          <input class="submit" type="submit" value="Submit" />
        </p>
      </fieldset>
    </form>

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

    <!-- ✅ SECOND - load jquery validate ✅ -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"
      integrity="sha512-37T7leoNS06R80c8Ulq7cdCDU5MNQBwlYoy1TX/WUsLFC2eYNqtKlV0QjH7r8JpG/S0GUMZwebnVFLPd6SU5yg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>

    <!-- ✅ THIRD - load additional methods ✅ -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/additional-methods.min.js"
      integrity="sha512-XZEy8UQ9rngkxQVugAdOuBRDmJ5N4vCuNXCh8KlniZgDKTvf7zl75QBtaVG1lEhMFe2a2DuA22nZYY+qsI2/xA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>

    <!-- ✅ FOURTH - load your JS script ✅ -->
    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

Notice that we loaded the jQuery validation plugin after we loaded the jQuery library and before we loaded additional methods.

The index.js file is loaded after all the other scripts.

Here's the code in the index.js file:

index.js

Copied!
$('#commentForm').validate();

The code for this article is available on GitHub

If you refresh the page and try to submit the form you will see the validation kicking in.

The order in which the JS scripts are added is very important, make sure to load the jQuery validation plugin after you have loaded the jQuery library.

Another common reason the error occurs is when the path to the jQuery scripts is incorrect.

If you decide to download the jQuery code to your local file system and include it directly instead of using a CDN, make sure to specify the correct path to the file.

Also, make sure you aren't including the jQuery library or plugins twice on the same page. Loading the same library twice might cause the error.

# Conclusion

The "$(...).validate is not a function" jQuery error occurs when the jQuery validation plugin is not loaded or the jQuery-related scripts are loaded in an incorrect order.

The validation plugin should be loaded after the jQuery library.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

TypeError: $(document).ready is not a function in jQuery

# Introduction

# Table of Contents

# TypeError: $(document).ready is not a function in jQuery

# Conclusion

# TypeError: $(...).autocomplete is not a function in jQuery

# Conclusion

# TypeError: $(...).validate is not a function in jQuery

# Conclusion

Borislav Hadzhiev