I am facing an issue with my Django application where tags are not loading properly in an input field using jquery. It seems like the application is unable to locate the bootstrap-tagsinput.css and bootstrap-tagsinput.js files. Can anyone provide guidance on where these files should be placed for proper detection?
Error
[28/Feb/2018 12:14:23] "GET /scripts/bootstrap-tagsinput.css HTTP/1.1" 404 2191
Not Found: /scripts/bootstrap-tagsinput.js
[28/Feb/2018 12:14:23] "GET /scripts/bootstrap-tagsinput.js HTTP/1.1" 404 2188
Not Found: /scripts/bootstrap-tagsinput.js
[28/Feb/2018 12:14:23] "GET /scripts/bootstrap-tagsinput.js HTTP/1.1" 404 2188
Project Directory Structure
<project_name>
|--<app_name>
| |--templates
| |--index.html
|--<project_name>
|--scripts
| |--bootstrap-tagsinput.css
| |--bootstrap-tagsinput.js
|--manage.py
Code
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="../scripts/bootstrap-tagsinput.css">
<title>Sample</title>
</head>
<body>
<input type="text" id="tagbar" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../scripts/bootstrap-tagsinput.js"></script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$('#tagbar').tagsinput('add', { "value": 1 ,"text": "Amsterdam" ,"continent": "Europe" });
$('#tagbar').tagsinput('add', { "value": 2 ,"text": "Washington" ,"continent": "America" });
$('#tagbar').tagsinput('add', { "value": 3 ,"text": "Sydney" ,"continent": "Australia" });
$('#tagbar').tagsinput('add', { "value": 4 ,"text": "Beijing" ,"continent": "Asia" });
$('#tagbar').tagsinput('add', { "value": 5 ,"text": "Cairo" ,"continent": "Africa" });
});
</script>
</body>
</html>