Integrating JQuery-UI

Using Django Templates & Frontend
1

I am trying to integrate JQuery-UI into my Django app, specifically to implement the draggable() functionality. However, I’m getting this error in the console.

Uncaught TypeError: $(…).draggable is not a function

Here is the section of code where the library is included.

    <!-- JQuery Stuff-->
    <script type="text/javascript" src="{% static 'js/jquery-3.7.1.min.js' %}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
    <!-- JQuery UI library -->
    <script type="javascript" src="{% static 'js/jquery-ui.js' %}"></script>

This is in my main.html file which is included via the extends clause in the template.

I know that JQuery is functioning because I am using it in the code for selecting elements, detecting screen positions, etc. These JQuery functions all work fine.

Here is the block of code that implements the draggable function:

            $(function(){
                $("#drag").draggable({containment: [0, 60, 1300, 600], cursor: 'pointer', opacity: 0.60,});
            });

I have a small working prototype outside of Django where this is working. I just can’t get it to recognize the jquery-us.js library in the Django app.

Any ideas on what might be wrong?

2

If you view the Network tab in your browser’s web developer tools, is jquery-ui.js actually loading successfully?

Alternatively, is the request for it in the logs of manage.py runserver showing a 200 response?

3

Okay, according to the Network tab, it is NOT being loaded.

Draggable_01
Draggable_01696×621 25.7 KB

However, here is the code in the section of Main.html which is extended into the template.

    <!-- JQuery Stuff-->
    <script type="text/javascript" src="{% static 'js/jquery-3.7.1.min.js' %}"></script>
    <!-- JQuery UI library -->
    <script type="javascript" src="{% static 'js/jquery-ui.js' %}"></script>

I have triple-checked the static/js folder and this JavaScript file is there. I have also confirmed the STATIC_URL value in settings.py.

STATIC_URL = 'static/'
MEDIA_URL = '/images/'

STATICFILES_DIRS = [
    BASE_DIR / 'static',
]

Any ideas on what might be keeping this from being loaded?

4

Please show your complete main template and the output from your server log showing the request for this page and the requests for the associated css / js files. (We may also need to see the template extending your main template, but won’t know for sure until we see that base template.)

5

Okay, I have an update on this.

Changing the script declaration in main.html to

<script type="text/javascript" src="{% static 'js/jquery-ui.js' %}"></script>

Solved the issue. jquery-ui.js module is now appearing as loaded, and the draggable elements are working.

I was missing the “text/” part.

Thanks for all of the replies!