I have problem with Div refreshing. idk where is my problme. and its says the problem is Not Found: /chat/(?P5\d+)/(?Pchatsnr1[\w-]+)/chat.html
And this is my code for it
<!DOCTYPE html>
{% load static %}
<html>
<head>
<meta charset="utf-8">
<title>{% block title %}kobby chat {% endblock %}</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.1/emojionearea.css">
<script
src="https://code.jquery.com/jquery-2.2.4.js"
integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.1/emojionearea.js"></script>
<Link rel="stylesheet" href="{% static 'chat/style.css'%}">
</head>
<body>
{% include 'chat/navbar.html' %}
<div id="refresh" class="container-fluid">
{% block content %}
{% endblock %}
</div>
<script type="text/javascript">
$(document).ready(function(event){
$("#text").emojioneArea({
pickerPosition:"bottom "
})
$('#auto').load('chat.html');
refresh();
});
function refresh()
{
setTimeout( function() {
$('#auto').fadeOut('slow').load('chat.html').fadeIn('slow');
refresh();
}, 5000);
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
and next part for this
{% extends 'chat/base.html' %}
{% block title %}{{post.title}} | {{block.super}}{% endblock %}
{% block content %}
<h3>
{{post.title}}
</h3>
<small>Chat created by Kobby</small>
<p>{{post.body}}</p>
<form method="post">
{% csrf_token %}
<textarea id="text" name="content" cols="40" rows="10" maxlength="160" required="" id="id_content" style="margin-top: 0px; margin-bottom: 0px; height: 35px;"></textarea>
{% if request.user.is_authenticated %}
<input type="submit" value="Sumbit" class="btn btn-outline-success" />
{% else %}
<input type="submit" value="Sumbit" class="btn btn-outline-success" disabled/>
{% endif %}
</form>
<div id="auto" class="main-comment-section">
{% include 'chat/chat.html' %}
</div>
{% endblock %}
Then finnaly
{{comments.count}} Chat message{{comments|pluralize}}
{% for comment in comments %}
<blockquote class="blockquote">
<p class="mb-0">{{comment.content}}</p>
{% if comment.user.is_staff %}
<footer class="blockquote-footer">by <cite title="Source Title" style="color:red;">{{comment.user|capfirst}}</cite></footer>
{% else %}
<footer class="blockquote-footer">by <cite title="Source Title">{{comment.user|capfirst}}</cite></footer>
{% endif %}
</blockquote>
{% endfor %}
I think i have problem in urls like .load() method i was trying diffrent urls but same result . Maybe i need some other methof for refreshing html code
Related
I followed the steps in guide in https://django-private-chat.readthedocs.io/en/latest/readme.html:
base.html:
{% block extra_js %}{% endblock extra_js %}
settings.py:
INSTALLED_APPS = (
...
'django_private_chat',
...
)
CHAT_WS_SERVER_HOST = 'localhost'
CHAT_WS_SERVER_PORT = 5002
CHAT_WS_SERVER_PROTOCOL = 'ws'
urlpatterns = [
"other urls"
url(r'^', include('django_private_chat.urls')),
]
After starting the server I go to http://127.0.0.1:8000/dialogs/some-of-the-users and there is no result whatsoever, the page is empty.
The console displaying:
Uncaught ReferenceError: $ is not defined
at username:128
django version= 3.0.6
python version= 3.7.6
and the latest version of django-private-messaging
It's my first time implementing a chat app so I hope I'm not missing anything fundamental. Have a nice day!
base.html:
<!DOCTYPE html>
{% load static %}
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<link rel="stylesheet" href="{% static 'css/dropdown.css' %}">
<link rel="stylesheet" href="{% static 'css/intro.css' %}">
<link rel="icon" type="image/ico" href="{% static 'icons\favicon.ico' %}"/>
<title>Document</title>
</head>
<body>
<div class="overlay2" id="overlay2">
<div id=fullscrean>
<img class=virus2 src="{% static 'icons\virus-new-color.png' %}" alt="virus">
<h4></h3>
<a href="/user/loginUser" class=mantar>login</a>
<a href="/user/register" class=mantar>register</a>
<button class=button-geri onclick="close('overlay2') ">geri</button>
</div>
</div>
<div class="overlay" id="overlay">
<div id=fullscrean>
<img class=virus2 src="{% static 'icons\virus-new-color.png' %}" alt="virus">
<h4></h3>
<a href="/user/loginUser" class=mantar>enter</a>
<a href="/user/register" class=mantar>register</a>
<button class=button-geri onclick="kapat('overlay') ">back</button>
</div>
</div>
<div class="overlay4" id="overlay4">
<div id=fullscrean>
<img class=virus2 src="{% static 'icons\virus-new-color.png' %}" alt="virus">
<h4></h3>
<a href="/user/loginUser" class=mantar></a>
<a href="/user/register" class=mantar></a>
<button class=button-geri onclick="kapat('overlay4') "></button>
</div>
</div>
<div class="overlay5" id="overlay5">
<div id=fullscrean>
<img class=virus2 src="{% static 'icons\virus-new-color.png' %}" alt="virus">
<h3></h3>
<a href="/user/loginUser" class=mantar></a>
<a href="/user/register" class=mantar></a>
<button class=button-geri onclick="kapat('overlay5') "></button>
</div>
</div>
<div class="overlay3" id="overlay3">
<div id=fullscrean2>
<img class=virus3 src="{% static 'icons\delete.png' %}"
alt="sil"></button>
<h4></h3>
<button class=button-cancel onclick="kapat('overlay3')">vazgeç</button>
<button class=button-doit id=doit>sil</button>
</div>
</div>
<div class="overlay6" id="overlay6">
<div id=fullscrean3>
<div class=scrollable-div id=scrollable-div>
{% for i in page_list %}
{% if i == entries2.number %}
<a class=scroll-select id=exception2 href="?page={{i}}"><span id=exception>{{i}}</span></a>
{% else %}
<a class=scroll-select href="?page={{i}}">{{i}}</a>
{% endif %}
{% endfor %}
</div>
{% if entries2.has_previous or entries.has_previous %}
<button class=button-prevp>önceki</button>
{% endif %}
{% if entries2.has_next or entries.has_next %}
<button class=button-nextp>sonraki</button>
{% endif %}
</div>
</div>
<div class="overlay7" id="overlay7">
<div id=fullscrean2>
<img class=virus3 src="{% static 'icons\delete.png' %}"
alt="sil"></button>
<h4>etiketin silinsin mi?</h3>
<button class=button-cancel onclick="kapat('overlay7')">vazgeç</button>
<button class=button-doit id=doit2>sil</button>
</div>
</div>
<div class=line></div>
<header>
<div class="header-top">
<div class=logo-holder>
<img class=virus src="{% static 'icons\virus-new-color.png' %}" alt="virus">
</div>
<div class=search-holder>
<input class=search type="text" placeholder="search it..." />
<button type="submit" class=search-button><img src="{% static 'icons\icons8_search.png' %}"
alt="search"></button>
</div>
</div>
<nav>
<div class=mobile-only>
<ul class=navul>
<li>
<b></b>
</li>
<li>
<b></b>
</li>
{% if request.user.is_authenticated %}
<li>
<b></b>
</li>
<li>
</li>
<li>
<b></b>
</li>
{% else %}
<li>
<b></b>
</li>
<li>
<b></b>
</li>
{% endif %}
</ul>
</div>
</nav>
</header>
<div class=line2></div>
<main id=main>
{% if messages %}
<ul class="messages">
{% for message in messages %}
<li {% if message.tags %} class="{{ message.tags }}" {% endif %}>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% block extra_js %}{% endblock extra_js %}
{% block body %}
{% endblock body %}
</main>
</body>
<script src="{% static 'js/jquery.mini.js' %}"></script>
<script src="{% static 'js/dropdown.js' %}"></script>
<script>
setTimeout(function(){
var message_ele = document.getElementsByClassName("messages")[0];
message_ele.style.visibility = 'hidden';
message_ele.style.opacity = 0;
message_ele.style.transition= "visibility 0s 2s, opacity 2s linear";
}, 2000);
setTimeout(function(){
var message_ele = document.getElementsByClassName("errorlist")[0];
message_ele.style.visibility = 'hidden';
message_ele.style.opacity = 0;
message_ele.style.transition= "visibility 0s 2s, opacity 2s linear";
}, 2000);
function kapat(id){
var geri=document.getElementById(id);
geri.style.display="none";
$('body').css('overflow', 'scroll');
}
$("#overlay6").click(function (e) {
if(e.target !== e.currentTarget) return;
$("#overlay6").css("display","none")
$('body').css('overflow', 'scroll');
});
$("#overlay3").click(function (e) {
if(e.target !== e.currentTarget) return;
$("#overlay3").css("display","none")
$('body').css('overflow', 'scroll');
});
$("#overlay7").click(function (e) {
if(e.target !== e.currentTarget) return;
$("#overlay7").css("display","none")
$('body').css('overflow', 'scroll');
});
</script>
{% block javascript %}{% endblock %}
</html>
I'm using Django but for some reason the <h2> tag displays article.title with no problem but the <p> tag won't display anything - even simple text.
{% extends 'base_layout.html' %}
{% block content%}
<h1>Articles List</h1>
<div class="articles">
{% for article in articles %}
<div class="article">
<h2>{{ article.title}}</h2>
<p>TEST TEXT</p>
<p>{{ article.date }}</p>
</div>
{% endfor %}
</div>
{% endblock %}
the base_layout.html is
{% load static from staticfiles %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Carpe Nocturn</title>
<link rel="stylesheet" href="{% static 'styles.css' %}">
</head>
<body>
<header class="wrapper">
<h1><img src="{% static 'logo.png' %}" alt="Carpe Nocturn" /></h1>
</header>
<div class="wrapper">
{% block content %}
{% endblock %}
</div>
</body>
</html>
I'm creating a website and it works fine when i use direct html. Now i want to use Jinja2 to render my template and there is something wrong. You can see that there is a blank space on top of my page here http://kgroupman.azurewebsites.net/ but it works fine with firefox. Inspect element do not point out that blank section and there is no padding or margin and there is nothing wrong with the source. Please help!
Here is the code:
base.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>
{% block page_title %}{% endblock %}
</title>
<!--BASE CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="{{url_for('static', filename='css/base.css')}}" />
<!--ADDITIONAL CSS-->
{% block additional_css %}
{% endblock %}
<!--BASE SCRIPT-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--ADDITIONAL SCRIPT-->
{% block additional_script %}
{% endblock %}
</head>
<body>
<section class="header">
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><span><img src="{{url_for('static', filename='imgs/4logo.png')}}" id="logo"></span></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right"></ul>
</div>
</div>
</nav>
</section>
<section class="body">
<div class="left-panel">
{% block body_left %}
{% endblock %}
</div>
<div class="right-panel">
{% block body_right %}
{% endblock %}
</div>
</section>
<section class="footer">
<span>#Ngo Tuan Khoa - 2016</span>
</section>
</body>
</html>
login.html
{% extends "base.html" %}
{% block page_title %}Đăng nhập | Quản lý nhóm{% endblock %}
{% block additional_css %}
<link rel="stylesheet" href="{{url_for('static', filename='css/login.css')}}" />
{% endblock %}
{% block additional_script %}
<script src="../static/script/login.js"></script>
{% endblock %}
{% block body_left %}
<div class="login-form">
<p><img id="login-icon" src="{{url_for('static', filename='imgs/user.jpg')}}"></p>
<form action="" method="POST">
<p>Tên đăng nhập</p>
<p><input type="text" class="input-field" placeholder="Username"></p>
<p>Mật khẩu</p>
<p><input type="password" class="input-field" placeholder="Password"></p>
<p><input type="button" class="btn-login" value="Đăng nhập"></p>
</form>
</div>
{% endblock %}
{% block body_right %}
<img src="{{url_for('static', filename='imgs/wall.jpg')}}" height="100%" class="img-responsive">
{% endblock %}
It's a character at the top of your body
Solution found. Delete login.html and recreate it. There's must be an invisible character that i can't see somehow!
I'm trying to learn Django using the online version of the "Test-Driven Development with Python" book. I have a base.html file and home.html and list.html file. Now, CSS works fine for home.html, but not at all for list.html! They both extend their CSS from the base.html file, so why is there a problem? Here are the files:
base.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>To-Do lists</title>
<link href="static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="text-center">
<h1>{% block header_text %}{% endblock %}</h1>
<form method="POST" action="{% block form_action %}{% endblock %}">
<input name="item_text" id="id_new_item" placeholder="Enter a to-do item"/>
{% csrf_token %}
</form>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
{% block table %}
{% endblock %}
</div>
</div>
</div>
</body>
</html>
home.html:
{% extends 'base.html' %}
{% block header_text %}Start a new To-Do list{% endblock %}
{% block form_action %}/lists/new{% endblock %}
list.html:
{% extends 'base.html' %}
{% block header_text %}Your To-Do list{% endblock %}
{% block form_action %}/lists/{{ list.id }}/add_item{% endblock %}
{% block table %}
<table id="id_list_table">
{% for item in list.item_set.all %}
<tr><td>{{ forloop.counter }}: {{ item.text }}</td></tr>
{% endfor %}
</table>
{% endblock %}
It's probably something silly, but anyway, thank you!
Instead of using hard coded
CSS links
<link href="static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
Use Django Template Tags:
Or you can also use below if you list.html is rendering yoursite.com/list/
<link href="../static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
if yoursite.com/something/list/ then use;
<link href="../../static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
index.html
<html>
<head>
<link href="static/style.css" rel="stylesheet" type="text/css" />
<title>I want to</title>
</head>
<body>
{% block header %}
<div id="header-wrap"></div>
{% endblock %}
<div id="container">
{% block error %} {% endblock %}
{% block content %}{% endblock %}
</div>
</body>
</html>
page.html
{% extends 'index.html' %}
{% if error %}
{% block error %}
{{ error }}
{% endblock %}
{% endif %}
{% block content %}
<p><b>Page</b>: {{ page.language }}</p>
<p>views: {{ page.page_views}}</p>
<form action='/suggest' method='post'>
<textarea name='suggest' rows='10' cols='100'></textarea>
<input type='hidden' name='page_name' value={{ page.language }}>
<input type='submit' value='suggest'>
</form>
{% for suggestion in suggestions %}
<p>Suggestion: {{ suggestion.text }}</p>
<p>Votes: {{ suggestion.votes }}</p>
{% endfor %}
{% endblock %}
views.py returns
return render_to_response('page.html', {'page': page, 'suggestions': suggestions})
Problem:
- when I see the home page(index.html), header seems correctly placed(everything is good)
- when I see specific page, header not appearing, when I firebug-ed it, I found the link tag contains the entire index.html inside it
<head>
<link type="text/css" rel="stylesheet" href="static/style.css">
<html>
<head>
<link href="static/style.css" rel="stylesheet" type="text/css" />
<title>I want to learn</title>
</head>
<body>
<div id="header-wrap"></div>
<div id="container">
<a href=/page/python>python</a>
<a href=/page/page1>page1</a>
<a href=/page/page1>page2</a>
<a href=/page/page3>page3</a>
</div>
</body>
</html>
</link>
how can I fix this issue?
Just fixed it :
- path to stylesheet on pages was relative(static/style.css) and NOT absolute(*/*static/style.css). Making absolute path makes it work
<head>
<link type="text/css" rel="stylesheet" href="/static/style.css">
<html>