Django: Load javascript - django

I try to load the bootstrap-datepicker.js (Located: ...\AEB\static\date_picker\js)
{% load staticfiles %}
<script type="text/javascript" src="{% static "Leaflet_modi.js" %}"></script>
<!-- Files for date time picker---------------------->
<link rel="stylesheet" href="{% static 'date_picker/css/datepicker.css' %}" type = "text/css"/>
<script type="text/javascript" src="{% static "date_picker/js/bootstrap-datepicker.js" %}"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#Start_Date').datepicker({
format: "dd/mm/yyyy"
});
});
$(document).ready(function () {
$('#End_Date').datepicker({
format: "dd/mm/yyyy"
});
});
</script>
Here is my project structure:
But I always get the following error message:
"Uncaught TypeError: $(...).datepicker is not a function"
But I do not get any 404 (see image below)
Where is my mistake? Thanks for your help.

You need to call jquery first,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript" src="{% static "Leaflet_modi.js" %}"></script>
<!-- Files for date time picker---------------------->
<link rel="stylesheet" href="{% static 'date_picker/css/datepicker.css' %}" type = "text/css"/>
<script type="text/javascript" src="{% static "date_picker/js/bootstrap-datepicker.js" %}"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

I thing your routing in false!!
If you have some files like this :
-<project folder>
----<project-config-folder>
--------setting.py
-------- .
-------- .
-------- .
-------<app-name>
-----------views.py
-----------models.py
-------- .
-------- .
-------- .
--------static
--------------posts
--------------------a.jpg
-------- .
-------- .
-------- .
You can use like this to set file path :
<img src="{% static "posts/a.jpg" %}" alt="My image"/>

Related

Not all files called with django static appear

I have index.html file in template file and I have js, css, image, files in my static file. I am writing the codes correctly, but the site does not appear properly. Animations, images and text are not in the correct place. (In fact, the logo of the project I used to work with appears in this project. Both are called "logo.png", I think pycharm is confusing the codes. But I opened my project with Visual Studio Code, and the logo of my old project appeared again. Why is this happening? Do I need to delete something?)
settings.py
STATIC_URL = 'static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
index.html
<!DOCTYPE html>
{% load static %}
<html lang="en">
<!-- Basic -->
<head>
<link rel="shortcut icon" href="{% static 'images/favicon.ico' %}" type="image/x-icon">
<link rel="apple-touch-icon" href="{% static 'images/apple-touch-icon.png' %}">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<!-- Site CSS -->
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<!-- Responsive CSS -->
<link rel="stylesheet" href="{% static 'css/responsive.css' %}">
<!-- Custom CSS -->
<link rel="stylesheet" href="{% static 'css/custom.css' %}">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- ALL JS FILES -->
<script src="{% static 'js/jquery-3.2.1.min.js' %}"></script>
<script src="{% static 'js/popper.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<!-- ALL PLUGINS -->
<script src="{% static 'js/jquery.superslides.min.js' %}"></script>
<script src="{% static 'js/bootstrap-select.js' %}"></script>
<script src="{% static 'js/inewstickerjs' %}"></script>
<script src="{% static 'js/bootsnav.js.' %}"></script>
<script src="{% static 'js/images-loded.min.js' %}"></script>
<script src="{% static 'js/isotope.min.js' %}"></script>
<script src="{% static 'js/owl.carousel.min.js' %}"></script>
<script src="{% static 'js/baguetteBox.min.js' %}"></script>
<script src="{% static 'js/form-validator.min.js' %}"></script>
<script src="{% static 'js/contact-form-script.js' %}"></script>
<script src="{% static 'js/custom.js' %}"></script>
</body>
</html>
I shared important parts of HTML codes
This is what the site looks like
But it should look like this
I hope I was able to explain what my problem was. I will be glad if you help me
The problem seems to be that you might not be reseting the cache. Browsers store caches to make the website run faster, so even though you made changes to the static files(like CSS, js or images), your browser uses the old CSS which is cached. One way to fix this issue during development is to hard refresh, ctrl + shift + r to clear CSS related caches and crtl + F5 for js related files, alternatively you can disable cache in your browser. In development we use versioning to counter this issue. I hope this resolves your issue.

django.template.exceptions.TemplateSyntaxError: Could not parse the remainder: '/bootstrap4/popper.js'' from 'styles/bootstrap4/popper.js''

I have created the static directory from which I am loading the template.
{% load static %}
I am getting this error as
django.template.exceptions.TemplateSyntaxError: Could not parse the remainder: '/bootstrap4/popper.js'' from 'styles/bootstrap4/popper.js''
Hare's how I am loading bootstarp.
<script src="{% static 'js/jquery-3.2.1.min.js' %}"></script>
<script src="{% static styles/bootstrap4/popper.js' %}"></script>
<script src="{% static styles/bootstrap4/bootstrap.min.js' %}"></script>
can someone help me with this ?
You may be forgot to close your quotation ' ' in line 2 and 3 . check this please :
<script src="{% static 'js/jquery-3.2.1.min.js' %}"></script>
<script src="{% static 'styles/bootstrap4/popper.js' %}"></script>
<script src="{% static 'styles/bootstrap4/bootstrap.min.js' %}"></script>

Django & X-editable does not function

I am trying to apply X-editable with bootstrap in my django template.
I follow the basic tutorial from this link https://vitalets.github.io/x-editable/docs.html
and I have created my main.js file that has got javascript in it.
I have placed right code in my template but when I click on username and try to edit it nothing happens.
any ideas why ?
part of my template code :::
</table>
<div class="container">
<h1>X-editable starter template</h1>
<div>
<span>Username:</span>
superuser
</div>
<div>
<span>Status:</span>
Status Test
</div>
</div>
<!-- bootstrap -->
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<script src="{% static 'js/jquery-2.0.3.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<!-- x-editable (bootstrap version) -->
<link href="{% static 'css/bootstrap-editable.css' %}" rel="stylesheet"/>
<script src="{% static 'js/bootstrap-editable.min.js' %}"></script>
<!-- main.js -->
<script src="{% static 'js/main.js' %}"></script>
<script src="{% static 'js/collapse.js' %}"></script>
{% endblock %}
and javascript file:
$(document).ready(function() {
//toggle `popup` / `inline` mode
$.fn.editable.defaults.mode = 'popup';
$('#username').editable({
type: 'text',
title: 'Enter username',
success: function(response, newValue) {
userModel.set('username', newValue); //update backbone model
}
});
//make status editable
$('#status').editable({
type: 'select',
title: 'Select status',
placement: 'right',
value: 2,
source: [
{value: 1, text: 'status 1'},
{value: 2, text: 'status 2'},
{value: 3, text: 'status 3'}
]
/*
//uncomment these lines to send data on server
,pk: 1
,url: '/post'
*/
});
});

Jquery tag-it autocomplete placement off

I am trying to use aehlke/tag-it and its autocomplete option. The autocomplete shows up but in an odd position.
Here is my code:
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8'/>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="tag-it/css/jquery.tagit.css" rel="stylesheet" type="text/css">
<link rel='stylesheet' type='text/css' href='bootstrap/css/bootstrap.css'>
<link rel='stylesheet' type='text/css' href='style.css'>
</head>
<body>
<div class='container'>
<h2> Tagging Functions </h2>
<div class='row'>
<div class='span5'>
<ul id="myTags">
<!-- Existing list items will be pre-added to the tags -->
</ul>
</div>
</div>
</div>
<!-- Scripts -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="tag-it/js/tag-it.js" type="text/javascript" charset="utf-8"></script>
<script scr='bootstrap/js/bootstrap.js'></script>
<script src='js/main.js'></script>
</body>
</html>
AND JS:
// Main JS
$(document).ready(function() {
$("#myTags").tagit({
availableTags:['me', 'you']
});
});
It's because tag-it use curCSS wich was remove from jQuery on 1.8 so if you use any jQuery version higger than that... is not going to work.
A workaround could be to load jQuery 1.7.x and use jQuery.noConflict
This is my solution
//Save current jQuery
current_jquery = $.noConflict(true);
//Load the jQuery 1.7.3
current_jquery('<script>').appendTo($('head')).attr({
type: 'text/javascript',
id : 'jquery_173',
src : '//ajax.googleapis.com/ajax/libs/jquery/1.7.3/jquery.min.js'
});
//Keep jQuery 1.7.3 in a var to use it later
jquery_tagit = $.noConflict(true);
//Revert the jQuery that you where using to its original var $
$ = jQuery_actual;
//Load tag-it with jQuery 1.7.3
jquery_tagit.tagit({...});

Django DateTimeField input Form

I have a DateTime field in my model and I'm looking for a simple way to make it look okay in the form. Something like the SelectDateWidget.
I've been looking at a lot of similar questions, and it seems really tricky to get something like the admin datepicker or jquery to work. (This is my first time using Django, and I have never used jquery before).
So, I'm using the ChoiceField instead from this example, but I can't get it to work either. I get error name 'self' is not defined. Can I not use self here? Or is there some better simple way to do this? I don't need a fancy datepicker, just something that makes the input easy for the user.
class ProjectForm(ModelForm):
startdate = forms.DateField()
starthour = forms.ChoiceField(choices=((6,"6am"),(7,"7am"),(8,"8am"),(9,"9am"), ...))
startminute = forms.ChoiceField(choices=((0,":00"),(15,":15"),(30,":30"),(45,":45")))
class Meta:
model = Project
def clean(self):
starttime = time(int(self.cleaned_data.get('starthour')),
int(self.cleaned_data.get('startminute')))
return self.cleaned_data
try:
self.instance.start_time = datetime.datetime.combine(
self.cleaned_data.get("startdate"), starttime)
except TypeError:
raise forms.ValidationError("")
forms.py
from django import forms
from django.contrib.admin import widgets
class MyForm(forms.ModelForm):
class Meta:
model = MyModel
def __init__(self, *args, **kwargs):
super(MyForm, self).__init__(*args, **kwargs)
self.fields['mydate'].widget = widgets.AdminDateWidget()
self.fields['mytime'].widget = widgets.AdminTimeWidget()
self.fields['mydatetime'].widget = widgets.AdminSplitDateTime()
In template:
<script type="text/javascript" src="/my_admin/jsi18n/"></script>
<script type="text/javascript" src="/media/admin/js/core.js"></script>
…or, for Django 1.4+:
{% load static %}
<link rel="stylesheet" type="text/css"
href="{% static 'admin/css/forms.css' %} "/>
<link rel="stylesheet" type="text/css"
href="{% static 'admin/css/base.css' %} "/>
<link rel="stylesheet" type="text/css"
href="{% static 'admin/css/global.css' %}"/>
<link rel="stylesheet" type="text/css"
href="{% static 'admin/css/widgets.css' %}"/>
<script type="text/javascript"
src="/admin/jsi18n/"></script>
<script type="text/javascript"
src="{% static 'admin/js/core.js' %}"></script>
<script type="text/javascript"
src="{% static 'admin/js/admin/RelatedObjectLookups.js' %}"></script>
<script type="text/javascript"
src="{% static 'admin/js/jquery.js' %}"></script>
<script type="text/javascript"
src="{% static 'admin/js/jquery.init.js' %}"></script>
<script type="text/javascript"
src="{% static 'admin/js/actions.js' %}"></script>
<script type="text/javascript"
src="{% static 'admin/js/calendar.js' %}"></script>
<script type="text/javascript"
src="{% static 'admin/js/admin/DateTimeShortcuts.js' %}"></script>
If you're stuck with the error
Could not parse the remainder: '/js/jquery.init.js'' from 'admin/js/jquery.init.js''".
Just add an apstrophe before admin/js/jquery.init.js
it will look like:
'admin/js/jquery.init.js'