CODEWITHSUNDEEP
jquerydjango
SaiyanGirl
SaiyanGirl

Reputation: 17024

How to set up Django website with jQuery

I don't know why, but I couldn't figure out how to activate jQuery on my website. All sites doing tutorials 'Starting jQuery on Django' started with JQuery already working on their site. Anyway, instead of downloading it and putting it in my folder somewhere, I decided to go the cheat-way and use Google's. Therefore, in my base page, I had the following piece of code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">
</script>

And everything worked great, until I had to add some libraries. How do I set up my own jQuery so that it works with my templates?

Upvotes: 37

Views: 69155

Answers (4)

Marc Guvenc
Marc Guvenc

Reputation: 81

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>

Upvotes: 1

Snowrabbit
Snowrabbit

Reputation: 152

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.

Upvotes: 5

odinho - Velmont
odinho - Velmont

Reputation: 21506

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.

Upvotes: 15

SaiyanGirl
SaiyanGirl

Reputation: 17024

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.

Upvotes: 66

Related Questions