Solve - $(...).dialog is not a function jQuery Error

avatar

Borislav Hadzhiev

Tue Oct 19 20212 min read

banner

Photo by Max

Solve - $(...).dialog is not a function #

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

  1. Forgetting to include the jQuery UI library.
  2. Loading the jQuery UI library before the jQuery library.
  3. Loading the jQuery library twice.
  4. Loading a custom version of the jQuery UI library, that doesn't include a dialog.
  5. Specifying an incorrect path to the jQuery files.

jquery dialog is not a function error

To solve the "$(...).dialog 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
<!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 id="dialog" title="Basic dialog"> <p> This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the &apos;x&apos; icon. </p> </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 order we loaded the libraries in is very important. The order is the following:

  1. Load CSS file for jQuery UI
  2. Load the jQuery library
  3. Load the jQuery UI library
  4. Run your JavaScript file (index.js in the example)

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

index.js
$(document).ready(function () { $('#dialog').dialog({ autoOpen: true, }); });

In the index.js file, we wait for the DOM to be ready and display the dialog.

If you open your browser, you'll see the dialog window.

jquery dialog

If you're still getting the error, make sure that you're loading the jQuery UI library after loading jQuery and you're not loading jQuery twice.

Loading the jQuery library twice, re-runs the initialization process and causes the error.

You can also try running jQuery in noConflict mode in your JS file.

index.js
// ๐Ÿ‘‡๏ธ load in noConflict mode const $jq = $.noConflict(); $jq(document).ready(function () { $jq('#dialog').dialog({ autoOpen: true, }); });
Make sure you're not using a custom version of jQuery UI, some custom versions don't include a dialog.

If you are loading the libraries from files on your local file system, make sure to specify the paths to the files correctly. Specifying an incorrect path to a script is equivalent to not loading the script at all.

You can check if you're loading the scripts correctly when you open the console in your browser. If you see any 404 errors related to loading the jQuery scripts, then the path to the file is incorrect.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee