I have created a Form but becuase of the alignment problem I try to align myself in my template,
Forms.py
class VolunteerForm(forms.ModelForm):
volposition = forms.CharField(label="Volunteer Position")
roledesc = forms.CharField(label="Role Description")
noofhours = forms.IntegerField(label="Time requirements")
Qualreqt = forms.CharField(label="Qualifications and Requirements")
class Meta:
model = Volunteer
views.py
def volunteer_page(request):
#import pdb
pdb.set_trace()
if request.method == 'POST':
form = VolunteerForm(request.POST)
if form.is_valid():
f = form.save(commit=False)
f.save()
message = "Position added"
return HttpResponseRedirect('.')
else:
form = VolunteerForm()
variable = RequestContext(request,{'form':form})
return render_to_response('registration/volunteer.html',variable)
Volunteer.html
{% extends "base.html" %}
{% block title %}User Registration{% endblock %}
{% block head %}User Registration{% endblock %}
{% block content %}
<form method="post" action".">
<table border="0">
<tr>
{{ form.non_field_errors }}
<div class="fieldWrapper">
{{ form.volposition.errors }}
<th><label for="id_volposition">Volunteer Position</label></th>
<th>{{ form.volposition }}<maxlength="100"></th>
</div>
</tr>
<tr>
<div class="fieldWrapper">
{{ form.roledesc.errors }}
<th><label for="id_roledesc">Role Description:</label></th>
<th>{{ form.roledesc }}</th>
</div>
</tr>
<tr>
<div class="fieldWrapper">
{{ form.noofhours.errors }}
<th><label for="id_noofhours">Number of Hours:</label></th>
<th>{{ form.noofhours }}</th>
</div>
</tr>
<tr>
<div class="fieldWrapper">
{{ form.qualreqt.errors }}
<th><label for="id_qualreqt">Qualification and Requirements</label></th>
<th>{{ form.Qualreqt }}</th>
</div>
</tr>
</table>
<input type="submit" value="register" />
</form>
{% endblock %}
The role description and qualifications/requirements should have a much bigger text area compared to the html generated by this page
What would be my changes?
Well you could define the css attributes in Django...
https://docs.djangoproject.com/en/dev/ref/forms/widgets/#django.forms.Widget.attrs
Or you could simply write the css manually... right click and view source if you're unsure what the id's of your html elements are
Related
i have table that changes according to the source
is there any way to change the href content base on a condition?
the only part that chnages in the code below is the following:
"<a href="{% url 'name' action='item' id=item.id %}" target="_blank"
at the moment i have the same code several times
{% for k,v in item.items %}
{% if forloop.counter0 != 0 %}
<td class='clickable-row trhover' ;
data-href="{% url 'name' action='item' id=item.id %}" ;
style="cursor: pointer;" title="Click to see item page">{{ v }}</td>
{% else %}
<td>
<a href="{% url 'name' action='item' id=item.id %}" target="_blank"
style="display:compact;">
<img src="{% static '/css/icons/new_window/popup-link.svg' %}" width="10" height="10" title="Click to open in a new tab">
</a>
{{ v }}
</td>
{% endif %}
{% endfor %}
Here I am trying to achieve a pagination in vue.js. To achieve that I have written vue.js script and also template. So here pagination is not working in my case I have tried alot but unable to understand where I am going wrong. I have implemented this in JavaScript and it was working fine but I am trying to implement in vue. So if anyone can have an ide please help me
<body translate="no" >
<div id="app" class="col-sm-12">
<div class="offset">
<table class="table table-bordered">
<thead>
<tr class="msglist_header">
<th>Member</th>
<th>Product</th>
<th>Message</th>
<th>Date</th>
<th>Action</th>
</tr>
</thead>
<tbody id="inbox-1">
{% if displayedPosts%}
{% for i in displayedPosts%}
<tr class="content_set">
<div>
<a class="fix">{{i.username|first|upper}}
<span>{{i.username|last|upper}}</span></a>
</div>
</td>
<td>
<a>
<div class="show-form-msgrply a">
{{i.ttle}}
</div>
</a>
</td>
<td>
<a>
<div id="classi_msg">{{i.message}}</div>
</a>
</td>
<td>
<div class="f">
{% for key,value in some_date.items %}
{% if i.id == key %}
<a>{{ value }}</a>
{% endif %}
{% endfor %}
</div>
</td>
<td>
<button class="show-form-msg-delete">
<a>
<span class="fa fa-trash"></span>
</a>
</button>
</td>
</tr>
{% endfor %}
{% endif %}
</tbody>
</table>
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<button type="button" class="page-link" v-if="page != 1" #click="page--"> Previous </button>
</li>
<li class="page-item">
<button type="button" class="page-link" v-for="pageNumber in pages.slice(page-1, page+5)" #click="page = pageNumber"> {{pageNumber}} </button>
</li>
<li class="page-item">
<button type="button" #click="page++" v-if="page < pages.length" class="page-link"> Next </button>
</li>
</ul>
</nav>
</div>
</div>
new Vue({
el: "#app",
data() {
return {
posts: [''],
page: 1,
perPage: 4,
pages: [] };
},
methods: {
getPosts() {
let data = [];
for (let i = 0; i < 50; i++) {if (window.CP.shouldStopExecution(0)) break;
this.posts.push(data);
}window.CP.exitedLoop(0);
},
setPages() {
let numberOfPages = Math.ceil(this.posts.length / this.perPage);
for (let index = 1; index <= numberOfPages; index++) {if (window.CP.shouldStopExecution(1)) break;
this.pages.push(index);
}window.CP.exitedLoop(1);
},
paginate(posts) {
let page = this.page;
let perPage = this.perPage;
let from = page * perPage - perPage;
let to = page * perPage;
return posts.slice(from, to);
} },
computed: {
displayedPosts() {
return this.paginate(this.posts);
} },
watch: {
posts() {
this.setPages();
} },
created() {
this.getPosts();
},
filters: {
trimWords(value) {
return value.split(" ").splice(0, 20).join(" ") + '...';
} } });
You need to replace all your {% %} code (what language is that used?) with Vue attributes, etc. For example
<tbody id="inbox-1">
{% if displayedPosts%}
{% for i in displayedPosts%}
<tr class="content_set">
should be rewritten as
<tbody id="inbox-1" v-if="displayPosts">
<tr class="content_set" v-for="i in displayedPosts" :key="i.id">
My task is fairly straightforward but seems it doesn't. I am attempting to send the order confirmation email for out of stock product i.e whose inventory is zero or less. I am allowing to place out of stock order and wants to send order confirmation email as An order will be dispatched by June 17 in email body else for in-stock product just normal email as An order takes about 4-6 business days to be delivered.
I have used the combination of a variable to set conditional statement in order Confirmation newsletter edit box as below:
{% capture email_title %}<h2 style ="color:#F15A25">Thank you for your purchase!</h2> {% endcapture %}
<img src="https://cdn.shopify.com/s/files/1/2202/5979/files/OrderSuccessEmail_jpg.png?1379574749859827384" style="display: block; margin-left: auto; margin-right: auto;" width="570" height"150"/>
{% capture email_body %}
{% if requires_shipping %}
Hi {{ customer.first_name }}, we're getting your order ready to be shipped. Please look out for an email with tracking information.
{% if variant.inventory_quantity < 0 %} Will be dispatched by June 7
{% else %} An order takes about 4-6 business days to be delivered. {% endif %} But there's more good news, read below!<br><br>
<span style ="color:#F15A25">Get Rs. 250 cash back</span>- if you love our product, leave us a review on our website at the https://winknod.com/pages/reviews and we will refund you Rs. 250! No questions asked. <br> <br>
<span style ="color:#F15A25">100 Nights Trial</span> - Your 100 nights trial will start on the day your mattress is delivered. Please make sure to save the originally signed invoice otherwise we will not be able to entertain returns. Also, ensure that mattress is not damaged and there are no stains on a cover for returns to be approved. Please read the return Terms & Conditions here:
<br>
https://winknod.com/apps/help-center/#!tell-me-more-about-the-100-nights-trial
{% endif %}
{% endcapture %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>{{ email_title }}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="/assets/notifications/styles.css">
<style>
.button__cell { background: {{ shop.email_accent_color }}; }
a, a:hover, a:active, a:visited { color: {{ shop.email_accent_color }}; }
</style>
</head>
<body>
<table class="body">
<tr>
<td>
<table class="header row">
<tr>
<td class="header__cell">
<center>
<table class="container">
<tr>
<td>
<table class="row">
<tr>
<td class="shop-name__cell">
{%- if shop.email_logo_url %}
<img src="{{shop.email_logo_url}}" alt="{{ shop.name }}" width="{{ shop.email_logo_width }}">
{%- else %}
<h1 class="shop-name__text">
Wink & Nod
</h1>
{%- endif %}
</td>
<td class="order-number__cell">
<span class="order-number__text">
Order {{ order_name }}
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<table class="row content">
<tr>
<td class="content__cell">
<center>
<table class="container">
<tr>
<td>
<h2>{{ email_title }}</h2>
<p>{{ email_body }}</p>
{% if order_status_url %}
<table class="row actions">
<tr>
<td class="actions__cell">
<table class="button main-action-cell">
<tr>
<td class="button__cell">View your order</td>
</tr>
</table>
{% if shop.url %}
<table class="link secondary-action-cell">
<tr>
<td class="link__cell"><span class='or'>or</span> Visit our store</td>
</tr>
</table>
{% endif %}
</td>
</tr>
</table>
{% else %}
{% if shop.url %}
<table class="row actions">
<tr>
<td class="actions__cell">
<table class="button main-action-cell">
<tr>
<td class="button__cell">Visit our store</td>
</tr>
</table>
</td>
</tr>
</table>
{% endif %}
{% endif %}
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<table class="row section">
<tr>
<td class="section__cell">
<center>
<table class="container">
<tr>
<td>
<h3>Order summary</h3>
</td>
</tr>
</table>
<table class="container">
<tr>
<td>
<table class="row">
{% for line in line_items %}
<tr class="order-list__item">
<td class="order-list__item__cell">
<table>
<td>
{% if line.image %}
<img src="{{ line | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
{% endif %}
</td>
<td class="order-list__product-description-cell">
{% if line.product.title %}
{% assign line_title = line.product.title %}
{% else %}
{% assign line_title = line.title %}
{% endif %}
{% if line.quantity < line.quantity %}
{% capture line_display %} {{ line.quantity }} of {{ line.quantity }} {% endcapture %}
{% else %}
{% assign line_display = line.quantity %}
{% endif %}
<span class="order-list__item-title">{{ line_title }} × {{ line_display }}</span><br/>
{% if line.variant.title != 'Default Title' %}
<span class="order-list__item-variant">{{ line.variant.title }}</span>
{% endif %}
</td>
<td class="order-list__price-cell">
{% if line.original_line_price != line.line_price %}
<del class="order-list__item-original-price">{{ line.original_line_price | money }}</del>
{% endif %}
<p class="order-list__item-price">{{ line.line_price | money }}</p>
</td>
</table>
</td>
</tr>{% endfor %}
</table>
<table class="row subtotal-lines">
<tr>
<td class="subtotal-spacer"></td>
<td>
<table class="row subtotal-table">
{% if discounts %}
{% capture discount_title %}Discount {% if discounts.first.code %}({{ discounts.first.code }}){% endif %}{% endcapture %}
<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>{{ discount_title }}</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>{{ discounts_savings | money }}</strong>
</td>
</tr>
{% endif %}
<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>Subtotal</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>{{ subtotal_price | money }}</strong>
</td>
</tr>
<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>Shipping</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>{{ shipping_price | money }}</strong>
</td>
</tr>
{% for line in tax_lines %}
<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>{{ line.title }}</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>{{ line.price | money }}</strong>
</td>
</tr>
{% endfor %}
</table>
<table class="row subtotal-table subtotal-table--total">
<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>Total</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>{{ total_price | money_with_currency }}</strong>
</td>
</tr>
</table>
{% assign transaction_size = 0 %}
{% for transaction in transactions %}
{% unless transaction.kind == "capture" or transaction.kind == "void" %}
{% assign transaction_size = transaction_size | plus: 1 %}
{% endunless %}
{% endfor %}
{% if transaction_size > 1 %}
<table class="row subtotal-table">
<tr><td colspan="2" class="subtotal-table__line"></td></tr>
<tr><td colspan="2" class="subtotal-table__small-space"></td></tr>
{% for transaction in transactions %}
{% if transaction.status == "success" and transaction.kind == "authorization" or transaction.kind == "sale" %}
{% if transaction.payment_details.credit_card_company %}
{% capture transaction_name %}{{ transaction.payment_details.credit_card_company }} (ending in {{ transaction.payment_details.credit_card_last_four_digits }}){% endcapture %}
{% else %}
{% capture transaction_name %}{{ transaction.gateway | replace: "_", " " | capitalize }}{% endcapture %}
{% endif %}
<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>{{transaction_name}}</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>{{ transaction.amount | money }}</strong>
</td>
</tr>
{% endif %}
{% if transaction.kind == 'refund' %}
{% if transaction.payment_details.credit_card_company %}
{% assign refund_method_title = transaction.payment_details.credit_card_company %}
{% else %}
{% assign refund_method_title = transaction.gateway %}
{% endif %}
<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>Refund</span>
<br>
<small>{{ refund_method_title | capitalize }}</small>
</p>
</td>
<td class="subtotal-line__value">
<strong>- {{ transaction.amount | money }}</strong>
</td>
</tr>
{% endif %}
{% endfor %}
</table>
{% endif %}
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<table class="row section">
<tr>
<td class="section__cell">
<center>
<table class="container">
<tr>
<td>
<h3>Customer information</h3>
</td>
</tr>
</table>
<table class="container">
<tr>
<td>
<table class="row">
<tr>
{% if requires_shipping and shipping_address %}
<td class="customer-info__item">
<h4>Shipping address</h4>
{{ shipping_address | format_address }}
</td>
{% endif %}
{% if billing_address %}
<td class="customer-info__item">
<h4>Billing address</h4>
{{ billing_address | format_address }}
</td>
{% endif %}
</tr>
</table>
<table class="row">
<tr>
{% if requires_shipping and shipping_address %}
<td class="customer-info__item">
<h4>Shipping method</h4>
<p>{{ shipping_method.title }}</p>
</td>
{% endif %}
{% assign transaction_count = transactions | size %}
{% if transaction_count > 0 %}
<td class="customer-info__item">
<h4>Payment method</h4>
{% for transaction in transactions %}
{% if transaction.status == "success" or transaction.status == "pending" %}
{% if transaction.kind == "authorization" or transaction.kind == "sale" %}
<p class="customer-info__item-content">
{% if transaction.payment_details.credit_card_company %}
{% capture credit_card_url %}notifications/{{ transaction.payment_details.credit_card_company | downcase | replace: " ", "_" }}.png{% endcapture %}
<img src="{{ credit_card_url | shopify_asset_url }}" class="customer-info__item-credit" height="24">
<span>Ending in {{ transaction.payment_details.credit_card_last_four_digits }} — <strong>{{ total_price | money }}</strong></span>
{% else %}
{{ transaction.gateway | replace: "_", " " | capitalize }} — <strong>{{ transaction.amount | money }}</strong>
{% endif %}
</p>
{% endif %}
{% endif %}
{% endfor %}
</td>
{% endif %}
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<table class="row footer">
<tr>
<td class="footer__cell">
<center>
<table class="container">
<tr>
<td>
<p class="disclaimer__subtext">If you have any questions, reply to this email or contact us at {{ shop.email }}</p>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<img src="{{ 'notifications/spacer.png' | shopify_asset_url }}" class="spacer" height="1" />
</td>
</tr>
</table>
</body>
</html>
When I place out of stock quantity test order from Shopify admin and check email, I always get a normal email with else statement email instead of if email sentence must be printed. What is wrong with my if block? or is there any dependency? I am always placing out of stock product for sure. If entire code is required, ready to share.Thanks.
This question already has answers here:
Passing HTML to template using Flask/Jinja2
(7 answers)
Closed yesterday.
I am using Flask ,Jinja2 template(html file) to post the panda dataframe tables which are stored in results in ABC.py.
Table looks like :Image
I am using dictionary to print it but it is not coming in right format
<div class="col-sm-5 col-sm-offset-1">
{% if results is not none %}
<h2>Compare</h2>
<br>
<div id="results">
<table class="table table-striped" style="max-width: 300px;">
<thead>
<tr>
<th>Specifications</th>
<th>part1</th>
<th>part2</th>
</tr>
</thead>
{% for key,value in results.iterrows() %}
<tr> <option value = {{value[0]}} </option> </tr>
<tr>
<option value = "{{value[0]}}">{{value[1]}}</option>
</tr>
# <option value="{{ value['0']}}">{{value['1'] }}</option>
{% endfor %}
</table>
</div>
{% endif %}
</div>
Have to do other things using jinja2 templates but stuck at very ground level.
Any suggestions please.
Thanks
You can directly render a table by adding the below to your template file:
{{ results.to_html() | safe}}
Let's say I have the following two lists:
names = ['Josh', 'Brad', 'Jordan']
favorite_colors = [['blue', 'red'], ['purple', 'gold', 'yellow'], ['green', 'pink']]
That is to say, Josh's favorite colors are blue and red, Brad's are purple and gold, etc.
I'm passing this data to a jinja2 template via flask and I'm looking to throw it all in a table. I want the table to look like so: https://jsfiddle.net/46qqfef5/
As you can see, I'm using the rowspan attribute to group name and color. However, when I try to iterate over the data using the jinja2 code below the <td rowspan="2"> tag appears in EVERY row (and I need it to only appear the first time a new name occurs).
jinja2:
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Name</th>
<th>Favorite Color</th>
</tr>
</thead>
<tbody>
{% for name_index in range(names | count) %}
{% for color_index in range(favorite_colors[name_index] | count %}
<tr>
<td rowspan="{{ favorite_colors[name_index] | count }}">{{ names[name_index] }}</td>
<td>{{ favorite_colors[name_index][color_index] }}</td>
</tr>
{% endfor %}
{% endfor %}
</tbody>
</table>
<div
If I remove rowspan={{ ... }} from the jinja2 code above I get the following table but that looks pretty awful to me: https://jsfiddle.net/46qqfef5/3/
I need a way to print the name cell for only the first occurrence of a new name.
You can use special loop variables for checking if current loop is first. In your case loop.first can be used:
<table>
<thead>
<tr>
<th>Name</th>
<th>Favorite Color</th>
</tr>
</thead>
<tbody>
{% for name_index in range(names | count) %}
{% for color in favorite_colors[name_index] %}
<tr>
{% if loop.first %}
<td rowspan="{{ favorite_colors[name_index] | count }}">
{{ names[name_index] }}
</td>
{% endif %}
<td>{{ color }}</td>
</tr>
{% endfor %}
{% endfor %}
</tbody>
</table>