I have developed template for viewing the group list in my django application. What I came to know is that, after more groups, the page is scrolling down. I am unable to see all the names of the groups. And also I want to view only 4 group names on the starting and then after clicking load more button, next 4 groups have to be shown. I am unable to do this.
<div class="container">
{% for comment in comments %}
<div id="com_div" class="comments-list">
<div class="media">
<img style="max-width: 30px" class="rounded-circle mr-2 mt-1" src="{{
comment.user.profile.image.url }}">
<div class="media-body">
<small class="media-heading user_name my_style">{{ comment.user.username }}</small>
<small class="bg-light rounded text-dark">{{ comment.date|naturaltime }}</small><br>
<small style="font-size: 14px">{{ comment.content }}</small>
<p>
<small style="font-size: 13px">
<a data-toggle="collapse" href="#ReplyBox{{ comment.id }}" role="button" aria-
expanded="false" aria-controls="ReplyBox{{ comment.id }}">
Reply</a>{% if comment.user == user %} - <a href="{% url 'del_comment' post.slug
comment.id %}">Delete</a>{% endif %}
</small>
</p>
This question is mostly related to Django, you have to paginate your list and you will have previous and next links.
Then using javascript you can navigate through them.
Django Pagination Docs
Related
I tried posting before but I was not able to get a clear answer so I thought I would reframe it simply.
My template currently uses a for loop to print the posts of a "blog" and another for loop inside that to print comments belonging to the post.
Before I continue, just want to make it clear that my models and database is functioning. I even currently have a working comment section, it just keeps refreshing the page and so I would like to incorporate JS and AJAX instead.
Because I have multiple posts with their own comment sections, I tried creating individual id's for each form in the loop by saying . However, I am slightly confused as to how I am supposed to create an EventListener to make sure that no matter which of these forms are pressed, it takes the correct data and sends it to the backend.
Any help would be appreciated. Thank you! Code upon request is available. However, I would like to stress that it is unnecessary to ask for my model code as it works just fine.
{% for post in posts %}
<div class="mt-3 px-5 pt-4 pb-2 bg-white shadow-sm" style="border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem;">
<div class="row">
<div class="col-xs-1 pl-4">
<img class="rounded-circle post-image" src="{{ post.author.profile.image.url }}" />
</div>
<div class="col-xs-4 pt-1">
<a class="mr-2 post-author-name" href="#">{{ post.author.first_name }} {{ post.author.last_name }}</a>
<small class="text-muted post-time"><br>{{ post.date_posted|date:"F d, Y" }}</small>
</div>
<div class="col-xs-7 ml-3 pt-2">
Click for more options
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p class="post-content">{{ post.content }}</p>
</div>
</div>
</div>
<div class="mb-3 pr-5 pt-4 pb-2 bg-light shadow-sm border-light" style="border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem;">
<div class="col-sm-12 pl-5 pb-5">
<form class="form-inline" method="POST" style="display:flex" id="{{forloop.counter}}"> {% csrf_token %}
<input type="search" name="comment" placeholder="New comment" class="form-control mr-sm-2 p-4" style="flex-grow:1;">
<button name="post_id" class="btn btn-info my-2 my-sm-0 " value="{{post.id}}" onclick='update_comments("{{forloop.counter}}")'> Post </button>
</form>
</div>
{% for comment in post.comments.all %}
<div class="row">
<div class="col-xs-1 offset-1 pl-4">
<img class="rounded-circle comment-image" src="{{ comment.author.profile.image.url }}" />
</div>
<div class="col-xs-4">
<a class="mr-2 comment-author-name" href="#">{{ comment.author.first_name }} {{ comment.author.last_name }}</a>
<small class="text-muted comment-time"><br>{{ comment.date_posted|date:"F d, Y" }}</small>
</div>
</div>
<div class="row">
<div class="col-sm-12 offset-1">
<p class="comment-content">{{ comment.content }}</p>
</div>
</div>
{% empty %}
<div class="px-5">
<p>No comments for this post.</p>
</div>
{% endfor %}
</div>
{% endfor %}
I have created a list of cards using for loop and fetching field values. I am using Django and Python.
Each card has certain fields such as ID, Title, Status etc. and each card has a button.
On clicking the button on a specific card, I would like to store the value of a specific field from that card, say ID into local storage so that I can pass it to another HTML page.
How should I do this?
Note:
1)I understand that passing values via local storage may not be the optimal solution, but I would like to solve the above-mentioned problem first.
2)I am new to web development and this is my first Stackoverflow post. :)
<form name="CarsListForm" method="post">
{% for car in cars.all %}
<div class="card bg-light">
<div class="card-body">
<div class="row">
<div class="col-1">
<h5 class="card-title"> {{ car.carID }}</h5>
</div>
<div class="col-7">
<h5 class="card-title"> {{ car.carTitle }}</h5>
</div>
<div class="col-2">
<p class="float-right"> {{car.carStatus}}</p>
</div>
<div class="col-2">
<p class="float-right">{{car.carImage}}</p>
</div>
</div>
<div>
<h6 class="card-text"> {{ car.carID }}</h6>
</div>
<div>
<p class="card-text"> {{ car.carDescription }}</p>
</div>
</div>
<div class="card-footer text-muted">
<!--<button class="btn"><i class="fa fa-file" style="font-size:20px;" data-toggle="tooltip" data-placement="bottom" title="Attach docs"></i></button>-->
<button onclick="addTrip()" class="btn addTrip-btn">
Add Trip
<!--<i class="fas fa-user-plus" style="font-size:20px;" data-toggle="tooltip" data-placement="bottom" title="Assign work order"></i>-->
</button>
</div>
</div>
<br> {% endfor %}
Simplest way to do that would be using javascript as follows
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
However, if your target is just to use the data in next html page, pass it as get request.
Add Trip
At the moment I am loading a list of products but I want to restrict it to the first 10 so that I can then use the Load More button to show the rest a few at a time. Unfortunately it seems to be loading all of the products instead of a select few.
<div id="products-grid" class="ui grid stackable three column">
#foreach($products as $product)
<div class="eight wide tablet five wide computer column" key="{{ $product->id }}">
<div class="ui fluid card single-product">
<a href="{{ url('brands/'.$product->brandslug.'/'.$product->slug)}}" class="image">
#if($product->product_img != 'null')
<img src="{{ url('/images/'.$product->product_img)}}" title="{{ $product->name }}" alt="{{ $product->name }}">
#else
#endif
</a>
<div class="product-title content">
<a href="{{ url('brands/'.$product->brandslug.'/'.$product->slug)}}" class="title">
<h5 class="fix-title">{{ $product->name }}</h5>
<div class="fix-subtitle">From {{ $product->brandname }}</div>
</a>
</div>
<div class="content">
<a href="{{ url('/brands/'.$product->brandslug.'/'.$product->slug)}}">
<button class="grey ui button centered fluid">View Product</button>
</a>
</div>
</div>
</div>
#endforeach
</div>
Above is the product grid I have that displays the relative products.
if(count($products)>10)
<div class="loadmore" id="load_more">
<button class="ui inverted button">
Load More
</button>
</div>
#endif
This basically displays the button if there are more than 10 products on a particular page.
#section('script')
<script type="application/javascript">
$(document).ready(function () {
$("#products-grid").slice(0, 8).show();
if ($("#products-grid:hidden").length != 0) {
$("#load_more").show();
}
$("#load_more").on('click', function (e) {
e.preventDefault();
$("#products-grid:hidden").slice(0, 6).slideDown();
if ($("#products-grid:hidden").length == 0) {
$("#load_more").fadeOut('slow');
}
});
});
</script>
#endsection
This is the script that is meant to hide some of the displayed products so that when I click Load More, it displays the others 6 or 7 at a time until there are no products left to show. This partially works as the button fades out when there are no products left to show (as it should do). The issue is it loads everything so I'm not sure why the javascript code isn't working as it should do?
when a user clicks a tab I want that tab to show as active in blue. I can do it using if statements like the one I show on the code, but I would be repeating the code a LOT, so there has to be another way, could someone let me a hand please?
The current if statement shows the profile page which is active
<!-- This is saying: inherit everything from __base.html -->
{% extends "storePage/partials/__base.html" %}
<!-- Main base template which contains header and footer too -->
{% load crispy_forms_tags %}
<!-- To beautify the form at signup -->
{% block body %}
<div class="container bootstrap snippet">
<div class="row">
<div class="col-md-3">
<div class="list-group ">
<label class="card-header">Personal Settings</label>
{% if request.get_full_path == "/settings/profile/" %}
<span class="fa fa-user"></span> Profile
{% endif %}
<span class="fa fa-cog"></span> Account
<i class="fas fa-envelope"></i> Emails
<span class="fa fa-credit-card"></span> Billing
</div>
</div>
<!-- Center-right navBar-->
<div class="col-md-9">
{% block settingsPageInfo %} {% endblock %} <!-- Here goes the user information on the profile page -->
</div>
</div>
</div>
{% endblock %}
Here is a screenshot:
[]
How can I do it so when I go to Account it shows blue?
Thanks guys
Try to match your request URL name with your current URL, you can add active class like this or directly to the tag.
<ul>
<li class="{% if 'profile' in request.resolver_match.url_name %} active {% endif %}">
Profile
</li>
</ul>
This should solve your question:
<div class="container bootstrap snippet">
<div class="row">
<div class="col-md-3">
<div class="list-group ">
<label class="card-header">Personal Settings</label>
{% if request.get_full_path == "/settings/profile/" %}
<span class="fa fa-user"></span> Profile
{% endif %}
<span class="fa fa-cog"></span> Account
<i class="fas fa-envelope"></i> Emails
<span class="fa fa-credit-card"></span> Billing
</div>
</div>
<!-- Center-right navBar-->
<div class="col-md-9">
{% block settingsPageInfo %} {% endblock %} <!-- Here goes the user information on the profile page -->
</div>
</div>
create a common component like this
<angular-anchor-tag [url]="link1"></angular-anchor-tag>
angular-anchor-tag.html
<div>
<a href="url" class="link" (click)="highlightFunction($event)">
<div>
angular-anchor-tag.ts
#Input url;
highlightFunction(event){
//remove all the highlight classes from links
.$("link").removeClass("highlight");
add highlight class to the events target
event.target.addClass('highlight');
}
I have 6 buttons which are options to buy something. You cannot make multiple choices but choose one and it automatically selects that item and reroutes you to checkout section. My question is, using Django, how do I embed the values of those buttons (ie. price, credits etc) into each button so they the ones used in the checkout. My initial method was that I created the items dynamically in Django.admin and instead of having a page in which you individually selected an item you had instead a checkboxes to select from whichever items I had created in the admin through a model (bono) I had created. However, I need the items to be hard coded into individual buttons rather than relying on Django.admin and the server.
I've attached a sample html and pic showing the buttons and will add any other items upon request. I simply had no clue which items I should include:
EDIT:
I am currently using a link tag to reroute to a different page but that does not post anything to the model.
The model for the packages is as follows:
class CreditPackage(models.Model):
name = models.CharField(max_length = 400, null=True, blank = True, verbose_name = 'Credit Package Name')
description = models.TextField(max_length = 10000, null=True, blank = True, verbose_name = 'Description')
price = models.IntegerField(null=True, blank = True, verbose_name = 'Price')
nr_credits = models.IntegerField(null=True, blank = True, verbose_name = 'Number of Credits:')
on_sale = models.BooleanField(null=False, blank = False, verbose_name = 'On Sale:')
I need to make the circles, upon clicking, pass the relevant info to that model and the reroute to a checkout.
The html of one of the buttons only:
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 text-center bonoint">
<a href="{% url 'student-packages' %}">
<div class="circle" style="background: #0045ab" ><span style="font-weight:bold; font-size:60px;" >3</span><br> Credits</div>
<div id="price">25€</div>
<div id="savings">
{% trans 'You save' %} <span style="font-weight:bold">5€</span><br><br>
{% blocktrans %} Ideal if you want to<br>
try out Milingual {% endblocktrans %}</br>.
</div></a>
</div>
the full html of the page:
{% load static %}
{% load staticfiles %}
{% load i18n %}
{% block bonos %}
<div class="container" >
<div id='titleb' class="container">
<h2 style= "color:black; align=center">MILINGUAL BONO</h2>
</div>
<div id='titleb' class="container">
<h1 style= "color:black; align=center">MILINGUAL BONO</h1>
</div>
<div>
<p>{% trans 'The Milingual Bono offers you more classes for much lesser. It saves you the hasslse of pasying each time you book a class, at the same time offering you the flexibilty of attending any Milingual class or event, anytime you want. Pick the 3 class bono if you would like to give it a try firt or book the <b>season bono</b> for unlimited access for 3 months.' %}
</p>
</div>
<div>
<div class="row">
<!-- New set of columns, centered -->
<div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 text-center bonoint" data-toggle="modal">
<a href="{% url 'student-packages' %}">
<div class="circle" style="background: #0045ab" ><span style="font-weight:bold; font-size:60px;" >3</span><br> Credits</div>
<div id="price">25€</div>
<div id="savings">
{% trans 'You save' %} <span style="font-weight:bold">5€</span><br><br>
{% blocktrans %} Ideal if you want to<br>
try out Milingual {% endblocktrans %}</br>.
</div></a>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 text-center bonoint" data-target="#login-modal">
<div class="circle" style="background: #58aeb4" ><span style="font-weight:bold; font-size:60px;">6</span><br> Credits</div>
<div id="price">39€</div>
<div id="savings">
{% trans 'You save' %} <span style="font-weight:bold">21€</span><br><br>
{% blocktrans %} Ideal if you want to<br>
try Milingual or have attended <br>
a couple of classes. {% endblocktrans %}
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 text-center bonoint" data-toggle="modal" data-target="#login-modal">
<div class="circle" style="background: #e8bf16"><span style="font-weight:bold; font-size:60px;">8</span><br> Credits
</div>
<div class="ribbon-wrapper-blue">
<div class="ribbon-blue">{% trans 'Most Popular' %}
</div>
</div>
<div id="price">50€</div>
<div id="savings">
{% trans 'You save' %} <span style="font-weight:bold">30€</span><br><br>
{% blocktrans %} Ideal if you want to practice <br>
twice a week for a month {% endblocktrans %}
</div>
</div>
</div>
</div>
</div>
<span><br></span>
<div>
<div>
<div class="row">
<!-- New set of columns, centered -->
<div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 text-center bonoint" data-toggle="modal" data-target="#login-modal" >
<div class="circle" style="background: #a7a5a7"><span style="font-weight:bold; font-size:60px;">10</span><br>Credits
</div>
<div id="price">64€</div>
<div id="savings">
{% trans 'You save' %} <span style="font-weight:bold">36€</span><br><br>
{% blocktrans %} Ideal if you want to make<br>
Milingual part of your routine {% endblocktrans %}
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 text-center bonoint" data-toggle="modal" data-target="#login-modal">
<div class="circle" style="background: #c6595b"><span style="font-weight:bold; font-size:60px;">12</span><br> Credits</div>
<div id="price">79€</div>
<div id="savings">
{% trans 'You save' %} <span style="font-weight:bold">41€</span><br><br>
{% blocktrans %} Ideal for multiple classes per<br>
week. {% endblocktrans %}
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 text-center bonoint" data-toggle="modal" data-target="#login-modal">
<div class="circle2" style="background: #b18358"><span style="font-weight:bold; font-size:50px;">SEASON</div>
<div id="price">89€</div>
<div id="savings">
{% trans 'You save' %} <span style="font-weight:bold">200€*</span><br><br>
{% blocktrans %} Get unlimited accee to <br>
classes as well as paid events<br>
for no extra cost. {% endblocktrans %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock bonos %}
Create a model (DataStorageModel in my example) that stores all of the info in your database and reference it by some name field.
put this name to your submit buttons with the name tag, e.g.:
<input id="create" type="submit" name="create" value="Create"/>
Then in your views.py check for the name in request.POST:
if request.POST.get('create'):
obj = DataStorageModel.objects.get(name='create')
...
Update:
I just saw that you intend to store prices within a html tag. NEVER DO THAT! People can just change these values... Give as little as possible to the client. Therefore you need a model to store your prices etc.
DataStorageModel(model.Model):
price = models.DecimalField(max_digits=8, decimal_places=2)
credits = models.PositiveIntegerField()
name = models.CharField()