Latest Posts

Uncaught Type Error: $(…).draggable is not a function – jQuery UI is not loaded.

Posted on by Zubair Shaik

Loading

Certainly! The error message you are seeing, Uncaught TypeError: $(...).draggable is not a function – jQuery UI is not loaded, suggests that there is an issue with loading or using the jQuery UI library correctly in your project. Let’s break this down step by step, providing detailed explanations to help you understand the root causes and how to fix it. I’ll cover everything thoroughly, from the basics of jQuery and jQuery UI to troubleshooting the issue and preventing it from occurring in the future.

1. Understanding jQuery and jQuery UI

Before delving into the specifics of your issue, it’s important to understand what jQuery and jQuery UI are, and how they interact in web development.

What is jQuery?

jQuery is a fast, small, and feature-rich JavaScript library that makes things like HTML document traversal, event handling, animating, and Ajax easier with an easy-to-use API that works across a multitude of browsers. jQuery simplifies tasks that are otherwise complicated in JavaScript, like manipulating the DOM (Document Object Model), handling events, and performing animations.

What is jQuery UI?

jQuery UI is a separate library built on top of jQuery that adds advanced user interface (UI) interactions, effects, and widgets. Some common features provided by jQuery UI include:

  • Draggable: Allows an element to be moved around on the page.
  • Droppable: Allows an element to accept a draggable item.
  • Resizable: Lets elements be resized by dragging their edges or corners.
  • Sortable: Allows items to be sorted in a list by dragging.
  • Accordion, Tabs, DatePicker, etc.

jQuery UI extends jQuery’s capabilities to provide interactive and complex UI elements that aren’t available in jQuery by default.

The Issue: “Uncaught TypeError: $(…).draggable is not a function – jQuery UI is not loaded”

This error message indicates that you are trying to use the draggable() function from jQuery UI, but the jQuery UI library is not being loaded or initialized correctly on your page. The draggable() function is part of jQuery UI, not jQuery itself, so if jQuery UI is not loaded, it will throw this error.

2. What Causes This Error?

The error occurs because jQuery UI’s draggable() function is being called on a jQuery object, but jQuery UI is either:

  1. Not Included: The jQuery UI library might not be included or loaded in the page.
  2. Incorrect Version: You might be using a version of jQuery that is not compatible with the version of jQuery UI you’re using.
  3. Incorrect Loading Order: jQuery UI must be loaded after jQuery itself. If jQuery UI is loaded before jQuery or after your script is executed, it won’t be available when you try to call draggable().
  4. Conflict with Other Libraries: Sometimes, other JavaScript libraries or scripts may conflict with jQuery or jQuery UI, causing functions not to load properly.

3. Steps to Fix the Issue

Now, let’s go through the steps to fix this issue in detail.

Step 1: Include jQuery and jQuery UI Properly

First and foremost, make sure that you are including both jQuery and jQuery UI libraries in your project. This is the most common cause of the error.

Using CDN Links:

You can include jQuery and jQuery UI from a content delivery network (CDN). Here is how to do it:

htmlCopy<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Include jQuery UI -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

In this example, the jQuery library is loaded from the official jQuery CDN, and the jQuery UI library is loaded from the official jQuery UI CDN.

Using Local Files:

Alternatively, you can download the jQuery and jQuery UI libraries to your local server and reference them locally. Download the latest versions from:

Then, include them in your HTML file like this:

htmlCopy<!-- Include jQuery -->
<script src="path/to/jquery-3.6.0.min.js"></script>

<!-- Include jQuery UI -->
<link rel="stylesheet" href="path/to/jquery-ui.min.css">
<script src="path/to/jquery-ui.min.js"></script>

Step 2: Ensure jQuery is Loaded Before jQuery UI

When using jQuery UI, make sure that jQuery is loaded before jQuery UI. This is crucial because jQuery UI depends on jQuery. If jQuery is not loaded first, the jQuery UI functions won’t be available.

Your script tags should look like this:

htmlCopy<!-- Load jQuery first -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Then load jQuery UI -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

Make sure there’s no jQuery UI script tag before the jQuery script tag. If jQuery UI is loaded first, it will throw the error since jQuery will not be available.

Step 3: Check for jQuery Version Compatibility

Ensure that the version of jQuery you are using is compatible with the version of jQuery UI. For example, jQuery UI 1.12.1 is compatible with jQuery 3.x. Using an incompatible version may cause issues with jQuery UI features such as draggable().

To verify compatibility:

  1. Check the jQuery UI documentation to see which versions of jQuery are supported by the version of jQuery UI you are using.
  2. Make sure your jQuery version is supported by the jQuery UI version you’ve included.
Example: jQuery UI 1.12.1 supports jQuery 1.7+.

Step 4: Ensure Correct jQuery UI Initialization

If jQuery UI is included and loaded correctly, but you’re still getting the error, it might be an issue with when and how you’re initializing the draggable() function.

Here’s a basic example of how you should initialize the draggable() function:

htmlCopy<script>
$(document).ready(function() {
  // Make the element draggable
  $("#myElement").draggable();
});
</script>

Make sure:

  1. The jQuery and jQuery UI scripts are loaded before this script runs.
  2. The script is wrapped in $(document).ready() or equivalent to ensure that the DOM is fully loaded before trying to manipulate elements.

Step 5: Debugging Tips

If you’re still encountering issues, here are a few tips for debugging:

  1. Check for Errors in the Console: Open your browser’s developer tools (usually F12) and check the Console tab for errors related to jQuery or jQuery UI.
  2. Check Network Tab: In the developer tools, go to the Network tab and check whether jQuery and jQuery UI are being loaded successfully. If the files aren’t being loaded, there may be a problem with the URL or file paths.
  3. Use jQuery’s .noConflict(): Sometimes, other libraries (like Prototype.js) can conflict with jQuery. If you suspect a conflict, use jQuery’s .noConflict() method to avoid overriding other libraries.
javascriptCopyvar $j = jQuery.noConflict();
$j("#myElement").draggable();

This will allow you to use jQuery without conflicts by using $j as the alias for jQuery instead of $.

Step 6: Use a Modern JavaScript Framework or Library (Optional)

If you’re starting a new project or considering upgrading an existing one, consider using modern JavaScript frameworks like React, Vue.js, or Angular for building interactive UIs. These frameworks have built-in support for handling UI components, and you won’t need to rely on jQuery UI for common interactions like drag-and-drop.

4. Alternative Solutions

If you still want to use draggable elements and don’t want to rely on jQuery UI, there are modern alternatives like SortableJS or Interact.js, which are lightweight and offer better performance and flexibility. For example, using SortableJS:

htmlCopy<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>

<script>
  new Sortable(document.getElementById('myElement'), {
    draggable: '.draggable'
  });
</script>

This can provide a similar draggable functionality without the need for jQuery UI.

In summary, the error Uncaught TypeError: $(...).draggable is not a function – jQuery UI is not loaded happens when you attempt to use jQuery UI’s draggable() function, but the jQuery UI library is either not loaded or not loaded correctly. By ensuring that you:

  1. Properly include both jQuery and jQuery UI,
  2. Load jQuery before jQuery UI,
  3. Ensure compatibility between jQuery and jQuery UI versions,
  4. Initialize jQuery UI features correctly,

you can resolve the issue and implement draggable elements in your application. If you are transitioning to modern JavaScript frameworks, there are also alternative libraries that can handle drag-and-drop functionality more efficiently.

Let me know if you need further clarification or help with any of these steps!

Leave a Reply

Your email address will not be published. Required fields are marked *