Has anyone tried to use DataTables with Django? I could not seem to get it to work, I had everything in the static files, etc..
Once I try and use datatables, I lose all the template styling and it just goes back to a default table.
EDIT There is not error when I load the page, all the data shows up just no template or datatables effects loading
This is the code:
{% load static %}
{% block content %}
<script src="{% static "assets/js/jquery.datatables.js" %}" type="text/javascript"> </script>
<script src="{% static "assets/js/jquery.js" %}" type="text/javascript"></script>
<link rel="stylesheet" href="{% static "assets/css/jquery.dataTables.css" %}" type="text/css"/>
<h1>Full list of supported Golf Courses:</h1>
<br>
<script type="text/javascript" charset="utf-8">
$(document).ready( function () {
$('#courses').dataTable();
} );
</script>
<table id="courses" class="display">
<tr>
<th>Golf Course</th>
<th>Front 9</th>
<th>Back 9</th>
<th>Total Par</th>
</tr>
{% for course_name, par_front_9, par_back_9, total_par in data %}
<tr>
<td>{{ course_name }}</td>
<td>{{ par_front_9 }}</td>
<td>{{ par_back_9 }}</td>
<td>{{ total_par }}</td>
</tr>
{% endfor %}
</table>
</div>
{% endblock %}
Got it working, noticed that the code worked when removing {% extend "base.html" %}. Fixed it by using {% include "base.html" %}
Related
I am working on a project right now, particularly on the CRUD phase. I am also new on the Django framework, but I knew some basic stuff about it. I did everything stated on the manual but it's weird because I got this kind of error.
I am using Django 2.2. Here's my code, by the way.
base.html
<!-- base.html -->
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>{% block title %}Title{% endblock %}: CAO-SMS Admin</title>
{% load static %}
<link rel = "stylesheet" href = "{% static 'fisher_prof/style.css' %}"/>
</head>
<body>
{% block body %}Body{% endblock %}
</body>
</html>
list.html
<!-- Displays the whole database (fisher) -->
{% extends 'fisher_prof/base.html' %}
{% block title %} Fisher's Information {% endblock %}
{% block body %}
<br>
<center>
<h1>Fisher's Database</h1>
<table class = "table table-striped table-bordered table-sm">
<thead class = "thead-dark">
<tr>
<th>ID  </th>
<th>Fisher's Last Name</th>
<th>Fisher's First Name</th>
<th>Fisher's Middle Name</th>
<th>Mobile Number</th>
<th>Actions</th>
</tr>
</thead>
{% for fisher in fishers %}
<tr>
<td>{{fisher.last_name}}</td>
<td>{{fisher.first_name}}</td>
<td>{{fisher.mid_name}}</td>
<td>{{fisher.cell_num}}</td>
</tr>
{% endfor %}
</table>
<br> <br>
</center>
{% endblock %}
Then when I run it, Django tells me this:
Invalid block tag on line 41: 'endblock', expected 'empty' or 'endfor'. Did you forget to register or load this tag?
Is there something wrong with my code? I really need help.
I created an inline relation between Reader and Book models.
I imported the formset in my template successfully but I can not create a new Book form by clicking a link related to my addtext attribute in the below script. In otherwords, for one Reader I want to be able to create more than one Book form by clicking a link.
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="{% static 'jquery.formset.js' %}"></script>
<script type="text/javascript">
$('table.book tr.formset_row').formset({
addText: 'Add new Book',
deleteText: 'Delete',
prefix: 'reader_book_set',
animateForms: true
});
</script>
The whole template is this:
{% extends 'base.html' %}
{% load bootstrap3 %}
{% load static %}
<!-- Latest compiled and minified JavaScript -->
{% block content %}
<div class="col-md-12 text-center">
<h2>Create / Edit Reader </h2>
</div>
<hr>
<form class="well" method="post" action="">
{% csrf_token %}
{% bootstrap_form form %}
<table class="table book">
{{ formset.management_form }}
{% for form in formset.forms %}
{% if forloop.first %}
<thead>
<tr>
{% for field in form.visible_fields %}
<th>{{ field.label|capfirst }}</th>
{% endfor %}
</tr>
</thead>
{% endif %}
<tr class="{% cycle row1 row2 %} formset_row">
{% for field in form.visible_fields %}
<td>
{# Include the hidden fields in the form #}
{% if forloop.first %}
{% for hidden in form.hidden_fields %}
{{ hidden }}
{% endfor %}
{% endif %}
{{ field.errors.as_ul }}
{{ field }}
</td>
{% endfor %}
</tr>
{% endfor %}
</table>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="{% static 'jquery.formset.js' %}"></script>
<script type="text/javascript">
$('table.book tr.formset_row').formset({
addText: 'Add new Book',
deleteText: 'Delete',
prefix: 'reader_book_set',
animateForms: true
});
</script>
{% buttons %}
<button type="submit" class="btn btn-primary">
Submit
</button>
{% endbuttons %}
</form>
<hr>
{{ form.media }}
<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/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/vendor/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
<script type="text/javascript" src="/static/admin/js/actions.min.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>
{% endblock %}
Here is my view:
class ReaderBookCreateView(LoginRequiredMixin, CreateView):
model = Reader
fields = '__all__'
template_name='test/test.html'
def get_context_data(self, **kwargs):
data = super(ReaderBookCreateView, self).get_context_data(**kwargs)
if self.request.POST:
data['formset'] = BookFormSet(self.request.POST)#bound the formset with data
else:
data['formset'] = BookFormSet()#empty formset
return data
def form_valid(self, form):
context = self.get_context_data()
formset = context['formset']
with transaction.atomic():
self.object = form.save()
if formset.is_valid():
formset.instance = self.object
formset.save()
return super(ReaderBookCreateView, self).form_valid(form)
def get_success_url(self, **kwargs):
return reverse('client_list')
Here is how it looks. I would like to have a link Add new Book above the submit button for creation of the new Book form for the current reader.
Any help will be appreciated.
It was as usual in these situations a javascript issue. I solve it.
My project could not found the path for jquery.formset.js file.
Use F12 always when you trying to debug javascript.
date picker for form field , placed in an template was not supporting.. Here's the code
forms.py:
class GuestFacultyCourseOfferForm(BaseGuestFacultyCourseOfferForm):
teaching_mode = forms.ModelChoiceField(queryset=TeachingMode.objects.all())
location_mode = forms.ModelChoiceField(queryset=LocationMode.objects.all())
# class_start_date = forms.DateField(required=True,)
classstartdate = forms.DateField(label='Date',required=True)
template code:
This is the script code for date picker which was given for form field "classstartdate".
<script type="text/javascript" src="{% url 'admin:jsi18n' %}"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="{% static 'admin/js/jquery-new.js' %}"></script>
<script type="text/javascript" src="{% static 'admin/js/jquery-ui.min.js' %}"></script>
<script type="text/javascript" src="{% static 'admin/js/jquery-validate.js' %}"></script>
<script>
$(document).ready(function() {
$( "#id_classstartdate" ).datepicker({
changeMonth: true,
changeYear: true,
minDate:0,
buttonImage: "{% static "admin/img/icon_calendar.gif" %}",
buttonImageOnly: true,
buttonText: "Select date",
showOn:"both",
});
});
</script>
--> this is body code where i have given form fields in table:
<form method="post">
{% csrf_token %}
<table id="formset" class="form">
<thead>
<tr>
<th>TEACHING MODE</th>
<th>LOCATION MODE</th>
<th>CLASS START DATE</th>
</tr>
</thead>
{% for form in formset_assign_faculty.forms %}
<tr class="{% cycle row1,row2 %}">
<td>{{ form.teaching_mode}} {{ form.teaching_mode.errors.as_ul }}</td>
<td>{{ form.location_mode}} {{ form.location_mode.errors.as_ul }}</td>
<td>{{ form.classstartdate}} {{ form.location_mode.errors.as_ul }}</td>
</tr>
{% endfor %}
</table>
</form>
If you are using formset the input id of each form is different, it is formed like "id_" + form prefix + field name.
So, try to change $("#id_classstartdate") where you initiate datepicker to $("[id^=id_][id$=classstartdate]"). This will find inputs which start with "id_" and end with form field name classtartdate.
I'm trying to learn Django and am trying to setup a user login system. My site only shows the base.html contents, and not the contents of login.html. If I remove the extends base.html, the login form seems to show up correctly. Am I doing something wrong?
login.html
{% extends "base.html" %}
{% load url from future %}
{% block content %}
{% if form.errors %}
<p>Your username and password didn't match. Please try again.</p>
{% endif %}
<form method="post" action="{% url 'django.contrib.auth.views.login' %}">
{% csrf_token %}
<table>
<tr>
<td>{{ form.username.label_tag }}</td>
<td>{{ form.username }}</td>
</tr>
<tr>
<td>{{ form.password.label_tag }}</td>
<td>{{ form.password }}</td>
</tr>
</table>
<input type="submit" value="login" />
<input type="hidden" name="next" value="{{ next }}" />
</form>
{% endblock %}
base.html
<body>
<div>
{{ user }}
{% if user.is_anonymous %}
login
{% else %}
logout
{% endif %}
</div>
Your base.html template is missing a corresponding {% block content %}{% endblock content %} and also a closing </body> tag. There's nowhere for the content in login.html to go.
Brandon is right.
you can think {%block content %} as a hole in your base.html and the extended file only replace/fill in that hole.
Im a newbie in Django and I'm using Django-Cms. I'm trying to set a login page.
I have created this login.html template:
{% extends "base.html" %}
{% block content %}
{% if form.errors %}
<p>Your username and password didn't match. Please try again.</p>
{% endif %}
<form method="post" action="{% url django.contrib.auth.views.login %}">
{% csrf_token %}
<table>
<tr>
<td>{{ form.username.label_tag }}</td>
<td>{{ form.username }}</td>
</tr>
<tr>
<td>{{ form.password.label_tag }}</td>
<td>{{ form.password }}</td>
</tr>
</table>
<input type="submit" value="login" />
<input type="hidden" name="next" value="{{ next }}" />
</form>
{% endblock %}
My base.html is:
{% load cms_tags sekizai_tags %}
<html>
<head>
{% render_block "css" %}
</head>
<body>
{% cms_toolbar %}
{% placeholder base_content %}
{% block base_content %}{% endblock %}
{% render_block "js" %}
</body>
</html>
My url is:
url(r'^accounts/', include('django.contrib.auth.urls')),
url(r'^accounts/login/$', 'django.contrib.auth.views.login', {'template_name': 'registration/login.html'}),
And when I go to /accounts/login I don't see anything. Just the django-cms toolbar. Why?
Thanks for reading
You probably wanted to use {% block base_content %} instead {% block content %} in your login.html template as you have {% block base_content %} in your base.html template.