I can't figure out why I'm unable to invoke a javascript function when clicking my Bootstrap button in a Django project.
In my directory, I have set up the static folder as "main/static/main/js/script.js". While I can successfully load the static CSS file for Bootstrap without any problems, the javascript function "testing()" isn't getting called for some reason. The web browser console shows an error message saying "Uncaught ReferenceError: testing is not defined onclick." Is AJAX necessary in this scenario, or could there be an issue with my settings or URL path?
EDIT: I also noticed that my static CSS isn't working properly either. When I applied simple CSS styling changes, they weren't reflected unless I used inline styling instead.
This is a snippet from my settings.py file:
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'main.apps.MainConfig',
]
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.2/howto/static-files/
STATICFILES_DIRS = [BASE_DIR /'main/static']
STATIC_URL = '/static/'
Here is the contents of my scripts.js file:
function testing() {
alert("Button clicked!");
}
Below is a section from my index.html file which utilizes Bootstrap:
{%load static%}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>MoviePicks</title>
<!-- Core theme CSS (includes Bootstrap)-->
<link rel="icon" type="image/x-icon" href="{%static 'main/assets/favicon.ico'%}" />
<link href="{%static 'main/css/styles.css'%}" rel="stylesheet" />
</head>
<body id="page-top">
<!-- Header-->
<header class="bg-dark bg-gradient text-white">
<div class="container px-4 d-flex flex-column align-items-center text-center">
<!--code to play lottie animation file-->
<lottie-player
src="https://lottie.host/de506df5-436d-4157-9721-8cc927339ca6/BtifhCSc5e.json"
background="transparent"
speed="1"
style="width: 200px; height: 200px"
loop
autoplay
></lottie-player>
<!--____________________________________-->
<button
id="mainbtn"
onclick="testing()"
type="button"
class="btn btn-danger"
style="
--bs-btn-padding-y: 0.3rem;
--bs-btn-padding-x: 1.5rem;
--bs-btn-font-size: 1.75rem;
"
>
Go!
</button>
</div>
</header>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<script src="{%static 'main/js/scripts.js'%}"></script>
</body>
</html>
Please disregard any missing closing tags as I've condensed the HTML code for brevity.