Hey guys I am beyond frustrated/exhausted trying to fix this unicode code \u200e showing in my web page. I tried everything I can think of. Here is what my page looks like, its data scraped articles from news.google.com and shown on my page with the time submission (the time submission is where the \u200e pops up everywhere)
http://i.imgur.com/lrqmvWG.jpg
I am going to provide my views.py, my articles.html (the page in the picture that is set up to display everything), and header.html (for whatever reason. But this is the parent template of articles.html for the CSS inheriting). Also, I researched and know that the \u200e is a left-to-right mark and when I inspect the source in news.google.com, it pops up in the time submission element as
like so:
<span class="al-attribution-timestamp">51 minutes ago</span>
I tried editing the views.py to encode it using .encode(encoding='ascii','ignore') or utf-8 or iso-8859-8 and a couple other lines of code I found researching deep on google but it still displays \u200e everywhere. I put it in so many different parts of my views.py too even right after the for loop (and right before + after it gets stored as data in the variable "b" and its just not going away. What do I need to do?
Views.py
def articles(request):
""" Grabs the most recent articles from the main news page """
import bs4, requests
list = []
list2 = []
url = 'https://news.google.com/'
r = requests.get(url)
sta = ""
try:
r.raise_for_status() == True
except ValueError:
print('Something went wrong.')
soup = bs4.BeautifulSoup(r.text, 'html.parser')
for listarticles in soup.find_all('h2', 'esc-lead-article-title'):
a = listarticles.text
list.append(a)
for articles_times in soup.find_all('span','al-attribution-timestamp'):
b = articles_times.text
list2.append(b)
list = zip(list,list2)
context = {'list':list, 'list2':list2}
return render(request, 'newz/articles.html', context)
articles.html
{% extends "newz/header.html" %}
{% block content %}
<script>
.firstfont (
font-family: serif;
}
</script>
<div class ="row">
<h3 class="btn-primary">These articles are scraped from <strong>news.google.com</strong></h3><br>
<ul class="list-group">
{% for thefinallist in list %}
<div class="col-md-15">
<li class="list-group-item">{{ thefinallist }}
</li>
</div>
{% endfor %}
</div></ul>
{{ list }}
{% endblock %}
header.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sacred Page</title>
<meta charset="utf-8" />
{% load staticfiles %}
<meta name="viewport" content = "width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static 'newz/css/bootstrap.min.css' %}" type = "text/css"/>
<style type="text/css">
html,
body {
height:100%
}
</style>
</head>
<body class="body" style="background-color:#EEEDFA">
<div class="container-fluid" style="min-height:95%; ">
<div class="row">
<div class="col-sm-2">
<br>
<center>
<img src="{% static 'newz/img/profile.jpg' %}" class="responsive-img" style='max-height:100px;' alt="face">
</center>
</div>
<div class="col-sm-10">
<br>
<center>
<h3><font color="007385">The sacred database</font></h3>
</center>
</div>
</div><hr>
<div class="row">
<div class="col-sm-2">
<br>
<br>
<!-- Great, til you resize. -->
<!--<div class="well bs-sidebar affix" id="sidebar" style="background-color:#E77200">-->
<div class="well bs-sidebar" id="sidebar" style="background-color:#E1DCF5">
<ul class="nav nav-pills nav-stacked">
<li><a href='/'>Home</a></li>
<li><a href='/newz/'>News database</a></li>
<li><a href='/blog/'>Blog</a></li>
<li><a href='/contact/'>Contact</a></li>
</ul>
</div> <!--well bs-sidebar affix-->
</div> <!--col-sm-2-->
<div class="col-sm-10">
<div class='container-fluid'>
<br><br>
<font color="#2E2C2B">
{% block content %}
{% endblock %}
{% block fool %}
{% endblock fool %}
</font>
</div>
</div>
</div>
</div>
<footer>
<div class="container-fluid" style='margin-left:15px'>
<p>Contact | LinkedIn | Twitter | Google+</p>
</div>
</footer>
</body>
</html>
If you want, you can use replace() to strip the character from your string.
b = articles_times.text.replace('\u200E', '')
The reason that you see \u200E in the rendered html instead of is that you are including the tuple {{ thefinallist }} in your template. That means Python calls repr() on the tuple, and you see \u200E. It also means you see the parentheses, for example ('headline' '\u200e1 hour ago')
If you display the elements of the tuple separately, then you will get in the template instead. For example, you could do:
{% for headline, timeago in list %}
<div class="col-md-15">
<li class="list-group-item">{{ headline }} {{ timeago }}
</li>
</div>
{% endfor %}
Related
I have several posts each of them composed of three parts : a title, a username/date and a body. What I want to do is to show the body when I click on either the title or the username/date and hide it if I click on it again. What I've done so far works but not as expected because when I have two or more posts, it only shows the body of the last post even if I click on another post than the last one. So my goal is only to show the hidden text body corresponding to the post I'm clicking on. Here is my code:
{% extends 'base.html' %}
{% block header %}
<h1>{% block title %}Test page{% endblock %}</h1>
<a class="action" href="{{ url_for('main_page.create') }}">New</a>
{% endblock %}
{% block content %}
{% for post in posts %}
<article class="post">
<header>
<script language="JavaScript">
function showhide(newpost)
{var div = document.getElementById(newpost);
if (div.style.display !== "block")
{div.style.display = "block";}
else {div.style.display = "none";}}
</script>
<div onclick="showhide('newpost')">
<h1>{{ post['title'] }}</h1>
<div class="about">by {{ post['username'] }} on {{ post['created'].strftime('%d-%m-%Y') }}</div>
</div>
</header>
<div id="newpost">
<p class="body">{{ post['body'] }}</p>
</div>
</article>
{% if not loop.last %}
<hr>
{% endif %}
{% endfor %}
{% endblock %}
Of course I looked for a solution as much as I could but I'm kind of stuck plus I'm a complete beginner in HTML/JS/CSS. And one last thing, I'm currently using Python's framework Flask. Thank you by advance.
You need to give each of your posts a unique id for your approach to work.
Change your code to
<div id="{{post_id}}">
<p class="body">{{ post['body'] }}</p
</div>
where post_id is that post's unique id e.g. its id in the database you are using that you pass to the template in your view. Then, change the call to the onclick event handler to
<div onclick="showhide('{{post_id}}')">
If you don't have a unique id you can also use the for loop's index: replace all post_id instances above with loop.index. See Jinja's for loop docs for more information.
I know similar questions have been asked before but I am very new to django and js. I have tried many solutions but I am not able to make sense of many and able to run them. So I am writing my code and the solution that I have tried. Can someone please tell me what mistake am I doing.
In my views.py I am handling a file which produces some results. These results are in the form of a Dataframe(used pandas). From this dataframe I am calculating few integer values which are stored in variables: tot,p,lp,us. I am also getting 3 sub-dataframes namely: dfp,dflp,dfus. I need to display all these on the webpage so I am sending them to an html: uploaded.html as shown below.
dict_1 = {'Path':p, 'LPath':lp, 'USig':us}
json1 = json.dumps(dict_1)
return render(request, 'uploaded.html', locals(), {'js_json1': json1, 'TotVar': tot})
The above code just sends the variables and not the dataframe as I don't know how to do it. I have handled it in my uploaded.html in the following way:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Upload File-Hereditary Cancers</title>
<link rel="stylesheet" href="/static/css/style.css" type="text/css">
<script type="text/javascript">
function results()
{
var totalvariants = {{TotVar}};
document.getElementById("totvar").innerHTML = "Total number of variants are: "+totalvariants;
}
</script>
</head>
<body>
<div id="header">
<div>
<div class="logo">
Hereditary Cancers
</div>
<ul id="navigation">
<li>
Home
</li>
<li>
About
</li>
<li class="active">
Upload File
</li>
<li>
Team
</li>
<li>
Contact Us
</li>
</ul>
</div>
</div>
<div>
{% if saved %}
<strong>Your file was uploaded.</strong>
<button onclick = "results()">Results</button>
<p id = "totvar">This will change</p>
{% endif %}
{% if not saved %}
<strong>Your file was not uploaded.</strong>
{% endif %}
</div>
<div id="footer">
<div class="clearfix">
<div id="connect">
</div>
<p>
© 2023 Zerotype. All Rights Reserved.
</p>
</div>
</div>
</body>
</html>
I am creating a button in my html which activates the script on click. I haven't done much in my script because I don't know how to. I have just tried to display the tot variable which is also not getting displayed.Can anyone tell me the complete script on how I can handle dataframes and variables in my js function and display their results.
i don't know what are you do, but you send locals() as context. first, why you did this? you don't use them in template. second, you should send your context in third parameter in render() and if you so need locals in template context, write something like this:
ctx = locals()
ctx.update(
js_json1 = json1,
TotVar = tot,
)
return render(request, 'uploaded.html', ctx)
or
ctx = {
'locals': locals(),
'js_json1': json1,
'TotVar': tot,
}
return render(request, 'uploaded.html', ctx)
https://docs.djangoproject.com/en/1.10/topics/http/shortcuts/#render
views.py
class PortfolioListView(AjaxListView):
model = Portfolio
context_object_name = "portfolios"
template_name = "portfolios/portfolio_list.html"
page_template = 'portfolios/portfolio_list_page.html'
portfolio_list.html
{% extends "skeleton/base.html" %}
{% load el_pagination_tags %}
{% block content %}
<div class="test-class">
hi-1
</div>
<section>
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-10">
{% include page_template %}
</div>
</div>
</div>
</section>
{% endblock %}
{% block custom_js %}
<script src="{% static 'el-pagination/js/el-pagination.js' %}"></script>
<script>$.endlessPaginate({});</script>
<script type="text/javascript">
$(document).ready(function(){
$(".test-class").click(function(){
alert("ji");
});
});
</script>
{% endblock %}
portfolio_list_page.html
<div>
{% lazy_paginate portfolios %}
<div class="test-class">
hi-2
</div>
<div class="test-class">
hi-3
</div>
{% show_more %}
</div>
When I load portfolio_list.html page and click hi-1, it shows alert.
But when I click show more and click hi-2 or hi-3, it doesn't show alert.
I want to show alert even I clicked hi-2 or hi-3.
How can I implement this?
p.s Actually, this is a kinda very simple code for showing clearly what I want to do.
What I eventually want to do is to execute whole javascripts code(e.g _owl_carousel(), _flexslider(), _popover(), _lightbox(), _mixitup(),, etc) after loading portfolio_list_page so that this whole javascript function also can be applied to newly loaded page
in jekyll, this works:
---
layout: default
---
<div class="brief">
<ul>
{% for post in site.posts %}
<li class="postlist">
<a href="#" onclick='document.getElementById("one").innerHTML="{{post.url}}";'>{{post.title}}</a>
<p>{{post.meta}} <br>{{post.date}} <br>{{post.category}}</p>
</li>
{% endfor %}
</ul>
</div>
<div class="post" id="one"></div>
but when i change line #8 to:
<a href="#" onclick='document.getElementById("one").innerHTML="{{post.content}}";'>{{post.title}}</a>
it breaks. why does this happen and what can i do to change this and get the desired outcome?
It's likely that your post content is creating invalid HTML (e.g. ending the onclick quotes).
In my opinion, a better method to achieve this would be to render all the post content hidden, and have your onclick toggle a class to display the relevant content. This would save you from the untold horrors of encoding and decoding that content through an attribute value.
For example:
{% for post in site.posts %}
<li>
<a href="#" onclick='document.getElementById("post-content-{{ forloop.index }}").classList.toggle("hidden")'>{{ post.title }}</a>
<p>{{ post.meta }} <br>{{ post.date }} <br>{{ post.category }}</p>
<p id="post-content-{{ forloop.index }}" class="hidden">{{ post.content }}</p>
</li>
{% endfor %}
External CSS:
.hidden {
display: none;
}
You could also extend this to hide all content sections first, so only one is shown at a time.
I recently learnt I need pagination otherwise page won't load faster.
so I implemented it.
But now that I finished implemented, I realize I have some problem.
My web has a format like this
The above is the top part of the page
and the above is the below part of the page.
all my posts are going into the below part, and because more posts I write more posts will be there I implemented pagination.
the pagination works fine, but when I go to the next page the top part remains there while the below part shows new posts. (I have implemented this without realizing the existence of the top part)
I don't want my users to see the top part every time they click next page.
I think I have two ways to solve this problem.
One is to somehow not show the top part when they click next page.
Or
I use load more button to show more posts instead of going into another page.
Problem is I don't know how to do either one of them..can some one please help me?
def category_detail(request, slug):
obj = NewsCategory.objects.get(slug=slug)
newsInCat = obj.news_set.all() #for the list of news
paginator = Paginator(newsInCat, 25) # Show 25 contacts per page
page = request.GET.get('page')
try:
news_set = paginator.page(page)
except PageNotAnInteger:
# If page is not an integer, deliver first page.
news_set = paginator.page(1)
except EmptyPage:
# If page is out of range (e.g. 9999), deliver last page of results.
news_set = paginator.page(paginator.num_pages)
bestInCat = obj.news_set.get_bestInCat()
context = {
"obj":obj,
"news_set":news_set,
"newsInCat":newsInCat,
"bestInCat":bestInCat,
}
return render(request, "news/category_detail.html", context)
<div class="row">
<div>
{% for news in news_set %}
<div class='col-sm-4'>
<div class="content">
<figure class="story-image">
</figure>
<div id="forever "style="margin-bottom:30px;">
<a href='{{news.get_absolute_url }}' style="text-decoration:none; color:#282E5C;"><h4 style="font-size: 18px;
font-weight: 400;">{{news.title}}</h4></a>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
<div class="pagination">
<span class="step-links">
<!-- {% if news_set.has_previous %}
previous
{% endif %}
<span class="current">
Page {{ news_set.number }} of {{ news_set.paginator.num_pages }}.
</span> -->
{% if news_set.has_next %}
Load More
{% endif %}
</span>
</div>
1) in the html you can show top block if page number equals 1. For example
{% if news_set.number==1%}
{{ top_block}}
{% endif %}
<div class="row">
<div>
{% for news in news_set %}
<div class='col-sm-4'> ....
2) you can render partial html if request is ajax
Here is simple code
views.py
def category_detail(request, slug):
obj = NewsCategory.objects.get(slug=slug)
newsInCat = obj.news_set.all() #for the list of news
paginator = Paginator(newsInCat, 25) # Show 25 contacts per page
page = request.GET.get('page')
try:
news_set = paginator.page(page)
except PageNotAnInteger:
# If page is not an integer, deliver first page.
news_set = paginator.page(1)
except EmptyPage:
# If page is out of range (e.g. 9999), deliver last page of results.
news_set = paginator.page(paginator.num_pages)
if request.is_ajax():
context = {
'news_set':news_set
}
return render(request,"news/category_detail_ajax.html",context)
else:
bestInCat = obj.news_set.get_bestInCat()
context = {
"obj":obj,
"news_set":news_set,
"newsInCat":newsInCat,
"bestInCat":bestInCat,
}
return render(request, "news/category_detail.html", context)
category_detail_ajax.html
{% for news in news_set %}
<div class='col-sm-4'>
<div class="content">
<figure class="story-image">
</figure>
<div id="forever "style="margin-bottom:30px;">
<a href='{{news.get_absolute_url }}' style="text-decoration:none; color:#282E5C;"><h4 style="font-size: 18px;
font-weight: 400;">{{news.title}}</h4></a>
</div>
</div>
</div>
{% endfor %}
javascript
jQuery(document).on('click','.load-more',function(e){
e.preventDefault();
jQuery.ajax({
url:jQuery(this).attr('href')
}).done(function(data){
jQuery('.row>div').append(data);
});
});