I have an order information html template to user in multiple pages inside my website using Jekyll
<div class="ccpanel">
{% include order_info.html %}
</div>
In my order_info.html fragment template, I have 5 fields.
<div class="row">
<div class="form-group col-md-4">
<label>First Name</label>
<input class="form-control" placeholder="First Name">
</div>
<div class="form-group col-md-4">
<label>Last Name</label>
<input class="form-control" placeholder="Last Name">
</div>
<div class="form-group col-md-4">
<label>Order ID</label>
<input class="form-control">
</div>
<div class="form-group col-md-4">
<label>Order Description</label>
<input class="form-control">
</div>
<div class="form-group col-md-4">
<label>Order Note</label>
<input class="form-control">
</div>
</div>
I have some pages that need to display all 5 fields in the order_info.html which works fine but I also have some pages that only need to display 3 fields in the order_info.html.
How can I reuse the order_info.html template for all pages? Or do I have to create another template of order info with 3 fields?
I believe you could pass a variable to the template, and do an if condition inside
{% include order_info.html fields=3 %}
Then inside
{% if include.fields == 3 %}
{% endif %}
Related
Trying to change password using PasswordChangeView, but cannot get it working.
urls.py
from django.contrib.auth import views as auth_views
urlpatterns = [
path('profiles/settings/', update_profile, name='update_profile'),
path('profiles/settings/', auth_views.PasswordChangeView.as_view(template_name='accounts/settings.html'),
name='password_change'),
]
And i am trying to get the input fields correct in my html
<div class="tab-pane fade" role="tabpanel" id="password">
<form id="id_password_change_form" method="POST" class="form-signin">{% csrf_token %}
<div class="form-group row align-items-center">
<label class="col-3">Current Password</label>
<div class="col">
<input
type="password"
placeholder="Enter your current password"
name="old_password"
class="form-control"
id="id_old_password"
required="true" />
</div>
</div>
<div class="form-group row align-items-center">
<label class="col-3">New Password</label>
<div class="col">
<input
type="password"
placeholder="Enter a new password"
name="new_password1"
class="form-control"
id="id_new_password1"
required="true" />
<small>Password must be at least 8 characters long</small>
</div>
</div>
<div class="form-group row align-items-center">
<label class="col-3">Confirm Password</label>
<div class="col">
<input
type="password"
placeholder="Confirm your new password"
name="new_password2"
class="form-control"
id="id_new_password2"
required="true" />
</div>
</div>
{% for field in form %}
{% for error in field.errors %}
<p style="color: red">{{ error }}</p>
{% endfor %}
{% endfor %}
<div class="d-flex justify-content-end">
<button type="submit" class="btn btn-primary">Change Password</button>
</div>
</form>
There is no error, and it do not update the password as supposed to. according to PasswordChangeView, I should not need to alter anything.
I think you have a problem because of the wrong URLs definition, take a look at you urls.py:
from django.contrib.auth import views as auth_views
urlpatterns = [
path('profiles/settings/', update_profile, name='update_profile'),
path('profiles/settings/', auth_views.PasswordChangeView.as_view(template_name='accounts/settings.html'),
name='password_change'),
]
You always hit update_profile view instead of PasswordChangeView. I think this is typo.
I am working on a project for a Django web-based application. In this project, there is a section in which I take info from the user through an HTML form. I added a section "image upload " but it gives a MultiValueDictKeyError error when the user does not upload any file. I tried this but not working for me.
This is error section : error image
This is my addpost.html section. It consists of a form through which, I am taking info.
<form action="{% url 'addpost' %}" method='POST' enctype="multipart/form-data" novalidate>
{% include 'includes/messages.html' %}
{% csrf_token %}
{% if user.is_authenticated %}
<input type="hidden" name="user_id" value="{{user.id}}">
{% else %}
<input type="hidden" name="user_id" value="0">
{% endif %}
<div class="row ">
<div class="tex-center">
<div class="row">
<div class="col-md-6 text-left">
<div class="form-group name">
<input type="text" name="author" class="form-control" placeholder="Author"
{% if user.is_authenticated %} value="{{user.first_name}}" {% endif %} readonly>
</div>
</div>
<div class="col-md-6">
<div class="form-group name">
<input type="text" name="title" class="form-control" placeholder="title" required>
</div>
</div>
<div class="col-md-6">
<div class="form-group name">
<input type="text" name="location" class="form-control" placeholder="location" required>
</div>
</div>
<div class="col-md-6">
<div class="form-group name">
<input type="text" name="short_desc" class="form-control"
placeholder="Write short description" required>
</div>
</div>
<div class="col-md-12">
<div class="form-group message">
<textarea class="form-control" name="full_desc"
placeholder="Write full description"></textarea>
</div>
</div>
<input type="file" id="myFile" name="place_photo" required/>
<div class="col-md-12">
<div class="send-btn text-center">
<input type="submit" class="btn btn-outline-success mr-1" value="Send Post">
Cancel
</div>
</div>
</div>
</div>
</div>
</form>
This is the views.py file where I receive POST data
def add_post(request):
if request.method == "POST":
try:
is_private = request.POST['is_private']
except MultiValueDictKeyError:
is_private = False
author = request.POST['author']
title = request.POST['title']
user_id = request.POST.get('user_id')
location = request.POST['location']
short_desc = request.POST['short_desc']
full_desc = request.POST['full_desc']
place_photo = request.FILES['place_photo']
post = Post(author=author, user_id=user_id, title=title, location=location,
short_desc=short_desc,full_desc=full_desc, place_photo=place_photo)
post.save()
messages.success(request,"Your post uploaded successfully")
return render(request,'community/addpost.html')
This is my models.py file
class Post(models.Model):
author = models.CharField(max_length=100, default=' ')
title = models.CharField(max_length=150)
user_id = models.IntegerField(blank=True)
location = models.CharField(max_length=100, default=' ')
short_desc = models.CharField(max_length=255, default='In less than 250 words')
full_desc = models.TextField()
place_photo = models.ImageField(upload_to='photos/%Y/%m/%d/')
added_date = models.DateTimeField(default=datetime.now,blank=True)
I am using textfields, radiobuttons, textarea etc in my form. The textfield size is very small and looks very bad:
How can I make slightly larger? How the height of text area is smaller than that of gender field?
Code is:
<div class='form-group'>
<label class='control-label col-md-2 col-md-offset-2' for='id_name'>Name</label>
<div class='col-md-6'>
{% render_field form.name class="form-control" placeholder="Full Name" type="text" %}
{% if form.name.errors %}
<div class="alert alert-danger tpad">
{{ form.name.errors.as_text }}
</div>
{% endif %}
</div>
</div>
<!-- name ends here -->
{# Gender goes here #}
<div class='form-group'>
<label class='control-label col-md-2 col-md-offset-2' for='id_name'>Gender</label>
<div class='col-md-6'>
{% for radio in form.gender %}
{{ radio }}
{% endfor %}
{{form.gender.errors}}
</div>
</div>
<!-- enroll ment number -->
<div class='form-group'>
<label class='control-label col-md-2 col-md-offset-2' for='id_enrollment_number'>Enrollment Number</label>
<div class='col-md-6'>
{% render_field form.enrollment_no class='form-control' placeholder='Enrollment Number' type='text' %}
{% if form.enrollment_no.errors %}
<div class="alert alert-danger tpad">
{{ form.enrollment_no.errors.as_text }}
</div>
{% endif %}
</div>
</div>
<div class='form-group'>
<label class='control-label col-md-2 col-md-offset-2' for='id_faculty_name'>Faculty Name</label>
<div class='col-md-6'>
{% render_field form.faculty_name class='form-control' rows="1" cols="1" placeholder='Faculty Name' type='text' %}
{% if form.faculty_name.errors %}
<div class="alert alert-danger tpad">
{{ form.faculty_name.errors.as_text }}
</div>
{% endif %}
</div>
</div>
The code generated is:
<div class='form-group'>
<label class='control-label col-md-2 col-md-offset-2' for='id_name'>Name</label>
<div class='col-md-6'>
<input class="form-control" id="id_name" maxlength="200" name="name" placeholder="Full Name" type="text" />
</div>
</div>
<!-- name ends here -->
<div class='form-group'>
<label class='control-label col-md-2 col-md-offset-2' for='id_name'>Gender</label>
<div class='col-md-6'>
<select id="id_gender" name="gender">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
</div>
Solution: The text size rendered by bootstrap was 20px. I changed it manually to 40px, here:
.uneditable-input{display:inline-block;height:40px;padding:4px 6px;margin-bottom:10px;font-size:14px;line-height:20px;color:#555;vertical-align:middle;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}input,textarea,
Since your code generate an id for the name input, adding (or update) this rule in your CSS would do the trick
#id_name {
height: 30px; /* where you give it same height as your select */
}
Another way, more generic for your form elements (input text and select), could be like this
form-control select,
form-control input[type=text] {
height: 30px;
}
I think you should resize the box like: cols or you should make it as a textarea.
For example that part of the box:
{% render_field form.name class="form-control" cols="1" placeholder="Full Name" type="text" %}
I've this contact us model and would like to separate it into 2 sections:
name, email, contact number
subject, message
How do I separate these 2 sections into different pages with a BACK and NEXT buttons?
models.py
class ContactUs(models.Model):
name = models.CharField(max_length=100)
email = models.EmailField(max_length=120)
contact_number = models.CharField(max_length=100, null=True, blank=True)
subject = models.CharField(max_length=120, null=True, blank=True)
message = models.TextField(max_length=850)
def __unicode__(self):
return self.name
html
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<form method="POST" action='{% url "contact" %}' role="form" id="contact-form" class="contact-form"> {% csrf_token %}
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" name="name" id="name" placeholder="Name*" value="{{ name }}">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="email" class="form-control" name="email" id="email" placeholder="E-mail*" value="{{ email }}">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" name="contact_number" id="contact_number" placeholder="Contact Number" value="{{ contact_number }}">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" value="{{ subject }}">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<textarea class="form-control textarea" rows="3" name="message" id="message" placeholder="Message*">{{ message }}</textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button type="submit" class="btn btn-primary2 btn-xl page-scroll pull-right">Submit</button>
</div>
</div>
</form>
</div>
</div>
forms.py
class ContactUsForm(forms.ModelForm):
class Meta:
model = ContactUs
fields = ["name",
"email",
"contact_number",
"subject",
"message",]
Up to Django 1.7, you would use the form tools that were shipped with Django.
They were moved out of Django with release 1.8 though. You can find them in a separate module now: https://github.com/django/django-formtools
Among other stuff, it features a so-called form wizard which does exactly what you're looking for.
The documentation is pretty thorough, there is not much I could add without just copy-pasting the code example from there. The creating templates for the forms section has an example with a back and a previous button in it.
I have form like this:
And if i shrink display size to more than half of width i got this.
How can i disable this behavior in default please?
Thanks for any advice.
EDIT:
Code of the template with form:
<div class="container customContainer" id="workerDetail" data-ng-controller="LocationsCtrl"
ng-init="initEmptyLocation();"
xmlns="http://www.w3.org/1999/html">
<!-- DEBUG DIV -->
<div class="debugDiv" ng-show="$root.debugable == true">
{{locationDetail}}
</div>
<div class="page-header">
<ul class="pager">
<li class="previous">← </li>
<li class="previous"><a class="savecstbtn">
<button
type="button"
class="btn btn-xs savecstbtn btn-link"
ng-click="createLocation(locationDetail)"
ng-disabled="locationForm.$invalid"
>
{{ 'SAVE' | translate }}
</button>
</a>
</li>
</ul>
<h1 class="savecstbtnHeading">{{ 'NEW_LOCATION' | translate }} </h1>
</div>
<ul class="nav nav-tabs">
<li class="active"><a data-target="#home" data-toggle="tab">{{ 'INFO' | translate }}</a></li>
<!--<li><a data-target="#activities" data-toggle="tab">{{ 'PROJECTS' | translate }}</a></li>-->
</ul>
<!-- Tab panes -->
<div class="tab-content">
<!-- USER DETAIL -->
<div class="tab-pane active" id="home">
<div class="row detailPaddingTop">
<form role="form" name="locationForm" id="locationForm" class="detailForm">
<!-- USER EDIT FORM PART 0 -->
<div class="col-md-3 column">
<div class="form-group">
<label for="city">{{ 'ADDRESS_CITY' | translate }} </label>
<input type="text" ng-model="locationDetail.address.city" class="form-control" id="city"/>
</div>
<div class="form-group">
<label for="street">{{ 'ADDRESS_STREET' | translate }} </label>
<input type="text" ng-model="locationDetail.address.street" class="form-control" id="street"/>
</div>
<div class="form-group">
<label for="streetNumber">{{ 'ADDRESS_STREET_NO' | translate }}</label>
<input type="text" ng-model="locationDetail.address.streetNumber" class="form-control" id="streetNumber"/>
</div>
<div class="form-group">
<label for="district">{{ 'ADDRESS_DISTRICT' | translate }}</label>
<input type="text" ng-model="locationDetail.address.district" class="form-control" id="district"/>
</div>
<div class="form-group col-md-6">
<label for="latitude" class="">{{ 'ADDRESS_LAT' | translate }} {{ '*' | translate }}</label>
<input type="text" ng-model="locationDetail.address.latitude"
class="form-control gpsLat"
id="latitude" required/>
</div>
<div class="form-group col-md-6">
<label for="longitude">{{ 'ADDRESS_LON' | translate }} {{ '*' | translate }}</label>
<input type="text" ng-model="locationDetail.address.longitude"
class="form-control gpsLon"
id="longitude" required/>
</div>
</div>
<!-- USER EDIT FORM PART 2 -->
<div class="col-md-3 column">
<div class="form-group">
<label for="siteId">{{ 'SITEID' | translate }} {{ '*' | translate }}</label>
<input type="text" ng-model="locationDetail.siteId"
class="form-control" id="siteId" required/>
</div>
<div class="form-group">
<label for="shared">{{ 'SHARED' | translate }}</label>
<select id="shared" ng-model="locationDetail.shared" class="form-control">
<option value="true">{{ 'YES' | translate }}</option>
<option value="false">{{ 'NO' | translate }}</option>
</select>
</div>
<div class="form-group">
<label for="sapSacIrnCode">{{ 'SAPSACIRNCODE' | translate }}</label>
<input type="text" ng-model="locationDetail.sapSacIrnCode" class="form-control" id="sapSacIrnCode"/>
</div>
<div class="form-group">
<label for="stationType">{{ 'STATION_TYPE' | translate }} {{ '*' | translate }}</label>
<input kendo-auto-complete
required
ng-minlength=1
id="stationType"
class="form-control"
ng-model="locationDetail.stationType.name"
k-options="customOptionsStationType"/>
</div>
</div>
<!-- USER EDIT FORM PART 1 -->
<div class="col-md-3 column">
<div class="form-group">
<label for="abloyLocation">{{ 'ABBLOY_LOCATION' | translate }}</label>
<input type="text" ng-model="locationDetail.abloyLocation" class="form-control" id="abloyLocation"/>
</div>
<div class="form-group">
<label for="bsc">{{ 'BSC' | translate }} </label>
<input type="text" ng-model="locationDetail.bsc" class="form-control" id="bsc"/>
</div>
<div class="form-group">
<label for="indoorOutdoor">{{ 'INDOOR_OUTDOOR' | translate }} {{ '*' | translate }}</label>
<select id="indoorOutdoor" ng-model="locationDetail.indoorOutdoor" class="form-control" required>
<option value="Indoor">{{ 'INDOOR' | translate }}</option>
<option value="Outdoor">{{ 'OUTDOOR' | translate }}</option>
<option value="IndoorOutdoor">{{ 'INDOOR_OUTDOOR_TYPE' | translate }}</option>
</select>
</div>
<div class="form-group">
<label for="partner">{{ 'PARTNER' | translate }} {{ '*' | translate }}</label>
<input kendo-auto-complete
id="partner"
class="form-control"
ng-model="locationDetail.partner.name"
k-options="customOptionsPartner"
/>
</div>
</div>
<!-- USER EDIT FORM PART 3 -->
<div class="col-md-3 column">
<div class="form-group">
<label for="accessNote">{{ 'NOTE' | translate }}</label>
<textarea id="accessNote" ng-model="locationDetail.accessNote" rows="14" cols="34">
</textarea>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Its not the fields you should look at, its the grid, you have columns set to col-md or col-sm, change them to col-xs, if you want to disable responsiveness on the entire website then read this: http://getbootstrap.com/examples/non-responsive
like paul mentioned