How to set up FilePond js image preview - javascript

I am trying to use FilePond to allow users to upload drag and drop images. I've set up the FilePond drag and drop and I'm trying to implement the image preview feature. I've attached the css and js and included it in my html. The image preview still isn't working.
{% extends 'main/dashboardbase.html'%}
{% block content %}
{% load static %}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-tofit=no">
<link rel="stylesheet "type="text/css" href="{% static 'main/add.css'%}">
<link rel="stylesheet "type="text/css" href="{% static 'main/filepond.css'%}">
<link rel="stylesheet" type="text/css" href="{% static 'main/filepond-plugin-image-preview.css'%}">
</head>
<body>
<button type="submit" id="add">Save</button>
<a href="{% url 'main:products'%}">
<button id="cancel" >Cancel</button>
</a>
<div class="col-sm-12 col-lg-6" id="inner">
<form method="POST" enctype="multipart/form-data" id="inputform" name="form1">
{% csrf_token %}
<h4>Title</h4>
<input type="text" name="product_title" id="product_title" placeholder="Give your product a name">
<h4>Price</h4>
<input type="text" name="product_price" id="product_price" placeholder="0.00">
<h4>Description</h4>
<input type="text" name="product_description" id="product_description" placeholder="Write a description about your product">
<input type="file" name="product_images">
</form>
</div>
<script type="text/javascript" src="{% static 'main/add.js'%}"></script>
<script src="{% static 'main/filepond-plugin-image-preview.js'%}"></script>
<script src="{% static 'main/filepond.js'%}"></script>
<script>
const inputElement = document.querySelector('input[type="file"]');
const pond = FilePond.create(inputElement);
FilePond.setOptions({
server: '#'
});
</script>
</body>
</html>
{% endblock%}

Make certain that 'filepond-plugin-image-preview.min.css' is loaded. That was my issue.

Related

Popup rendering with close button but it does not work when clicked?

I have a custom popup that shows upon form submission to let the user know it was successful. Currently it displays when it's supposed to (although I can't get it to display in the middle right on top, but that's a minor issue) like shown below:
But the little X button does not actually close the message. You can click it but it does nothing, and if you reload the page then it's gone until you submit again.
base.html
{% load static purchasing_tags humanize %}
{% include 'operations/message.html' %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="{% static 'images/favicon.ico' %}" type="image/x-icon" rel="shortcut icon"/>
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="{% static "css/plugins/bootstrap.min.css" %}" rel="stylesheet">
<link href="{% static "css/apps.css" %}" rel="stylesheet">
<script src="{% static "js/plugins/jquery.js" %}"></script>
<script src="{% static "js/plugins/bootstrap.min.js" %}"></script>
<!--[if lt IE 9]>
<script src="{% static 'js/plugins/respond.js' %}"></script>
<![endif]-->
</head>
<body>
<div id="login" class="panel panel-default">
<div class="panel-body">
{% block main %}
{% endblock main %}
</div>
<div class="panel-footer">
{% block panel_footer %}
{% endblock %}
</div>
</div>
{% if messages %}
<script>
{% for message in messages %}
$(document).ready(function () {
$('.toast').toast('show');
});
{% endfor %}
</script>
{% endif %}
</body>
I think the problem could be related to the warning I get that says Unresolved function or method toast() on $('.toast').toast('show'); but I'm not sure how to resolve this issue (I got this from https://www.w3schools.com/bootstrap4/bootstrap_toast.asp but I don't know if I just didn't add something important to make this work)
enter_exit_area.html
{% extends "base.html" %}
{% load core_tags %}
{% block main %}
<form id="warehouseForm" action="" method="POST" class="form-horizontal" novalidate >
{% csrf_token %}
<div>
<div>
<label>Employee</label>
{{ form.employee_number }}
</div>
<div>
<label>Work Area</label>
{{ form.work_area }}
</div>
<div>
<label>Station</label>
{{ form.station_number }}
</div>
</div>
<div>
<div>
<button type="submit" name="enter_area" value="Enter" >Enter Area</button>
</div>
</div>
</form>
{% endblock main %}
message.html
{% for message in messages %}
<div style="position: absolute" class="toast bg-{% if message.tags == 'error' %}danger{% else %}{{message.tags}}{% endif %}" role="alert" aria-live="assertive" aria-atomic="true" data-delay="5000">
<div>
<strong class="mr-auto">
{{message.tags|capfirst}}
</strong>
<button type="button" class="ml-2 mb-1 close" aria-label="Close">
<span aria-hidden="true" data-dismiss="toast">×</span>
</button>
</div>
<div>
{{message|safe}}
</div>
</div>
{% endfor %}
views.py
class EnterExitArea(CreateView):
model = EmployeeWorkAreaLog
template_name = "operations/enter_exit_area.html"
form_class = WarehouseForm
def form_valid(self, form):
emp_num = form.cleaned_data['employee_number']
area = form.cleaned_data['work_area']
station = form.cleaned_data['station_number']
if 'enter_area' in self.request.POST:
form.save()
EmployeeWorkAreaLog.objects.filter(Q(employee_number=emp_num) & Q(work_area=area) & Q(time_out__isnull=True)).update(time_in=datetime.now())
messages.success(self.request, "You have entered")
return HttpResponseRedirect(self.request.path_info)

changing javascript function name or ID of element in HTML template makes it stop working

I am developing an app in Django.
I have this weird issue.
on my template I have:
<div class="form-group">
<input name="Data_inserimento_entry" type="date" class="form-control" id="date_to_turn_into_toda" >
</div>
<script type="text/javascript" src={% static "js/get_today_date.js" %}></script>
<script> get_today_date(date_to_turn_into_toda) </script>
on the js file get_today_date.js stored at static > js > get_today_date.js
I have
function get_today_date(id_data) {
var now = new Date();
var day = ("0" + now.getDate()).slice(-2);
var month = ("0" + (now.getMonth() + 1)).slice(-2);
var today = now.getFullYear()+"-"+(month)+"-"+(day);
document.getElementById(id_data).value = today;
}
when I run the server and load the template, in the input slot, today's date appears. I am glad of that.
If I comment any of the two javascript lines in the template, it does not work anymore. I am glad of that.
Here comes the weird part
If I change the id ,
like this:
<div class="form-group">
<input name="Data_inserimento_entry" type="date" class="form-control" id="date_to_turn_into_today" >
</div>
<script type="text/javascript" src={% static "js/get_today_date.js" %}></script>
<script> get_today_date(date_to_turn_into_today) </script>
It does not work anymore. Why?
And even if I change the function name in both scripts, like:
<script type="text/javascript" src={% static "js/get_today_date.js" %}></script>
<script> get_today_date_ID(date_to_turn_into_today) </script>
and
function get_today_date_ID(id_data) {
var now = new Date();
var day = ("0" + now.getDate()).slice(-2);
var month = ("0" + (now.getMonth() + 1)).slice(-2);
var today = now.getFullYear()+"-"+(month)+"-"+(day);
document.getElementById(id_data).value = today;
}
It does not work anymore. Why?
Is the syntax to call javascript correct?
Am I forgetting to change the ID or the function name in some other place than the template and the javascript file?
Note: the function in the javascript file and the javascript file have the same name (except for the extention .js), is this the problem?
Update:
in my model, I have:
class mymodel(models.Model):
Data_inserimento_entry = models.DateField(blank=False, null=False, default=timezone.now().date() )
Update:
here I post the whole template aggiungi_terminologia.html, responding to a comment asking for more explanation
{% extends 'base.html'%}
{% block content %}
<h1>Aggiungi terminologia in massa</h1>
<!-- scarica template glossario -->
<p>
<form method="get" action="static/files_for_download/template_glossario.xlsx">
<div class="container"></div>
<button type="submit" class="btn btn-success">Scarica template</button>
</div>
</form>
</p>
<div class="container">
<small id="inputHelp" class="form-text text-muted">NOTA: Non rinominare le colonne del template.</small>
</div>
<br>
<!-- carica glossario -->
<p>
<form class="container" method="POST" enctype="multipart/form-data" >
{% csrf_token %}
<div class="file-upload-wrapper" id="input-file-now">
<small id="inputHelp" class="form-text text-muted">Seleziona il template compilato con la terminologia da caricare.</small>
<input type="file" name="uploaded_glossary" id="input-file-now" data-max-file-size="5M" class="file-upload">
<br><br>
<div class="form-group">
<input name="Data_inserimento_entry" type="hidden" class="form-control" id="date_to_turn_into_toda">
</div>
<button type="submit" class="btn btn-primary">Carica glossario</button>
</div>
</form>
</p>
<br><br><br><br>
<!-- Django tag load static -->
{% load static %}
<!-- CSS -->
<link rel="stylesheet" type="text/css" href={% static "css/searchbar_style.css" %}>
<link rel="stylesheet" type="text/css" href={% static "css/upload_glossary_slot.css" %}>
<!-- Javascript -->
<script type="text/javascript" src={% static "js/get_today_date.js" %}></script>
<script> get_today_date("date_to_turn_into_toda") </script>
{% endblock %}
Here I post my entire template base.html:
{% load static %}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- favicon -->
<!-- <link rel="shortcut icon" href="{% static 'img/gestisco_logo_round_favicon2.png' %}" /> -->
<link rel="shortcut icon" href="{% static 'img/metaglossary_favicon_3.png' %}" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>G</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<!-- Pagina iniziale -->
<!-- questa nel tutorial non c è -->
<a class="navbar-brand" href="{% url 'home' %}">GESTI.S.CO Interreg IT-CH</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<!-- glossario -->
<li class="nav-item">
<a class="nav-link" href="{% url 'glossario' %}">Glossario<span class="sr-only">(current)</span></a>
</li>
<!-- Aggiungi terminologia -->
<li class="nav-item">
<a class="nav-link" href="{% url 'aggiungi_terminologia' %}">Aggiungi terminologia</a>
</li>
<!-- Aggiungi glossario -->
<li class="nav-item">
<a class="nav-link" href="{% url 'aggiungi_glossario' %}">Aggiungi terminologia in massa</a>
</li>
</ul>
</div>
</nav>
<br/>
<!-- SEZIONE MESSAGGI -->
{% if messages %}
{% for message in messages %}
{% if insert_attempt_output == "errato" %}
<!-- form compilato in modo NON valido - messaggio rosso -->
<div class="alert alert-danger" role="alert">
<button class="close" data-dismiss="alert">
<small><sup>[X]</sup></small>
</button>
{{message}}
</div>
{% else %}
<!-- form compilato in modo valido - messaggio verde -->
<div class="alert alert-success" role="alert">
<button class="close" data-dismiss="alert">
<small><sup>[X]</sup></small>
</button>
{{message}}
</div>
{% endif %}
{% endfor %}
{% endif %}
<br>
<!-- formattazione del body -->
<div class="container">
{% block content %}
{% endblock %}
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- css -->
<link rel="stylesheet" type="text/css" href={% static "css/top_navbar_style.css" %}>
</body>
</html>
when I run the server and load the template, in the input slot, today's date appears. I am glad of that.
I have no idea how it could work, because it looks like the main problem you have is you pass variable into the function get_today_date instead of string (id), i.e. instead of
<script> get_today_date(date_to_turn_into_today) </script>
call
<script> get_today_date('date_to_turn_into_today') </script>

How to create multiple images for specific product using django ajax jquery

i'm learning django and i'm trying building ecommerce website , I want to build a system that allows users to upload images to specific product in the store so I tried to pass the id of the product in url parameter and try to access that id from my class based view so I can add images to that item,
but i had always a problem showing up and i can't figure out what is the problem, This my code
urls.py
from django.urls import path
from item.views import ProgressBarUploadView
app_name = 'item'
urlpatterns = [
path('progress-bar-upload/<int:pk>/', ProgressBarUploadView.as_view(), name='progress_bar_upload'),
]
views.py
class ProgressBarUploadView(View):
def get(self, request, *args, **kwargs):
print(self.kwargs['pk']) # i want to print pk of product
photos_list = Photo.objects.all()
return render(self.request, 'zwwebsite/item_images_creation.html', {'photos': photos_list})
def post(self, request, *args, **kwargs):
time.sleep(1)
form = PhotoForm(self.request.POST, self.request.FILES)
if form.is_valid():
photo = form.save()
print(self.kwargs['pk']) # i want to print pk of product
data = {'is_valid': True, 'name': photo.file.name, 'url': photo.file.url}
else:
data = {'is_valid': False}
return JsonResponse(data)
models.py
class Photo(models.Model):
item = models.ForeignKey(Item, null=True,on_delete=models.CASCADE)
title = models.CharField(max_length=255, blank=True)
file = models.FileField(upload_to='media/item_image')
uploaded_at = models.DateTimeField(auto_now_add=True)
forms.py
class PhotoForm(forms.ModelForm):
class Meta:
model = Photo
fields = ('file', )
my template
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}Photos Library - Simple is Better Than Complex{% endblock %}</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
.page-header {
margin-top: 0;
}
</style>
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<script src="{% static 'js/jquery-3.1.1.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
</head>
<body>
<div class="container">
<!--form method="post" action="">
{% csrf_token %}
<input type="hidden" name="next" value="{{ request.path }}">
<button type="submit" class="btn btn-danger pull-right">
<span class="glyphicon glyphicon-trash"></span> Clear Database
</button>
</form-->
<h1 class="page-header">
Photos
<small></small>
</h1>
<div class="row">
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Examples</h3>
</div>
<a href="{% url 'item:progress_bar_upload' %}" class="list-group-item{% if request.path == '/progress-bar-upload/' %} active{% endif %}">
Progress Bar Upload
</a>
</div>
</div>
<div class="col-md-9">
<div style="margin-bottom: 20px;">
<button type="button" class="btn btn-primary js-upload-photos">
<i class="fa fa-upload" aria-hidden="true"></i>
Upload photos
</button>
<input id="fileupload" type="file" name="file" multiple
style="display: none;"
data-url="{% url 'item:progress_bar_upload' %}"
data-form-data='{"csrfmiddlewaretoken": "{{ csrf_token }}"}'>
</div>
<table id="gallery" class="table table-bordered">
<thead>
<tr>
<th>Photo</th>
</tr>
</thead>
<tbody>
{% for photo in photos %}
<tr>
<td><img src="{{ photo.file.url }}" alt="{{ photo.file.name }}"></td>
</tr>
{% endfor %}
</tbody>
</table>
<div class="modal fade" id="modal-progress" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Uploading...</h4>
</div>
<div class="modal-body">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 0%;">0%</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="{% static 'js/jquery-3.1.1.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/jquery.ui.widget.js' %}"></script>
<script src="{% static 'js/jquery.iframe-transport.js' %}"></script>
<script src="{% static 'js/jquery.fileupload.js' %}"></script>
<script src="{% static 'js/progress-bar-upload.js' %}"></script>
</body>
</html>
This is the error that appears to me
link to the image
please help me do that stuff and solve that problem

Convert the html template into Django

I am currently learning django, and at the moment I want to convert this page https://colorlib.com/etc/lf/Login_v6/index.html into django. I have tried heaps of times, still can't make everything right. The Button textures, label animations and fonts are completely not working. Let me show you my work structure below.
My problem is about using css and js under static/vendor fold. Seems the way I used got a bit problem, I have also attached my code for invoking the css and js under vendor.
Thanks for any help.
MyFirstDjangoWeb
--project
--setting.py
--urls.py
--wsgi.py
--_init_.py
--project_app
--template
--myHtml.html
--migration
--0001_initial.py
--_init_.py
--__init_.py
--admin.py
--apps.py
--models.py
--test.py
--urls.py
--views.py
--static
--css
--images
--js
--vendor
manage.py
<!DOCTYPE html>
<html lang="en">
<head>
<title>QC-Tool</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% load static %}
<!--===============================================================================================-->
<link rel="icon" type="image/png" href="static/images/favicon.ico"/>
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="static/vendor/bootstrap/css/bootstrap.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="static/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="static/fonts/iconic/css/material-design-iconic-font.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="static/vendor/animate/animate.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="static/vendor/css-hamburgers/hamburgers.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="static/vendor/animsition/css/animsition.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="static/vendor/select2/select2.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="static/vendor/daterangepicker/daterangepicker.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="static/css/util.css">
<link rel="stylesheet" type="text/css" href="static/css/main.css">
<!--===============================================================================================-->
</head>
<body>
<center>
<div class="limiter">
<div class="container-login100">
<div class="wrap-login100 p-t-85 p-b-20">
<form class="login100-form validate-form">
<span class="login100-form-avatar">
<img src="static/images/my_Logo.png" alt="AVATAR">
</span>
<span class="login100-form-title p-b-0">
QC Tool
</span>
<form action="/msggate/" method="post">
<div class="wrap-input100 validate-input m-t-85 m-b-35" data-validate = "Enter username">
<input class="input100" type="text" name="username">
<span class="focus-input100" data-placeholder="Username"></span>
</div>
<div class="wrap-input100 validate-input m-b-50" data-validate="Enter password">
<input class="input100" type="password" name="pass">
<span class="focus-input100" data-placeholder="Password"></span>
</div>
<div class="container-login100-form-btn">
<form action='actionUrl' method='GET'>
<button class="login100-form-btn">
Login
</button>
</form>
</div>
</form>
<ul class="login-more p-t-190">
<li class="m-b-8">
<span class="txt1">
Forgot
</span>
<a href="#" class="txt2">
Username / Password?
</a>
</li>
<li>
<span class="txt1">
More options?
</span>
<a href="#" class="txt2">
Click here
</a>
</li>
</ul>
</form>
</div>
</div>
</div>
</center>
{% load static %}
<div id="dropDownSelect1"></div>
<!--===============================================================================================-->
<script src="static/vendor/jquery/jquery-3.2.1.min.js"></script>
<!--===============================================================================================-->
<script src="static/vendor/animsition/js/animsition.min.js"></script>
<!--===============================================================================================-->
<script src="static/vendor/bootstrap/js/popper.js"></script>
<script src="static/vendor/bootstrap/js/bootstrap.min.js"></script>
<!--===============================================================================================-->
<script src="static/vendor/select2/select2.min.js"></script>
<!--===============================================================================================-->
<script src="static/vendor/daterangepicker/moment.min.js"></script>
<script src="static/vendor/daterangepicker/daterangepicker.js"></script>
<!--===============================================================================================-->
<script src="static/vendor/countdowntime/countdowntime.js"></script>
<!--===============================================================================================-->
<script src="static/js/main.js"></script>
</body>
</html>
Have you defined static STATIC_URL in your setting.py? If not then do this in
setting.py
STATIC_URL = '/static/'
And store your static file in folder name static inside your app directory i.e. project/project_app/static
In your template myHtml.html , use the static template tag to build the URL like this:
<link rel="stylesheet" type="text/css" href="{% static '/vendor/bootstrap/css/bootstrap.min.css' %}">
<script src="{% static '/js/main.js' %}"></script>
Do this in every link and script.

Django - Javascript not working in templates

I am trying to display an input field based on user choice selection. Learning from stackoverflow, I have written the following code:
<form action="/register/" method="post" enctype="multipart/form-data">{% csrf_token %}
<select name="designation" id="designation">
<option value="faculty">Faculty</option>
<option value="student">Student</option>
</select>
<div id="students" style="display:none;">
<input type="file" name="uploadFile">
</div>
</form>
<script type="text/javascript">
$('#designation').on('change',function(){
if( $(this).val()==="student"){
$("#students").show()
}
else{
$("#students").hide()
}
});
</script>
The code does work in https://jsfiddle.net/. However, when I am trying to use it in my django template its not working.(i.e., on selecting 'student' nothing appears). I have the following included as well in my base.html.
<script src="{% static 'jquery-3.2.1.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
UPDATE:
base.html: hideshow.js is the script.
<!DOCTYPE html>
{% load staticfiles %}
{% load static %}
<html lang="en"
xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<link href="{% static 'css/bootstrap-dist.min.css' %}" rel="stylesheet">
<link href="{% static 'css/ie10-viewport-bug-workaround.css' %}" rel="stylesheet">
<script src="{% static 'JS/html5shiv.min.js' %}"></script>
<script src="{% static 'JS/respond.min.js' %}"></script>
<script src="{% static 'JS/hideshow.js' %}"></script>
<link href="{% static 'css/carousel.css' %}" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'css/bootstrap-theme.min.css' %}" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 'css/sampleLogin.css' %}" />
</head>
<body>
{% include "messages_display.html" %}
<br />
{% include "navbar.html" %}
{% block content %}
{% endblock %}
register.html:
{% extends "base.html" %}
{% load crispy_forms_tags %}
{% block content %}
<div class="container">
<div class="col-md-12">
<div class="col-sm-7 col-sm-offset-2">
<h1>{{ title }}</h1><br />
<form action="/register/" method="post" enctype="multipart/form-data">{% csrf_token %}
<select name="designation" id="designation">
<option value="faculty">Faculty</option>
<option value="student">Student</option>
</select>
<div id="students" style="display:none;">
<input type="file" name="uploadFile">
</div>
</form>
{% endblock content %}
Please help.
First you have to include jquery.min.js file in html file. Then you have to keep js code in $(document).ready(function().then your code will work
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#designation').on('change',function(){
console.log($(this).val());
if( $(this).val()==="student"){
$("#students").show()
}
else{
$("#students").hide()
}
});
});
</script>
<select name="designation" id="designation">
<option value="faculty">Faculty</option>
<option value="student">Student</option>
</select>
<div id="students" style="display:none;">
<input type="file" name="uploadFile">
</div>

Categories