[Django]-How to set up Django website with jQuery

by

66👍

✅

In the end, it turned out to be very easy. This is all one has to do:

First, make a folder named static inside your folder app:

mySite
---mytemplates
---mySite
---myApp
------static

Then download jQuery from their site here. You click ‘Download’ and it will take you to a different page with all the code. Left click on the code and select ‘save as…’. Save it in the static folder.

Inside your settings.py file make sure that django.contrib.staticfiles is under INSTALLED_APPS (it is there by default).

Lastly, inside your base page have 

<script type="text/javascript" src="{{ STATIC_URL }} /static/jquery-1.8.0.js">
</script> 
//Make sure that the jQuery name is correct. With updates and different versions, 
//the number after 'jquery' will change

And now you can use jQuery throughout your site! (as long as the pages extend your basepage. If they don’t, they will need the above piece of code in their html.)

This works for me while working on my local machine. I haven’t tried actually deploying my site yet, so I hope this will still work.

👤SaiyanGirl

15👍

You can also just pip install django-jquery, and put jquery in INSTALLED_APPS. Of course, you need to run collectstatic as always after. 🙂

That way you can just have it in your requirements.txt file if you use one.

👤odinho – Velmont

5👍

You may also use the python package django-static-jquery. For the moment, it comes with the more recent jquery libraries.

pip install django-static-jquery=='version'. Package & installation info here https://pypi.python.org/pypi/django-static-jquery/

Looks like the other package django-jquery not been updated in a while.

👤Snowrabbit

1👍

I put my jQuery file in the same place as SaiyanGirl.

In my setting.py I had this by default:

INSTALLED_APPS: = [
    ...
   'django.contrib.staticfiles',
]

At the top of my HTML page I have this:

{% load static %}
<!DOCTYPE html>

I have this in my head tag:

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

This is how I tested it (in the head tag too):

<script type="text/javascript"> 
    window.onload = function() {
       if (window.jQuery) {
          alert('jQuery is loaded');
       } else {
          alert('jQuery is not loaded');
       }
    }
</script>
👤Marc Guvenc

Leave a comment