Here's the problem:
I have a simple unordered list of posts. Each post is truncated (250 chars), but should expand when clicked (Using .replaceWith). What I'm trying to do is replace the truncated Post.content with the "untruncated" Post.content. When I try this, the click returns the content of all the Posts in my list. I only want the content of the Post that I am clicking. Here's the relevant code:
<ul>
{% for post in object_list %}<tr class="{% cycle 'row1' 'row2' %}"></tr>
<div class="panel panel-default col-sm-offset-1 col-sm-8">
<p><h4><B><a class="title" href="/posts/{{ post.id }}/">{{post.title }}</a></B></h4></p>
<p style="color:gray">Author:
<a style="color:darkgray" href="{% url 'accounts:profile' %}"> <span class="link">{{ user.first_name }} {{ user.last_name }}</span></a></p>
<hr style="">
<div class="post" >
<h5 style="color: rgba(101, 106, 106, 1)">{{post.content|truncatechars:250 }}</h5>
</div>
<div class="expandContent">
<button class="btn btn-primary btn-sm">Read</button>
</div>
<br>
<br>
<br>
<div class="content">
<p>{{ post.content }}</p>
</div>
</div>
<br>
{% endfor %}
</ul>
Above is my basic list. Here is the JS that should expand the Post.content:
<script src="{% static 'posts/jquery-3.1.1.js' %}"></script>
<script type="text/javascript">
$(".expandContent").click(function(){$(".post").replaceWith($('.content'));
});
</script>
If any more information or code would be helpful, please let me know. If it's at all relevant, this project is on Django 1.10. Thank you!
You can do something like this
<ul>
{% for post in object_list %}<tr class="{% cycle 'row1' 'row2' %}"></tr>
<div class="panel panel-default col-sm-offset-1 col-sm-8">
<p><h4><B><a class="title" href="/posts/{{ post.id }}/">{{post.title }}</a></B></h4></p>
<p style="color:gray">Author:
<a style="color:darkgray" href="{% url 'accounts:profile' %}"> <span class="link">{{ user.first_name }} {{ user.last_name }}</span></a></p>
<hr style="">
<div class="post" >
<h5 style="color: rgba(101, 106, 106, 1)">{{post.content|truncatechars:250 }}</h5>
</div>
<div class="expandContent">
<button class="btn btn-primary btn-sm" onclick="replace("content-1">Read</button>
</div>
<br>
<br>
<br>
<div class="content" id="content-1">
<p>{{ post.content }}</p>
</div>
</div>
<br>
{% endfor %}
</ul>
and in the replace function you can getelementbyid and display it.
Related
so I'm building this online learning website, and I have a catalog of all courses where you can search for courses which titles or description contain the input in the search bar. I used bootstrap cards to make the catalog. It's working well, but on desktop I get empty spaces in place of the cards which are hidden, and the results show with big empty spaces between them is there were courses in between etc. No issue on mobile, all results show up vertically one after another. Is there a way to go around that? thanks!
Picture to see the "empty spaces"
JS code:
$('#live_search').on('keyup', function() {
let input = $(this).val();
$('.card').hide();
$('.card').filter(function() {
return new RegExp(input, 'i').test($(this).text())
}).show();
});
Cards:
<div class="search">
<form>
<label for="live_search">Rechercher une formation :</label>
<input type="text" id="live_search" size="30" class="form-control" placeholder="Rechercher une formation" />
</form>
</div>
<br>
<div class="container px-5 mb-3">
<div class="row">
{% for formation in formations %}
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="{{ vich_uploader_asset(formation, 'imageFile') }}" alt="{{ formation.imageName }}">
<div class="card-body">
<h5 class="card-title">{{ formation.title }}</h5>
<p class="card-text">{{ formation.description }}</p>
<a class="small btn btn-success custom-btn rounded-pill px-3" href="{{path('app_formations_see', {'id' : formation.id })}}" role="button">voir</a>
<span class="small">par {{ formation.user.firstname }} {{ formation.user.lastname }}</span>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
You're hiding the card but keeping the col-md-4 div. You can merge the col-md-4 and card divs.
Just hide the col-md-4 div by introducing a "wrapper" class (or whatever you want to call it)
JS Code
$('#live_search').on('keyup', function() {
let input = $(this).val();
$('.wrapper').hide();
$('.wrapper').filter(function() {
return new RegExp(input, 'i').test($(this).text())
}).show();
});
Cards
<div class="search">
<form>
<label for="live_search">Rechercher une formation :</label>
<input type="text" id="live_search" size="30" class="form-control" placeholder="Rechercher une formation" />
</form>
</div>
<br>
<div class="container px-5 mb-3">
<div class="row">
{% for formation in formations %}
<div class="col-md-4 wrapper">
<div class="card">
<img class="card-img-top" src="{{ vich_uploader_asset(formation, 'imageFile') }}" alt="{{ formation.imageName }}">
<div class="card-body">
<h5 class="card-title">{{ formation.title }}</h5>
<p class="card-text">{{ formation.description }}</p>
<a class="small btn btn-success custom-btn rounded-pill px-3" href="{{path('app_formations_see', {'id' : formation.id })}}" role="button">voir</a>
<span class="small">par {{ formation.user.firstname }} {{ formation.user.lastname }}</span>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
I'm trying to hide the remove button from a product with certain id but kinda confuse, I have tried using {% if %} until it hits {% endif %} but still it doesn't want to hide it. For example I have tried to hide a button with class= "ajaxcart__qty-adjust ajaxcart__qty--delete icon-fallback-text" in product id 2423924.
{{#items}}
<div class="ajaxcart__product">
<div class="ajaxcart__row" data-line="{{line}}">
<div class="row">
<div class="col-xs-4 col-md-3 col-img-left">
<img src="{{img}}" alt="">
</div>
<div class="col-xs-8 col-md-9">
<p>
{{name}}
{{#if variation}}
<span class="ajaxcart__product-meta">{{variation}}</span>
{{/if}}
{{#properties}}
{{#each this}}
{{#if this}}
<span class="ajaxcart__product-meta">{{#key}}: {{this}}</span>
{{/if}}
{{/each}}
{{/properties}}
{% endraw %}{% if settings.cart_vendor_enable %}{% raw %}
<span class="ajaxcart__product-meta">{{ vendor }}</span>
{% endraw %}{% endif %}{% raw %}
<button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--detete icon-fallback-text" data-id="{{key}}" data-line="{{line}}" data-qty="0">
<span class="fallback-text" aria-hidden="true">x</span>
<span class="visually-hidden">{% endraw %}{{ 'cart.general.remove' | t }}{% raw %}</span>
</button>
</p>
<div class="row display-table">
<div class="col-xs-5 display-table-cell ">
<div class="ajaxcart__qty">
<button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--minus icon-fallback-text" data-id="{{key}}" data-qty="{{itemMinus}}" data-line="{{line}}">
<span class="fallback-text" aria-hidden="true">−</span>
<span class="visually-hidden">{% endraw %}{{ 'cart.general.reduce_quantity' | t }}{% raw %}</span>
</button>
<input type="text" name="updates[]" class="ajaxcart__qty-num" value="{{itemQty}}" min="0" data-id="{{key}}" data-line="{{line}}" aria-label="quantity" pattern="[0-9]*">
<button type="button" class="ajaxcart__qty-adjust ajaxcart__qty--plus icon-fallback-text" data-id="{{key}}" data-line="{{line}}" data-qty="{{itemAdd}}">
<span class="fallback-text" aria-hidden="true">+</span>
<span class="visually-hidden">{% endraw %}{{ 'cart.general.increase_quantity' | t }}{% raw %}</span>
</button>
</div>
</div>
<div class="ajax_cart_money col-xs-7 display-table-cell text-left">
{{#if discountsApplied}}
<small class="ajaxcart-item__price-strikethrough"><s>{{{originalLinePrice}}}</s></small>
<br><span>{{{linePrice}}}</span>
{{else}}
<div>x <span class="money">{{{price}}}</span> = <span class="money money-total">{{{linePrice}}}</span></div>
{{/if}}
</div>
</div>
{{#if discountsApplied}}
<div class="row display-table">
<div class="col-xs-12 text-right">
{{#each discounts}}
<small class="ajaxcart-item__discount">{{ this.title }}</small><br>
{{/each}}
</div>
</div>
{{/if}}
</div>
</div>
</div>
</div>
{{/items}}
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 %}
Trying to apply infinite scrolling using Waypoints but cant seem to get it working.
I have the following scripts loaded in my base.html after downloading them and saving in my static folder:
<script src="{% static 'js/jquery-3.5.1.min.js' %}"></script>
<script src="{% static 'js/jquery.waypoints.min.js' %}"></script>
<script src="{% static 'js/infinite.min.js' %}"></script>
Then I have the following code in my template exteded from the base:
{% extends "base.html" %}
{% load static %}
{% block css %}
<link rel="stylesheet" href="{% static 'home/main.css' %}">
{% endblock css %}
{% block content %}
<br>
<div class="container status-update">
<div class="container">
<form>
<div class="input-group-lg">
<input type="text" class="form-control" value="What's new?">
</div>
<br style="height:20px">
<button type="submit" class="btn btn-primary btn-lg" name="button">Post</button>
</form>
</div>
</div>
<br>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #6298bf">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="navbar-nav">
<a class="nav-link active" href="{% url 'home' %}">Activity Feed</a>
<a class="nav-link" href="{% url 'vehicle_updates' %}">Vehicle Updates<span class="sr-only">(current)</span></a>
<a class="nav-link" href="/space.html">Garage Updates</a>
</div>
</div>
</nav>
</div>
<br>
<div class="container">
<div class="primary-segments">
<h2>Activity Updates</h2>
<div class="infinite-container">
{% for post in posts %}
<div class="infinite-item">
<div class="card m-3">
<div class="card-body" style="background-color:#bdcade; padding-bottom:0px">
<div class="media mb-3">
<img src="{{ user.profile.image.url }}" class="d-block ui-w-40 rounded-circle" style="width:40px;height:auto;" alt="">
<div class="media-body ml-3">
<h5 style="color:#ffffff">{{ post.user.first_name }} {{ post.user.last_name }}</h5>
<div class="small text-muted">Yesterday</div>
</div>
</div>
</div>
{% if post.image %}
<img src="{{ post.image.url }}" class="card-img-top" alt="">
{% endif %}
<div class="card-body">
<h5 class="card-title">{{ post.title }}</h5>
<p class="card-text">{{ post.content }}</p>
<div class="btn-group" role="group">
<button type="button" class="btn btn-secondary">Like</button>
<button type="button" class="btn btn-secondary">Comment</button>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% if page_obj.has_next %}
<a class="infinite-more-link" href="?page={{ page_obj.next_page_number }}">More</a>
{% endif %}
</div>
</div>
<script type="javascript">
var infinite = new Waypoint.Infinite({
element: $('.infinite-container')[0]
});
</script>
{% endblock content %}
When I run the server and load the page, it just shows a `more' button at the bottom of the page that I can click on to take me to the next group of objects (set pagination to 3 in the view).
Doesn't look like it is throwing any errors in the console when I run the server, so I'm not sure where to look next for the problem. Any help would be much appreciated.
Figured it out.
Moved the the JS script tags from the bottom of the body up into the head and it started working. Wasn't aware of this location dependency.
I am trying to make a Foundation 6 Orbit with the slides comprising of a separate/ dynamic Django template inclusion as such:
<div class="row">
<div class="small-12 columns">
<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
<ul class="orbit-container">
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span> ◀︎</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span> ▶︎</button>
{% for p in projects %}
<li class="orbit-slide">
{% include "project/project_landing_stub.html" %}
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
project_landing_stub.html:
<div class="callout small-12 columns" style="margin-top:30px;">
<a href="{{ p.get_absolute_url }}" style="color:black;">
<div class="row" style="margin-bottom: 20px;">
<div class="small-12 columns" style="border-bottom:1px solid lightgrey;">
<p>{{ p.offer_title|truncatechars:100 }}</p>
</div>
</div>
<div class="row">
<div class="small-6 columns">
<img class="thumbnail" src="{% if p.project.photo %}{{ p.project.photo.url }}{% endif %}"/>
</div>
<div class="small-6 columns">
<i class="fa fa-map-marker"></i> {{ p.project.city }}, {{ p.project.country }}
</div>
</div>
<div class="row" style="text-align: center;font-size: 12px;">
{% if p.offer_type == 'CO' %}
<div class="small-4 columns padding-10">
{% if p.annual_return %}
<b>{{ p.annual_return }}%</b><br/>
{% else %}
<b>-</b><br/>
{% endif %}
<span class="small-gray">total yield</span>
</div>
<div class="small-4 columns padding-10">
<b>{{ p.time_horizon }} </b><br/>
<span class="small-gray">tenure (mth)</span>
</div>
<div class="small-4 columns padding-10">
<p style="font-size: 12px;">
{% if p.loan %}
<b>{{ p.loan.get_payment_freq_display }}</b>
{% else %}
<b>End of Tenure</b>
{% endif %}
<br/>
<span class="small-gray">payout freq</span>
</p>
</div>
{% else %}
<div class="small-6 columns padding-10">
<b>{{ p.currency }} {{ p.min_investment }} </b><br/>
<span class="small-gray">min. investment</span>
</div>
<div class="small-6 columns padding-10">
{% if p.annual_return %}
<b>{{ p.annual_return }}%</b><br/>
{% else %}
<b>-</b><br/>
{% endif %}
<span class="small-gray">projected return</span>
</div>
{% endif %}
</div>
</a>
</div>
But it does not show, due to the orbit-container being rendered with 0px height property. Downloaded the Complete Foundation on 18th of July 2016, and using it here. The Orbit sample works fine if pasted in the same page, so I figured this has something to do with the dynamic generation of the orbit-slides using Django loop. Any idea?