navbar links , such as about and contact, don't work - python
Can anyone tell me please how I can fix my navbar link problem in the code below? I tried almost everything, and read all related StackOverflow article and sort of things but can't figure it out!
nothing happens when I click on about or contact
I REALLY appreciate if someone has a clue or any idea that could be helpful for me!
thanks in advance
<!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>Welcome</title>
<!-- Bootstrap core CSS -->
{% load staticfiles %}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="{% static 'personal/css/bootstrap.min.css' %}" rel="stylesheet" />
<link href="{% static 'personal/css/navbar-static-top.css' %}" rel="stylesheet">
<link href="{% static 'personal/css/custom.css' %}" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- NAVBAR
================================================== -->
<div class="container">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{% url 'home' %}"><img src="{% static 'personal/img/mvp_landing_logo.png' %}" /></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Tutorial</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
</div>
<!-- Use a container to wrap the slider, the purpose is to enable slider to always fit width of the wrapper while window resize -->
<div class="container">
<!-- Jssor Slider Begin -->
<!-- To move inline styles to css file/block, please specify a class name for each element. -->
<!-- ================================================== -->
<script src="{% static 'personal/js/jquery-1.9.1.min.js' %}"></script>
<script src="{% static 'personal/js/jssor.slider.mini.js' %}"></script>
<script>
jssor_slider1_starter = function (containerId) {
//Reference http://www.jssor.com/development/slider-with-slideshow-no-jquery.html
//Reference http://www.jssor.com/development/tool-slideshow-transition-viewer.html
var _SlideshowTransitions = [
//Fade
{ $Duration: 3200, $Opacity: 2 }
];
var options = {
$SlideDuration: 800, //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
$DragOrientation: 3, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $Cols is greater than 1, or parking position is not 0)
$AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
$Idle: 1500, //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
$SlideshowOptions: { //[Optional] Options to specify and enable slideshow or not
$Class: $JssorSlideshowRunner$, //[Required] Class to create instance of slideshow
$Transitions: _SlideshowTransitions, //[Required] An array of slideshow transitions to play slideshow
$TransitionsOrder: 1, //[Optional] The way to choose transition to play slide, 1 Sequence, 0 Random
$ShowLink: true //[Optional] Whether to bring slide link on top of the slider when slideshow is running, default value is false
}
};
var jssor_slider1 = new $JssorSlider$(containerId, options);
}
</script>
<div id="slider1_container" style="visibility: hidden; position: relative; margin: 0 auto; width: 1140px; height: 442px; overflow: hidden;">
<!-- Loading Screen -->
<div u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
background-color: #000; top: 0px; left: 0px;width: 100%; height:100%;">
</div>
<div style="position: absolute; display: block; background: url(/static/personal/img/loading.gif) no-repeat center center;
top: 0px; left: 0px;width: 100%;height:100%;">
</div>
</div>
<!-- Slides Container -->
<div u="slides" style="position: absolute; left: 0px; top: 0px; width: 1140px; height: 442px;
overflow: hidden;">
<div>
<img u="image" src="{% static 'personal/img/01.jpg' %}" />
<div>
</div>
<img u="image" src="{% static 'personal/img/02.jpg' %}" />
</div>
<div>
<img u="image" src="{% static 'personal/img/03.jpg' %}" />
</div>
<div>
<img u="image" src="{% static 'personal/img/04.jpg' %}" />
</div>
</div>
<a style="display: none" href="http://www.jssor.com">content slider</a>
<!-- Trigger -->
<script>
jssor_slider1_starter('slider1_container');
</script>
<!--#region Bullet Navigator Skin Begin -->
<!-- Help: http://www.jssor.com/tutorial/set-bullet-navigator.html -->
<style>
/* jssor slider bullet navigator skin 05 css */
/*
.jssorb05 div (normal)
.jssorb05 div:hover (normal mouseover)
.jssorb05 .av (active)
.jssorb05 .av:hover (active mouseover)
.jssorb05 .dn (mousedown)
*/
.jssorb05 {
position: absolute;
}
.jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {
position: absolute;
/* size of bullet elment */
width: 16px;
height: 16px;
background: url(static/personal/img/b05.png) no-repeat;
overflow: hidden;
cursor: pointer;
}
.jssorb05 div { background-position: -7px -7px; }
.jssorb05 div:hover, .jssorb05 .av:hover { background-position: -37px -7px; }
.jssorb05 .av { background-position: -67px -7px; }
.jssorb05 .dn, .jssorb05 .dn:hover { background-position: -97px -7px; }
</style>
<!-- bullet navigator container -->
<div u="navigator" class="jssorb05" style="bottom: 16px; right: 6px;">
<!-- bullet navigator item prototype -->
<div u="prototype"></div>
</div>
<!--#endregion Bullet Navigator Skin End -->
<!--#region Arrow Navigator Skin Begin -->
<!-- Help: http://www.jssor.com/tutorial/set-arrow-navigator.html -->
<style>
/* jssor slider arrow navigator skin 11 css */
/*
.jssora11l (normal)
.jssora11r (normal)
.jssora11l:hover (normal mouseover)
.jssora11r:hover (normal mouseover)
.jssora11l.jssora11ldn (mousedown)
.jssora11r.jssora11rdn (mousedown)
*/
.jssora11l, .jssora11r {
display: block;
position: absolute;
/* size of arrow element */
width: 37px;
height: 37px;
cursor: pointer;
background: url(static/personal/img/a11.png) no-repeat;
overflow: hidden;
}
.jssora11l { background-position: -11px -41px; }
.jssora11r { background-position: -71px -41px; }
.jssora11l:hover { background-position: -131px -41px; }
.jssora11r:hover { background-position: -191px -41px; }
.jssora11l.jssora11ldn { background-position: -251px -41px; }
.jssora11r.jssora11rdn { background-position: -311px -41px; }
</style>
<!-- Arrow Left -->
<span u="arrowleft" class="jssora11l" style="top: 123px; left: 8px;">
</span>
<!-- Arrow Right -->
<span u="arrowright" class="jssora11r" style="top: 123px; right: 8px;">
</span>
<!--#endregion Arrow Navigator Skin End -->
<a style="display: none" href="http://www.jssor.com">Bootstrap Carousel</a>
</div>
<!-- Jssor Slider End -->
</div>
<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
<div class="container marketing">
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">This page runs Bootstrap with Jssor Slider.</h2>
<p class="lead">Use Jssor Slider as a compoment of Bootstrap is extremly easy. Given a slider you worked out, to integrate it with Bootstrap, you can just copy javascript and html code and paste it into your page. This page is a simple demo, please view source of this page or download Bootstrap Carousel Slider Example.</p>
</div>
<div class="col-md-5">
<img class="featurette-image img-responsive" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div>
</div>
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-5">
<img class="featurette-image img-responsive" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div>
<div class="col-md-7">
<h2 class="featurette-heading">Javascript Code</h2>
<div class="lead" style="background-color:#f0f0f0; border: 1px dashed #000; white-space: nowrap;">
<pre style="margin:0px;">
<script type="text/javascript" src="../js/jssor.slider.mini.js"></script>
<script>
jQuery(document).ready(function ($) {
var options = {
..
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
...
});
</script></pre>
</div>
</div>
</div>
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">HTML Code</h2>
<div class="lead" style="background-color:#f0f0f0; border: 1px dashed #000; white-space: nowrap;">
<pre style="margin:0px;">
<div class="container">
<!-- Jssor Slider Begin -->
<div id="slider1_container" style="visibility: hidden; position: relative; margin: 0 auto; width: 980px; height: 380px; overflow: hidden;">
...
</div>
<!-- Jssor Slider End -->
</div></pre>
</div>
</div>
<div class="col-md-5">
<img class="featurette-image img-responsive" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div>
</div>
<hr class="featurette-divider">
<!-- /END THE FEATURETTES -->
<!-- FOOTER -->
<footer>
<p class="pull-right">Back to top</p>
<p>© Jssor Slider 2009 - 2016. · Privacy · </p>
</footer>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="{% static 'personal/js/jquery-1.9.1.min.js' %}"></script>
<script src="{% static 'personal/js/bootstrap.min.js' %}"></script>
<script src="{% static 'personal/js/docs.min.js' %}"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="{% static 'personal/js/ie10-viewport-bug-workaround.js' %}"></script>
<!-- jssor slider scripts-->
<!-- use jssor.slider.debug.js for debug -->
<script src="{% static 'personal/js/jssor.slider.mini.js' %}"></script>
<script>
jQuery(document).ready(function ($) {
var options = {
$AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
$AutoPlaySteps: 1, //[Optional] Steps to go for each navigation request (this options applys only when slideshow disabled), the default value is 1
$Idle: 2000, //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
$PauseOnHover: 1, //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, 4 freeze for desktop, 8 freeze for touch device, 12 freeze for desktop and touch device, default value is 1
$ArrowKeyNavigation: true, //[Optional] Allows keyboard (arrow key) navigation or not, default value is false
$SlideEasing: $Jease$.$OutQuint, //[Optional] Specifies easing for right to left animation, default value is $Jease$.$OutQuad
$SlideDuration: 800, //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
$MinDragOffsetToSlide: 20, //[Optional] Minimum drag offset to trigger slide , default value is 20
//$SlideWidth: 600, //[Optional] Width of every slide in pixels, default value is width of 'slides' container
//$SlideHeight: 300, //[Optional] Height of every slide in pixels, default value is height of 'slides' container
$SlideSpacing: 0, //[Optional] Space between each slide in pixels, default value is 0
$Cols: 1, //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
$Align: 0, //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0.
$UISearchMode: 1, //[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc).
$PlayOrientation: 1, //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, 5 horizental reverse, 6 vertical reverse, default value is 1
$DragOrientation: 1, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $Cols is greater than 1, or parking position is not 0)
$ArrowNavigatorOptions: { //[Optional] Options to specify and enable arrow navigator or not
$Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance
$ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
$Steps: 1 //[Optional] Steps to go for each navigation request, default value is 1
},
$BulletNavigatorOptions: { //[Optional] Options to specify and enable navigator or not
$Class: $JssorBulletNavigator$, //[Required] Class to create navigator instance
$ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
$Steps: 1, //[Optional] Steps to go for each navigation request, default value is 1
$Rows: 1, //[Optional] Specify lanes to arrange items, default value is 1
$SpacingX: 12, //[Optional] Horizontal space between each item in pixel, default value is 0
$SpacingY: 4, //[Optional] Vertical space between each item in pixel, default value is 0
$Orientation: 1 //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1
}
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizing
function ScaleSlider() {
var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
if (parentWidth) {
jssor_slider1.$ScaleWidth(parentWidth - 30);
}
else
window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
});
</script>
</body>
</html>
<!-- end snippet -->
new added info
my directori looks like:
mysite:
--settings.py
--urls.py
personsl:
--urls.py
--views.py
templates:
--header.html
--about.html
mysite.urls lools like:
from django.conf.urls import url, include
from django.contrib import admin
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^', include('personal.urls')),
url(r'^blog/', include('blog.urls')),
url(r'^about/$', 'personal.views.about', name='about'),
url(r'^contact/$', 'personal.views.contact', name='contact'),
-------------------------
personal.urls looks like:
from django.conf.urls import url, include
from . import views
urlpatterns = [
url(r'^$', views.home, name='home'),
url(r'^$', views.contact, name='contact'),
]
-----------------------------
personal.views looks like:
from django.shortcuts import render
from .forms import ContactForm
from django.core.mail import EmailMessage
from django.shortcuts import redirect
from django.template import Context
from django.template.loader import get_template
def home(request):
return render(request, 'templates/home.html')
def about(request):
return render(request, 'templates/about.html', {})
def contact(request):
form_class = ContactForm
####
hope these help me :)
It seems like you defined 2 different url patterns for the same name ('contact'), and also 2 names could match the same pattern ('home' and 'contact' would match an empty string).
I think your urls should look like this:
mysite.urls
from django.conf.urls import url, include
from django.contrib import admin
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^blog/', include('blog.urls')),
# other urls...
url(r'^', include('personal.urls')) # leave this last, because it matches anything. This way, it's easier for you to make the match
]
personal.urls
from django.conf.urls import url, include
from . import views
urlpatterns = [
url(r'^about/$', views.about, name='about'),
url(r'^contact/$', views.contact, name='contact'),
url(r'^$', views.home, name='home')
]
Related
Adding CSS loader to HTML button click
I'm trying to add a "loader" while my flask application runs a task.
Here is my HTML for for my button
{% extends "base.html" %}
{% block head %}
{# <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles/leaf.css') }}"> #}
{% endblock %}
{% block content %}
<div id="loader"></div>
<div id="vo_budget_file_settings">
{# Upload Final CRO Budget File #}
<p>Please upload the final CRO budget File</p>
<form class="" action="/generatecleanbudgetfile" method=POST enctype=multipart/form-data>
<input type="file" name="data_file" accept=".xls, .xlsx, .xlsm"/>
<input type="submit" value="Begin Format" onclick="loading();"/>
</form>
</div>
<script type="text/javascript">
function loading(){
$("#loader").show();
}
</script>
{% endblock %}
Here is the CSS that I've added:
#loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
Any ideas on how to call this correctly?
Make it visible from the start, without ever showing it with javascript. Then hide it with js like so:
$(document).ready(() => {
$("#loader").hide();
})
EDIT: I now realize you said on button click in the title. I am assuming you want to hide the loading screen on button click? If not correct me in a comment. Otherwise, use this code:
$("#button").click(() => {
$("#loader").hide();
})
P.S.
Your script should be at the bottom of the body, and your CSS and JS (and my code) reference #loader, when the body has <div id="loading">
Styling django MultiSelectField
I want to create multipleselecetfild that each selection referin to each choice appears below the image.
I used the django MultiSelectField to create a form to have multiple select options.
These are my files:
models.py
class Profile(models.Model):
cat_choices = (
('Internships', 'Internships'),
('Scholarships', 'Scholarships'),
('EntranceExams', 'EntranceExams'),
)
category=MultiSelectField(choices=cat_choices,default='none')
profile.html
<!DOCTYPE html>
<html>
<body>
<style>
div.item {
vertical-align: top;
display: inline-block;
margin-right: 50px;
text-align: center;
width: 120px;
}
img {
background-color: grey;
}
.caption {
display: block;
}
</style>
<div class="item">
<img src="internship.png">
<span class="caption"><input type="checkbox" name="Internship" value="Internship"></span>
</div>
<div class="item">
<img src="jobs.png">
<span class="caption"><input type="checkbox" name="Jobs" value="Jobs"></span>
</div>
<div class="item">
<img src="scholarship.png">
<span class="caption"><input type="checkbox" name="Scholarship" value="Scholarship"></span>
</body>
</html>
I created a form called profile_form with the category field.
In html, I wanted my form to appear with an image on the top and just a check button below the image, with the check button refering to each cat_choices in the category. Something like this
!In the image I used html to display it.
How do I write this html page in django such that each check button refering to each choice appears below the image?
django-easy_pdf display pdf number
I am using django-easy_pdf to reder pdf for my reports and would like to know how to display a page footer.
In the django-easy_pdf's source code this piece of code is used to display the page number
<div id="footerContent">
{%block page_foot%}
<pdf:pagenumber />
{%endblock%}
</div>
What I would like to know is:
How to display the footer properly
Start with page number 1
As I have copied the code, it does not display as a footer and the page starts with 0
What am I missing?
UPDATE
I tried this code from here but I can't make it work, seems useful though
<html>
<head>
<style>
.footer { position: fixed; bottom: 0px; }
.pagenum:before { content: counter(page); }
</style>
</head>
<body>
<div class="footer">Page: <span class="pagenum"></span></div>
</body>
</html>
UPDATE 2
I now know what I did wrong, I was missing the #page css and that is why It's not working, I only have the #frame footer
The correct CSS:
#page {
size: {{ pagesize }};
margin: 1cm;
#frame footer {
-pdf-frame-content: footerContent;
bottom: 0cm;
margin-left: 18cm;
margin-right: 0cm;
height: 1cm;
}
}
Then just call it normally(the first snippet)
To display footer correctly make sure that in your template in css styles you have:
#frame footer {
-pdf-frame-content: footerContent;
}
-pdf-frame-content should be pointig to id of your footer container.
You can add the next code in your tempate:
{%block page_foot%}
<div style="display: block;margin: 0 auto;text-align: center;">
page: <pdf:pagenumber />
</div>
{%endblock%}
redirect certain user to certain view in django
i need to know how to redirect the user in Django views to a certain page after he logs in. let's say we have 3 types of users and 3 types of pages, i want each type to be directed to a certain page, and in the same time doesn't has the permission to view the other pages.
You can do something like this: from django.http import HttpResponseRedirect from django.core.urlresolvers import reverse from django.contrib.auth.decorators import login_required #login_required def home(request): return HttpResponseRedirect( reverse(custom_view, args=[request.user.username])) Here, custom_view should be your user specific view. This is assuming you have: LOGIN_REDIRECT_URL = '/profiles/home' and you have configured a urlpattern: (r'^profiles/home', 'myapp.views.home') You can add a check for account type and redirect to the correct view.
I wrote some similar functionality recently by sub-classing the LoginView provided by django.contrib.auth. Okay, make your first page from the root directory, call it login:
python manage.py startapp login. Make this file exist <projectRoot>/login/templates/registration/login.html Add this code inside said file, it's more or less cut and pasted from bootstrap's login form, but with some standard django template language to bind to the expected AuthenticationForm fields.
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Signin to yourWebsite.com</title>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body class="text-center">
<form class="form-signin" method="post" action="{% url 'login' %}?next=clockin">
{% csrf_token %}
<img class="mb-4" src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<label for="inputEmail" class="sr-only">Email address</label>
<!--input id="inputEmail" class="form-control" placeholder="Email address" required="True" autofocus="" type="email"-->
{{form.username}}
<label for="id_password" class="sr-only">Password</label>
{{form.password}}
<!--input id="inputPassword" class="form-control" placeholder="Password" required="True" type="password"-->
<div class="checkbox mb-3">
<label>
<input value="remember-me" type="checkbox"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
<p class="mt-5 mb-3 text-muted">© 2018</p>
</form>
</body>
</html>
<script>
$("#id_password").attr({
"class":"form-control",
"placeholder":"Password",
"required":"True",
"type":"password",
});
$("#id_username").attr({"class":"form-control",
"placeholder":"Email address",
"required":"True",
"type":"email",
});
</script>
<style>
html,
body {
height: 100%;
}
body {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-align: center;
-ms-flex-pack: center;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: 0 auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
</style>
Next, subclass the built in view and override the redirect part. Inside login.views.py, add this:
from django.contrib.auth.views import LoginView
class CustomLoginview(LoginView):
def get_redirect_url(self):
if self.request.user.groups.filter(name="customer").exists():
return 'invoice'
return super().get_redirect_url()
Finally, update urls.py:
from login.views import CustomLoginview
urlpatterns = [
path('', CustomLoginview.as_view(), name='login'),
I'm telling the login page to go to my next app 'invoice' if the user is a customer, otherwise it goes to the default that I specified in the settings file. Obviously you could expound upon the concept for 3 types of users, which is different than routing based on the names of users, not sure how that got 2 upvotes.
Django Template Not Rendered by Browser
I am attempting to set up django view for my web application which redirects the page once a file upload is complete, and the status bar showing the upload progress reaches 100%. I have looked around online and attempted to do this in several ways but nothing seems to be working. When I use
render(request, 'template_name')
The application simply returns the plain text of 'template_name' to the console rather than rendering it in the browser window. The original page of the loading bar stays in place after this plain text is returned.
My view looks like the following
def barUpdate(request):
importid = request.GET.get('impid')
response_data = {}
import_status_dict = get_import_status(importid)
status_id = import_status_dict['returnval']
import_status_info = import_status_dict['data_row']
import_status_info = import_status_info[0]
total_rows = import_status_info['total_data_rows']
rows_analyzed = import_status_info['number_of_rows_analyised']
if status_id != 2:
if (rows_analyzed != None and total_rows != None):
percent_complete = int((float(rows_analyzed)/total_rows)*100)
response_data['value'] = percent_complete
if 'percent_complete' in locals():
if response_data['value'] >= 100:
#return render(request,'statustool/completed.html',{'importid':importid,'username':username,'failedparameters':new_failed_param_group,'failedsources':failed_sources,'failedparametergroups':failed_parameters_group,'failedsitegroups':failed_sites_group,'sources':get_sources(), 'failedunits':failed_units})
#Right here I would like to render a new template in my browser, although this is just a dummy template I created for testing
return render(request,'statustool/test.html')
response = HttpResponse(json.dumps(response_data), content_type="application/json")
return response
else:
response_data['value'] = 0
response = HttpResponse(json.dumps(response_data), content_type="application/json")
return response
My dummy template is the following which contains no variables to be passed in from the view
<html>
<head>
test
</head>
<body>
<h1>Finished with data insert!</h1>
</body>
</html>
Is there something I am missing?
If it helps, the current page with the status bar looks like the following and uses a javascript function called status to make GET requests every second to find the upload status for the status bar
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>CACW: Status - Processing</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<!-- Le styles -->
<link href="{{ STATIC_URL }}css/bootstrap.css" rel="stylesheet">
<link href="{{ STATIC_URL }}css/boostrap-responsive.css" rel="stylsheet">
<style>
body,html{
padding-top: 30px; /* 60px to make the container go all the way to the bottom of the topbar */
}
.container{
min-height:100%;
}
.footer{
height:40px;
margin-top:-25px;
}
.barcontainer{
width: 100px;
color: blue;
}
progress {
background-color: whiteSmoke;
border-radius: 2px;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset;
width: 250px;
height: 20px;
position: relative;
display: block;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/d3examples.js"></script>
<script type="text/javascript">
var importNum = {{importid}}
function status(){
var barProgress = window.setInterval("getProgress(importNum);", 1000);
}
var url=api_server_address+"import/status/update/";
var getProgress = function(importid) {
$.ajax({
url: "https://cacw.luc.edu/status/update/",
data: { impid: importid },
type: "GET",
dataType: "json"
})
.done(function(data){
$('#progressBar').val(data['value']);
console.log(data);
});
}
</script>
</head>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">CACW</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>Wiki</li>
<li>Contact</li>
</ul>
<a class="btn btn-primary pull-right" href="/logout">Logout</a>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<body onload="status({{importid}});">
<div class="container">
<div class="page-header">
<p><h2>Import {{ importid }} Status.</h2></p>
{{percent_complete}}
<progress id="progressBar" value={{status}} max="100"></progress>
</div>
</div>
<div class="footer">
<div class="navbar-fixed-bottom">
<hr>
<div class = "container" style="text-align: center">
<p> Help - Information - Contact - Wiki <p>
<img src="{{ STATIC_URL }}img/luc_logo.jpg"></img>
</div>
</div>
</div>
</body>
</html>
Since you are just getting the data in an AJAX call, this will never update your page (from the server side). What you can do is add a flag/object/parameter to your servers response to indicate when the upload is done, then on the client side, redirect to that location when the upload is finished.
Server side:
# code shortened a bit... continues from after line defining percent complete
response_data['value'] = percent_complete if 'percent_complete' in locals() else 0
response_data['done'] = response_data['value'] >= 100
return HttpResponse(json.dumps(response_data), content_type="application/json")
Client Side:
var getProgress = function(importid) {
$.ajax({
url: "https://cacw.luc.edu/status/update/",
data: { impid: importid },
type: "GET",
dataType: "json"
})
.done(function(data) {
if(data['done']) {
// I forget if this is how to do a redirect but it's where you put it
location.href('whatever/your/url/is');
} else {
$('#progressBar').val(data['value']);
console.log(data);
}
});
}