I have a second-base.html that is parent of user-image.html
when I load second-base.html I pass it some forms and all forms are reachable and every things are ok . but when I link to user-image.html that is socond-base.html 's child I cant access forms .
if any body could help me
here is my view.py
def dashboard(request):
context = RequestContext(request)
if request.method == 'GET':
questioner_form = QuestionerForm()
return render_to_response('second-level-base.html', locals(), context)
and here is my second-base.html
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<title> {% block title %}{% endblock %}</title>
{% block head %} {% endblock head%}
</head>
<body>
<div class="modal fade " id="questionerModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog ">
<div class="modal-content">
<div class="modal-header" >
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<form class="form col-md-12 center-block" id="questionerForm" role="form" method="post" enctype="multipart/form-data" action="{% url 'Questioner' %}">
{% csrf_token %}
<div class="form-group">
{{questioner_form.as_p}}
</div>
</form>
</div>
</div>
</div>
and here is part of my inhirented userimage.html which to needs access forms which passed to it's parent ( second-base.html)
{% extends 'second-level-base.html' %}
{% load static %}
{% block title %} User Image {% endblock %}
{% block body %}
{{questioner_form.as_p}}
{% endblock %}
</body>
</html>
From https://docs.djangoproject.com/en/dev/topics/forms/#reusable-form-templates I can see that you have to use include to make the forms of your second-base.html's template available to userimage.html.
Related
I am creating a login page without an inbuilt model form. I am using FormAPI of Django and followed all the steps to add a class attribute to the input fields of my form. But it still looks like a basic form without bootstrap.
forms.py:
#Login Form
class LoginForm(forms.Form):
username=forms.CharField(widget=forms.TextInput(attrs={'class':'form-control'}))
password=forms.CharField(widget=forms.PasswordInput(attrs={'class':'form-control'}))
Base template file to be inherited:
<!doctype html>
{% load static %}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="{% static 'account/images/logo.ico' type='image/x-icon' %}">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'account/css/style.css' %}">
<title>{% block title %}{% endblock title %}</title>
</head>
<body class="forbody">
<div class="container trp" style="margin-top: 2%; display: inline-block;">
<div class="row">
<div class="col-md-4">
<img src="{% static 'account/images/Logo.png' %}" alt="Logo" style="height: 60%; width: auto;">
</div>
</div>
</div>
<div class="container" style="width: 40%; margin-top: 10%;">
<div class="container" style="width: auto; margin-top: 8%;">
<div class="container" style="background-color: #696969; height: auto; width: auto; margin-top: 8%;">
<div class="row">
<div class="col-lg-6" style="padding-top: 25px; padding-bottom: 20px; padding-left: 20px;">
<form action="" method="post" novalidate>
{% csrf_token %}
{% block formcontent %} {% endblock formcontent %}
<div class="row text-center">
<div class="col-lg-12">
{% block loginbtn %} {% endblock loginbtn %}
</div>
</div>
<div class="row text-center">
<div class="col-lg-12" style="padding-top: 10px; padding-bottom: 12px;">
{% block outerlink %} {% endblock outerlink %}
{% block messages %} {% endblock messages %}
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
</body>
</html>
Actual login template:
{% extends 'account/forms_base.html' %}
{% block title %}Log-in{% endblock title %}
{% block formcontent %}
{% if form.non_field_errors %}
{% for error in form.non_field_errors %}
{{error}}
{% endfor %}
{% endif %}
{% for fm in form %}
{{fm.label_tag}} {{fm}} {{fm.error|striptags}} <br><br>
{% endfor %}
{% endblock formcontent %}
{% block loginbtn %}
<input class="submitbtn" type="submit" value="Login">
{% endblock loginbtn %}
{% block outerlink %}
<small style="margin-top: 5px;">To register Click Here</small>
{% endblock outerlink %}
{% block messages %}
{% if messages %}
{% for message in messages %}
<span {% if message.tags %} class="{{message.tags}}" {% endif %}>{{message}}</span>
{% endfor %}
{% endif %}
{% endblock messages %}
Where am I going wrong here? When I view the source page on the browser, the class attribute does not show at all!
I am having trouble with sending flashed messages to a route that extends its layout from another template. This message shows up just fine if use the message in the layout.html which makes me believe that rendering login.html first will render layout.html and use the flashed message there and not pass it to my /login route. How are you able to call this message in an extended template? I am using the jijna with syntax taken from here to be able to have the message variable available within my mainblock. Flask's documentation does not specify this either.
app.py
#app.route("/login", methods=["POST", "GET"])
def login():
# Forget any previous user
if session.get("user_id"):
session.pop("user_id")
if request.method == "POST":
# Create connection cursor
cursor = mysql.connection.cursor()
# Query database for email
cursor.execute("SELECT id, email, password FROM users WHERE email = %s", [request.form.get("email")])
row = cursor.fetchone()
print(row)
if row is None:
print("WHY")
flash("Invaid user")
return redirect("login")
My layout.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hoook - {% block title %}{% endblock %}</title>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width">
<link href="/static/favicon-16x16.png" rel="icon">
<link href="/static/style.css" rel="stylesheet">
<!-- Scripts -->
<script src="https://kit.fontawesome.com/542c2d099e.js" crossorigin="anonymous"></script>
<script src="/static/mainJS.js"></script>
</head>
<body>
<div class="page-wrapper">
<header>
<nav class="main-navbar">
{% if request.path == "/login" %}
<div class="navbar-container login-container">
{% else %}
<div class="navbar-container">
{% endif %}
<div>
{% if request.path == "/login" %}
<img src="/static/hoook_logo_blue.png" alt="Hoook Logo" height="50" width="150">
{% else %}
<img src="/static/hoook_logo.png" alt="Hoook Logo" height="50" width="150">
{% endif %}
</div>
{% if request.path != "/login" %}
<div>
{% if session["user_id"] %}
{# change nav bar for logged in users #}
{% else %}
{# work on this nav bar for unlogged in users #}
{% if request.path == "/signup" %}
<a class="navbar-link" href="/login">Sign in</a>
{% endif %}
{% endif %}
</div>
{% endif %}
</div>
</nav>
</header>
</div>
<main>
{% if request.path == "/login" %}
<div class="top-container signup-container">
{% else %}
<div class="top-container">
{% endif %}
{% with messages = get_flashed_messages() %}
{% block main %}{% endblock %}
{% endwith %}
</div>
</main>
<footer>
</footer>
</body>
</html>
My login.html
{% extends "layout.html" %}
{% block title %}
Login
{% endblock %}
{% block main %}
<div class="login-div">
<div>
<h1 class="color-control">Sign in to Hoook</h1>
</div>
<div class="login-input-bx">
<form action="/login" method="post" autocomplete="off">
<div class="form-control login-form-control">
<label class="login-label color-control" for="email">Email address</label>
<input class="login-input" type="text" name="email" id="email" required autofocus>
</div>
<div class="form-control login-form-control">
<label class="login-label color-control" for="password">Password</label>
<input class="login-input" type="password" name="password" id="password" required readonly onfocus="this.removeAttribute('readonly')">
</div>
<button class="btn btn-login" type="submit">Sign in</button>
</form>
</div>
{% if messages %}
{% for msg in messages %}
<div class="flashed-messages-div">
<p class="signup-para" id="login-flashed-messages">Error: {{ msg }}</p>
</div>
{% endfor %}
{% endif %}
<div class="signup-link-div">
<p class="color-control signup-login-font">New to Hoook? <a class="signup-link-anchor" href="/signup">Create an account</a>.</p>
</div>
</div>
{% endblock %}
Update
I guess I could do something like make_response instead as seen here. and just use:
response = make_response(render_template("login.html", message = "Invalid user"), 302)
return response
However I am curious if there is a way to pass the flashed message through instead.
I have had the same issue. Instead of:
return redirect("login")
try with:
return render_template("login.html")
The flashed message works that way for me.
I am trying to get my posts to delete on the click of a button that pops up on the screen instead of sending the user to a different delete page. The form works but it won't actually delete the posts.
Template
{% block head %}
<head>
<link rel="stylesheet" type="text/css" href="{% static 'css/my_posts.css' %}">
<title>Create - My Posts</title>
<script>
function togglePopup(){document.getElementById("popup-1").classList.toggle("active")}
</script>
</head>
{% endblock head %}
{% block content %}
<div class="content_section">
<div class="btn_container">
<a class="new_post" href="{% url 'newpost' %}"><button class="new_post_btn">New Post</button></a>
</div>
<div class="content_section_two">
{% for product in products %}
<div class="post_short_container">
<div class="title_container">
<a href="#" class="post_link">
<div><b>{{ product.title }}</b></div>
</a>
</div>
<div class="right_btns">
Edit
Stats
<div class="ad_btn_container">
<div class="ad_btn">Ad</div>
</div>
<div class="delete_btn_container">
<div class="delete_btn" onclick="togglePopup()">Delete</div>
</div>
</div>
</div>
<div class="delete_prompt_container" id="popup-1" action="{% url 'deletepost' product.pk %}">
<form method="POST">
{% csrf_token %}
<p class="delete_prompt">Are you sure you want to delete this post?</p>
<div class="cancel_delete_container">
<div class="cancel_button" onclick="togglePopup()">Cancel</div>
<input value="Delete" type="submit" name="confirm" class="confirm_delete_button">
</div>
</form>
</div>
{% endfor %}
</div>
</div>
{% endblock content %}
views.py
def deletePost(request, pk):
post = Post.objects.get(id=pk)
if request.method == 'POST':
post.delete()
return HttpResponseRedirect(reverse('myposts'))
urls.py
urlpatterns=[
path('deletepost/<int:pk>', views.deletePost, name='deletepost'),
]
I am extending a template , and the two divs before the content block of container doesn't show in any of the ways, the only solution i found is to put this 2 divs in the child , but of course it will lose the sense using extend then.
Someone can tell me what I am missing?
Thanks in advance.
I have the following base template :
<!doctype html>
<html lang="es">
<head>
<title>{% block head_title %}{% endblock %}</title>
{% block extra_head %}
{% endblock %}
<!-- Required meta tags -->
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- Fonts and icons -->
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css"/>
{% load static %}
{% block extra_css %}
{% endblock %}
</head>
<body {% block body_attributes %} {% endblock %} >
{% block body %}
{% if messages %}
<div>
<strong>Messages:</strong>
<ul>
{% for message in messages %}
<li>{{message}}</li>
{% endfor %}
</ul>
</div>
{% endif %}
<!-- THIS 2 HERE DOESN'T APPEAR -->
<div class="page-header header-filter" style="background-image: url({% static "material/img/pic.jpg" %}); background-size: cover; background-position: top center;">
<div class="container">
{% block content %}
{% endblock %}
</div>
</div>
{% endblock %}
{% block extra_body %}
{% endblock %}
<!-- Core JS Files -->
<script src="{% static 'material/js/core/jquery.min.js' %} ">
</script>
</body>
</html>
The template that extends is the following :
{% extends "account/base.html" %}
{% load i18n %}
{% block head_title %}{% trans "Sign In" %}{% endblock %}
{% block body_attributes %}
class="login-page"
{% endblock %}
{% block body %}
{% load account socialaccount %}
{% providers_media_js %}
{% block content %}
<div class="row">
<div class="col-md-4 col-sm-6 ml-auto mr-auto">
<div class="card card-signup">
<form class="form" method="POST" action="{% url 'account_login' %}">
{% csrf_token %}
<div class="card-header card-header-primary text-center">
<h4 class="card-title">Log in</h4>
<div class="social-line">
<a href="{% provider_login_url 'facebook' method="js_sdk" %}" class="btn btn-just-icon btn-link">
<i class="fa fa-facebook-square"></i>
</a>
<a href="{% provider_login_url 'twitter' %}" class="btn btn-just-icon btn-link">
<i class="fa fa-twitter"></i>
</a>
<a href="{% provider_login_url 'google' %}" class="btn btn-just-icon btn-link">
<i class="fa fa-google-plus"></i>
</a>
</div>
</div>
<p class="description text-center">Or Be Classical</p>
<div class="card-body">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">face</i>
</span>
<input type="text" name="login" placeholder="Nombre de Usuario ..."
autofocus="autofocus" maxlength="150" required id="id_login"
class="form-control" >
</div>
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">lock_outline</i>
</span>
<input type="password" name="password" placeholder="Password..."
required id="id_password"
class="form-control">
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="remember" id="id_remember" checked>
Remember me
</label>
</div>
</div>
<div class="footer text-center">
<button id="login-btn"class="btn btn-primary btn-link btn-wd btn-lg" type="submit">Sing in</button>
<a class="btn btn-primary btn-link btn-wd btn-lg" href="{% url 'account_reset_password' %}">Has olvidado la contraseña</a>
</div>
</form>
</div>
</div>
</div>
{% endblock %}
{% endblock %}
Your block tags are nested, so when you override body in child you lose all the code inside body from base template, including that two divs. Override only content block in your child and place other code in block extra_body. If you need that code before content, add another block inside body in base template named like before_content and override it in child to place that load into it.
P. S. You have also lost your if messages code after overriding body in child template.
I leave here the code in case someone wants to see the solution with code in front of its eyes
Following approach of Alexandr
Solution 1 :
base.html
<!doctype html>
<html lang="es">
<head>
<title>{% block head_title %}{% endblock %}</title>
{% block extra_head %}
{% endblock %}
<!-- Required meta tags -->
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- Fonts and icons -->
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css"/>
{% load static %}
{% block extra_css %}
{% endblock %}
</head>
<body {% block body_attributes %} {% endblock %} >
{% block body %}
<div class="page-header header-filter" style="background-image: url({% static "material/img/office2.jpg" %}); background-size: cover; background-position: top center;">
<div class="container">
{% if messages %}
<div>
<strong>Messages:</strong>
<ul>
{% for message in messages %}
<li>{{message}}</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% block content%}
{% endblock %}
</div>
</div>
{% block extra_body %}
{% endblock %}
{% endblock %}
<!-- Core JS Files -->
<script src="{% static 'material/js/core/jquery.min.js' %} ">
</script>
</body>
</html>
extend.html
{% extends "account/base.html" %}
{% load i18n %}
{% block head_title %}{% trans "Sign In" %}{% endblock %}
{% block body_attributes %}
class="login-page"
{% endblock %}
{% load account socialaccount %}
{% providers_media_js %}
{% block content %}
<div class="row">
<div class="col-md-4 col-sm-6 ml-auto mr-auto">
<div class="card card-signup">
<form class="form" method="POST" action="{% url 'account_login' %}">
{% csrf_token %}
<div class="card-header card-header-primary text-center">
<h4 class="card-title">Log in</h4>
<div class="social-line">
<a href="{% provider_login_url 'facebook' method="js_sdk" %}" class="btn btn-just-icon btn-link">
<i class="fa fa-facebook-square"></i>
</a>
<a href="{% provider_login_url 'twitter' %}" class="btn btn-just-icon btn-link">
<i class="fa fa-twitter"></i>
</a>
<a href="{% provider_login_url 'google' %}" class="btn btn-just-icon btn-link">
<i class="fa fa-google-plus"></i>
</a>
</div>
</div>
<p class="description text-center">Or Be Classical</p>
<div class="card-body">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">face</i>
</span>
<input type="text" name="login" placeholder="Nombre de Usuario ..."
autofocus="autofocus" maxlength="150" required id="id_login"
class="form-control" >
</div>
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">lock_outline</i>
</span>
<input type="password" name="password" placeholder="Password..."
required id="id_password"
class="form-control">
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="remember" id="id_remember" checked>
Remember me
</label>
</div>
</div>
<div class="footer text-center">
<button id="login-btn"class="btn btn-primary btn-link btn-wd btn-lg" type="submit">Sing in</button>
<a class="btn btn-primary btn-link btn-wd btn-lg" href="{% url 'account_reset_password' %}">Has olvidado la contraseña</a>
</div>
</form>
</div>
</div>
</div>
{% endblock %}
Solution 2 :
Base.html
Taking into account the comment of #DisneylandSC , I try this and even though is kind of strange way to solve it , it does the job.
<!doctype html>
<html lang="es">
<head>
<title>{% block head_title %}{% endblock %}</title>
{% block extra_head %}
{% endblock %}
<!-- Required meta tags -->
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- Fonts and icons -->
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css"/>
{% load static %}
{% block extra_css %}
{% endblock %}
</head>
<body {% block body_attributes %} {% endblock %} >
{% block body %}
{% if messages %}
<div>
<strong>Messages:</strong>
<ul>
{% for message in messages %}
<li>{{message}}</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% block content_top %}
<div class="page-header header-filter" style="background-image: url({% static "material/img/office2.jpg" %}); background-size: cover; background-position: top center;">
<div class="container">
{% endblock %}
{% block content_botton %}
</div>
</div>
{% endblock %}
{% endblock %}
{% block extra_body %}
{% endblock %}
<!-- Core JS Files -->
<script src="{% static 'material/js/core/jquery.min.js' %} ">
</script>
</body>
</html>
extend.html
{% extends "account/base.html" %}
{% load i18n %}
{% block head_title %}{% trans "Sign In" %}{% endblock %}
{% block body_attributes %}
class="login-page"
{% endblock %}
{% block body %}
{% load account socialaccount %}
{% providers_media_js %}
{% block content_top %}
{{ block.super }}
<div class="row">
<div class="col-md-4 col-sm-6 ml-auto mr-auto">
<div class="card card-signup">
<form class="form" method="POST" action="{% url 'account_login' %}">
{% csrf_token %}
<div class="card-header card-header-primary text-center">
<h4 class="card-title">Log in</h4>
<div class="social-line">
<a href="{% provider_login_url 'facebook' method="js_sdk" %}" class="btn btn-just-icon btn-link">
<i class="fa fa-facebook-square"></i>
</a>
<a href="{% provider_login_url 'twitter' %}" class="btn btn-just-icon btn-link">
<i class="fa fa-twitter"></i>
</a>
<a href="{% provider_login_url 'google' %}" class="btn btn-just-icon btn-link">
<i class="fa fa-google-plus"></i>
</a>
</div>
</div>
<p class="description text-center">Or Be Classical</p>
<div class="card-body">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">face</i>
</span>
<input type="text" name="login" placeholder="Nombre de Usuario ..."
autofocus="autofocus" maxlength="150" required id="id_login"
class="form-control" >
</div>
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">lock_outline</i>
</span>
<input type="password" name="password" placeholder="Password..."
required id="id_password"
class="form-control">
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="remember" id="id_remember" checked>
Remember me
</label>
</div>
</div>
<div class="footer text-center">
<button id="login-btn"class="btn btn-primary btn-link btn-wd btn-lg" type="submit">Sing in</button>
<a class="btn btn-primary btn-link btn-wd btn-lg" href="{% url 'account_reset_password' %}">Has olvidado la contraseña</a>
</div>
</form>
</div>
</div>
</div>
{% endblock %}
{% block content_botton %}
{{ block.super }}
{% endblock %}
{% endblock %}
I thought that by just including jQuery from CDN in base.html, it will be defined in all html pages that extend the base, like when including from static files, without repeating
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
base.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>notifyMe</title>
<!-- Bootstrap -->
<link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/css/style.css" rel="stylesheet">
</head>
<body>
<h1>NotifyMe</h1>
{% block main %}
{% endblock %}
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</body>
</html>
Edit
event_add.html:
{% extends 'base.html' %}
{% load widget_tweaks %}
{% block main %}
<div class="container">
<div id="form" class="col-md-6 col-md-offset-3 jumbotron">
<div class="text-center">
<h3>New Task</h3>
</div>
<form method="POST">
{% csrf_token %}
{% for field in form.visible_fields %}
<div class="form-group row">
<label for="{{ field.id_for_label }}">{{ field.label }}</label>
{{field|add_class:'form-control'}}
{% for error in field.errors %}
<span class="help-block"> {{ error}} </span>
{% endfor %}
</div>
{% endfor %}
<div class="form-group">
<button type="submit" class="btn btn-success">
<span class="glyphicon glyphicon-ok"></span> Save
</button>
Cancel
</div>
</form>
</div>
</div>
<script>
$(function() {
$(".datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "2016:2020",
});
});
</script>
{% endblock %}
My function wasn't recognize until I added the CDN line before the function script.
Does {% extends 'base.html' %} have some limits?
The .datepicker() plugin you try to use is included in Jquery-UI. I suggest you to restructure your templates as follows (irrelevant parts removed for clarity):
base.html
<html lang="en">
...
...
{% block main %}
{% endblock %}
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Consider also adding Bootstrap.js here! -->
{% block extra_js %}{% endblock extra_js %}
</body>
</html>
and use main block for HTML content and extra_js block for Javascript. This way you will guarantee that any user scripts will come after JQuery. For example:
event_add.html
{% extends 'base.html' %}
{% load widget_tweaks %}
{% block main %}
<div class="container">
...
...
</div>
{% endblock main %}
{% block extra_js %}
<script src='//code.jquery.com/ui/1.11.4/jquery-ui.js'></script>
<script>
$(function() {
...
...
</script>
{% endblock extra_js %}