Django Admin JS 404 and Uncaught TypeError

July 11, 2016 1k views
Django Nginx Ubuntu

I am almost done building my website but while creating an autogenerating slug in Django admin, I found it to be unresponsive. When i looked at the console of my browser i saw a lot of JS error warnings. The nginx is correctly sending the css files, but there seem to be issues with respect to admin js files.

settings.py

import os
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/1.6/howto/deployment/checklist/



# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True


ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'Blog',
]

MIDDLEWARE_CLASSES = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.auth.middleware.SessionAuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'Blog.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR,'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'debug': DEBUG,
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',


            ],
        },
    },
]

ROOT_URLCONF = 'django_project.urls'

WSGI_APPLICATION = 'django_project.wsgi.application'


# Database
# https://docs.djangoproject.com/en/1.6/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql_psycopg2',
        'NAME': 'django',
        'USER': 'django',
        'PASSWORD': 'eJf9IHxaMe',
        'HOST': 'localhost',
        'PORT': '',
    }
}

# Internationalization
# https://docs.djangoproject.com/en/1.6/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.6/howto/static-files/


STATIC_URL = '/static/'
#STATIC_ROOT = os.path.join(BASE_DIR,"static")

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
    #'/var/www/static/',
]

STATIC_ROOT =  '/home/django/django_project/django_project/static'

MEDIA_URL = '/media/'

MEDIA_ROOT = '/home/django/django_project/django_project/media'

nginx

upstream app_server {
    server 127.0.0.1:9000 fail_timeout=0;
}

server {
    listen 80 default_server;
    listen [::]:80 default_server ipv6only=on;

    root /usr/share/nginx/html;
    index index.html index.htm;

    client_max_body_size 4G;
    server_name _;

    keepalive_timeout 5;

    # Your Django project's media files - amend as required
    location /media  {
        alias /home/django/django_project/django_project/media;
    }

    # your Django project's static files - amend as required
    location /static {
        alias /home/django/django_project/django_project/static; 
    }

    # Proxy the static assests for the Django Admin panel
    location /static/admin {
       alias /usr/lib/python2.7/dist-packages/django/contrib/admin/static/admin/;
    }

    location / {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_redirect off;
        proxy_pass http://app_server;
    }
}

Console Error

Failed to load resource: the server responded with a status of 404 (Not Found)
http://my_ip_address/static/admin/js/vendor/xregexp/xregexp.min.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://my_ip_address/static/admin/js/vendor/jquery/jquery.js Failed to load resource: the server responded with a status of 404 (Not Found)
jquery.init.js:7 Uncaught ReferenceError: jQuery is not defined(anonymous function) @ jquery.init.js:7
actions.js:2 Uncaught TypeError: Cannot read property 'fn' of undefined(anonymous function) @ actions.js:2(anonymous function) @ actions.js:139
prepopulate.js:2 Uncaught TypeError: Cannot read property 'fn' of undefined(anonymous function) @ prepopulate.js:2(anonymous function) @ prepopulate.js:34
http://my_ip_address/static/admin/js/vendor/xregexp/xregexp.min.js Failed to load resource: the server responded with a status of 404 (Not Found)
myipaddress Uncaught TypeError: $ is not a function(anonymous function) @ myipaddress/:220(anonymous function) @ myipaddress/:234
myipaddress/:259 Uncaught TypeError: $ is not a function

3 Answers

Remove this nginx location config

# Proxy the static assests for the Django Admin panel
    location /static/admin {
       alias /usr/lib/python2.7/dist-packages/django/contrib/admin/static/admin/;
    }

You're overriding the /static/admin folder using an alias to installed django static folder, wich is wrong, since all files are collected.

  • Thank you for responding. No luck still. Again, it's only the .js files in the vendor folder. All other static files are reponsive. Could it be permission issues? Is there a way to I can modify the admin template and provide jquery cdn?

    • I figured it out. The vendor folder was missing in /usr/lib/python2.7/dist-packages/django/contrib/admin/static/admin//js/. Thanks for the nudge.

Good. But keep in mind this configuration is wrong and can lead to unexpected results. You only need a mapping to the static path, you don't need an extra one for the admin. That's what the collectstatic thing does, copies all /static from all installed apps to a single point.

  • Thank you so much. I have made the recommended changes to nginx config. This is my first time building a website and I appreciate all the help.

You can always use jquery from the CDNs. Use Google's. but regarding your error, did you run manage.py collectstatic to make django collect all static files from all apps to the static target folder? After that, sometimes you need to chmod them.

  • Thank you for the response. I did run python manage.py collectstatic and it serves all the static files except for the ones located in static/admin/js/vendor/jquery/jquery.min.js. I changed file permission of owner to rwx to no avail.

Have another answer? Share your knowledge.