I have created an app which has the index.html which is the main page and when I run "py manage.py runserver" command it opens the index page. Then I created another app for home page and added urls, created views and everything as far as I know. But when I click "home" it navigates to "http://127.0.0.1:8000/static/home.html" and says "Page not found(404)" and "'home.html' could not be found" I will paste my code below
webapp\settings.py:
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'tbs',
'tbs_home'
]
webapp\urls.py:
urlpatterns = [
path('', include('tbs.urls')),
path('tbs_home', include('tbs_home.urls')),
path('admin/', admin.site.urls)
]
tbs_home\urls.py:
urlpatterns = [
path('home',views.home, name='home')
]
tbs_home\views.py:
def home(request):
return render(request, 'home.html')
templates\home.html:
{% extends 'index.html' %}
{% load static%}
{% block content%}
<h1 style = "font-family:Georgia;font:40px;font-style:normal;">Hi! {{name}}</h1>
<form action="add" method="POST">
{% csrf_token %}
Enter 1st num : <input type="text" name="num1"><br>
Enter 2nd num : <input type="text" name="num2"><br>
<input type="submit">
</form>
{% endblock %}
templates\index.html:
This is the part where "home.html" link is given in "index.html" page
<div class="col-xs-10 text-right menu-1">
<ul>
<li class="active">Home</li>
I think I've provided the necessary code snippets, thank you for your help in advance. I should be able to navigate to home page from index page when I click the home button.
in tbs_home\urls.py:
change that to :
urlpatterns = [
path('home/',views.home, name='home'),# adding comma is important
]
webapp\urls.py: urlpatterns = [path('', include('tbs.urls')),
path('tbs_home/', include('tbs_home.urls')),
path('admin/', admin.site.urls), # adding comma is important
]
Change installed apps to:
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
Replace the static tag with the url tag
<li class="active">Home</li>
The part in front the ':' tells django which app to look into and the part after the ':' says which url to use. The static tag points it to your staticfiles directory which you don't want
In the tbs_home\urls.py, add the app_name
app_name = 'tbh_home'
urlpatterns = [
path('home',views.home, name='home')
]
And in the webapp\urls.py, add a trailing backslash to the url like:
urlpatterns = [
path('tbs_home/', include('tbs_home.urls')),
path('admin/', admin.site.urls)
]
Related
I have to give a link to the homepage which happens to be the login page of my website, from an app's template, that is:
<small style="margin-top: 5px;">To loginClick Here</small>
Now, the problem in the URL tag is that the link is available in the root urls.py:
urlpatterns = [
path('admin/', admin.site.urls),
path('', views.login, name='login'),
]
How do I do this?
I managed to do it like this. There is a 'bboard' application, the login and info views are in the application. In the urls.py file (the configuration folder where the settings.py file is located) I register the import of the application with the desired view:
from bboard.views import login
Replace bboard with the name of your application everywhere.
urls.py(configuration folder)
from bboard.views import login
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('bboard.urls')),
path('login/', login, name='login'),
]
urls.py(application)
from django.urls import path
from .views import *
urlpatterns = [
path('info/', info, name='info'),
]
views.py
def login(request):
return HttpResponseNotFound("<h2>12345</h2>")
def info(request):
return render(request, 'bboard/templ.html')
templates
Link
I m trying to animate a list which is made with ngFor. When dynamically a new item is added to the array, i want to have the animation bellow. Somehow i cant get this rolling effect. Any ideas what am i doing wrong ?
#Component({
selector: 'widget',
templateUrl: './widget.component.html',
styleUrls: ['./widget.component.scss'],
animations: [
trigger('slideInOut', [
transition(':enter', [
style({transform: 'translateY(-100%)'}),
animate('800ms ease-in-out', style({transform: 'translateY(0%)'}))
])
])
]
})
html
<div *ngFor="let winner of widgetService.winners; let i = index"
class="winners__item" [#slideInOut]>
<img [src]="winner.imageUrl" alt="{{ winner.gameName }}">
<div class="block__container--first">
<div class="block__container--first--gameName">{{winner.gameName}}</div>
<div class="block__container--first--firstName">{{winner.firstName}}</div>
</div>
<div class="block__container--second">
<div class="block__container--second--timestamp">{{winner.timestamp}}m ago</div>
<div class="block__container--second--winning">{{winner.amount}} €</div>
</div>
</div>
[![enter image description here][1]][1]
what i have:
[![enter image description here][2]][2]
what i tried:
animations: [
trigger('slideInOut', [
transition(':enter', [
style({marginTop: '-100px'}),
animate('800ms ease-in-out', style({transform: 'translateY(0%)'}))
])
])
]
The elements jump down because the new element takes the first place. transform: translate() does not change the place behavior of the element, but only the visible position, without affecting other elements.
So to actual change the space of all elements, we need something like margin.
animations: [
trigger('slideInOut', [
transition(':enter', [
style({marginTop: '-100%'}),
animate('800ms ease-in-out', style({marginTop: '0px'}))
])
])
]
With this, the new item is placed above the list and pushes all following elements down when it moves.
I need the title to show the (current date - 1)
When I hard code a value eg "17"
This is where the component is displaying (in index)
{% include 'home/key-facts' with {
content: {
keyFactsHeading: entry.keyFactsHeading,
keyFacts: entry.keyFacts,
keyFactsSmall: entry.keyFactsSmall,
}
Which is this file here --->
This is how I've included the date
{% include '_components/bg-type' with {
content: {
title: {{ "now"|date('Y') - 1 }}
},
} only %}
I am passing content.title into here --->
<div class="bg-type">
<div class="bg-type__text bg-type--large">
{{ content.title }}
</div>
</div>
When hardcoding the value as below it works fine but when I add
title: {{ "now"|date('Y') - 1}} I get a 500 error.
{% include '_components/bg-type' with {
content: {
title: 17
},
} only %}
Why is this? Can you also explain why what I'm trying doesn't work?
I've tried dumping {{ "now"|date('Y') - 1}} and I can see the year I want
The {{ ... }} notation is used to output data. In this case you only want to pass data towards an include. Notice you already inside a twig-statement, {% include .... %}
The correct syntax would be
{% include '_components/bg-type' with {
content: {
title: "now"|date('Y') - 1,
},
} only %}
I'm developing a chrome extension and I want to display in the popup (when a user click extension icon) a page that has an url of localhost, in this page I will check if a user is logged in my site and depend on status I will display content in the page.
So I tried these:
First:
create a popup.html (that doesn't contain the iframe)
in popup.js create an iframe and give it an src, width, height. than append it to the body.
Second:
in the popup.html add the iframe with the src of localhost.
in popup.js create an iframe and give it an src, width, height. than append it to the body.
Neither the first nor the second works. and I get this:
But when I use a normal site in src, like http://bing.com it works and show the page of bing.com
This is a MVCE example that I developed:
The HTML files are:
index.html is the file that is served through the web server
<html>
<body>
<h1>Hello World!</h1>
</body>
</html>
popup.html is the extension popup content
<html>
<body>
<div id="container">
</div>
<script src="content.js"></script>
</body>
</html>
with the manifest for the extension:
manifest.json
{
"manifest_version": 2,
"name": "Test Popup",
"version": "0.1",
"browser_action": {
"default_title": "Popup Test",
"default_popup": "popup.html"
},
"permissions": [
"tabs", "<all_urls>"
],
"content_scripts": [
{
"matches": [
"http://*/*"
],
"js": [
"content.js"
]
}
]
}
All you need is a server for the external file to include, I used ruby:
serve.rb
require 'webrick'
s = WEBrick::HTTPServer.new(:Port => 8888, :DocumentRoot => Dir.pwd).start
All the magic happens in the content javascript:
content.js
function addiframe() {
div = document.getElementById("container");
var frame = document.createElement('iframe');
frame.setAttribute('width', '500px');
frame.setAttribute('height', '500px');
frame.setAttribute('frameborder', '0');
frame.setAttribute('id', 'inject');
frame.setAttribute('src', 'http://localhost:8888');
div.appendChild(frame);
};
addiframe();
and this is an image that shows the result:
I'm building a little Spotify app that displays tweets from the current Artist playing. I'm using Bocoup's jQuery Twitter plugin to grab and display the tweets: http://code.bocoup.com/jquery-twitter-plugin/
MANIFEST.JSON
{
"BundleType": "Application",
"AppIcon": {
"18x18": "tutorial.png"
},
"AppName": {
"en": "News"
},
"SupportedLanguages": [
"en"
],
"RequiredPermissions": [
"http://twitter.com"
"http://*.twitter.com"
"http://*.twimg.com"
],
"VendorIdentifier": "com.News",
"RequiredInterface": "1",
"BundleVersion": "0.2",
"BundleIdentifier": "News",
"AppName": "News",
"AppDescription": "Twitter updates from the Artist playing."
}
From the Index file:
<script type="text/javascript">
$(document).ready(function() {
$('#tweets').twitter({from: 'mediatemple', replies: false})
launch();
});
</script>
</head>
<body>
<div id="info">
</div>
<div id="news">
</div>
<div id="tweets">
</div>
</body>
Nothing displays in Spotify when I open my app, but if I open the index.html file in a browser, the tweets appear. What am I missing?
The RequiredPermissions JSON needs commas.
try:
"RequiredPermissions": [
"http://twitter.com",
"http://*.twitter.com",
"http://*.twimg.com"
],
Things fail silently if there is a problem in the manifest. Always use a JSON linter (http://jsonlint.com/) to verify at least the format is proper JSON.
UPDATE: After any changes to manifest.json you must restart Spotify.