NoReverseMatch, reverse for login not found error - javascript

I am trying to send an AJAX post request to a view but I am getting an Http500 error for some reason.
Here is the AJAX function:
function update_coins() {
$.ajax({
method: "POST",
url: "/coins",
data: {"coins": transaction},
success: function(data) {
console.log('yay')
$( ".status" ).contents()[0].textContent = "Balance: " + data.coins
}
})
};
and I copy+pasted the necessary Django CSRF code above it.
The error I am getting is:
django.urls.exceptions.NoReverseMatch: Reverse for 'login' not found. 'login' is not a valid view function or pattern name.
"POST /coins HTTP/1.1" 500 59
I'm guessing that this has something to do with my urls.py.
Here is my root app's urls.py:
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^home$', views.home, name='home'),
url(r'^coins$', views.update_coins, name='coins'),
url(r'^shop', include('shop.urls', namespace='shop')),
url(r'^users/', include('users.urls', namespace='users')),
url(r'^oauth/', include('social_django.urls', namespace='social')),
]
Here is my shop app's urls.py:
urlpatterns = [
url(r'^', views.shop, name='shop'),
]
and finally my users app's urls.py
urlpatterns = [
url(r'^login/$', views.login_view, name='login'),
url(r'^logout/$', views.logout_view, name='logout'),
url(r'^change-password/$', views.change_password, name='change_password'),
url(r'^register/$', views.register, name='register'),
]
Thank you!
EDIT 1: Added templates
The base html:
<!DOCTYPE html>
{% load staticfiles %}
<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>{% block title %}{% endblock %}</title>
<link rel="shortcut icon" href="{% static 'assets/favicon.png' %}"/>
<link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">
<link href="{% static 'css/font-awesome.css' %}" rel="stylesheet">
<link href="{% static 'css/bootstrap-social.css' %}" rel="stylesheet">
<link href="{% static 'base.css' %}" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Aladin" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Noto+Serif" rel="stylesheet">
{% block head-extras %}{% endblock %}
</head>
<body>
<nav class="navbar navbar-toggleable-md bg-white">
<div class="container">
<a href="/home" class="navbar-brand">
<h1 id="logo" class="nav-wel">Pomodoro</h1>
</a>
{% if request.user.is_authenticated %}
<span class="status">Balance: {{ request.user.profile.coins }}<img class="coin-img" src="{% static 'assets/coin.png' %}" height="40px" width="auto"></span>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle welcome nav-wel" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" id="welcome">Welcome {{ user.get_username }}</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="/shop">Shop</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Leaderboard</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/users/change-password">Change Password</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/users/logout">Logout</a>
</div>
</li>
</ul>
{% endif %}
</div>
</nav>
{% block content %}
{% endblock %}
<script src="{% static 'js/jquery-3.2.1.js' %}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="{% static 'js/bootstrap.js' %}"></script>
<script src="{% static 'js/pomodoro.js' %}"></script>
</body>
</html>
The shop html:
<!DOCTYPE html>
{% extends "base.html" %}
{% load staticfiles %}
{% block title %}Pomodoro{% endblock %}
{% block content %}
{% if request.GET.success %}
<div class="modal" id="logout-modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="alert alert-success main" role="alert">
<p><b>You have successfully changed your password.</b></p>
</div>
</div>
</div>
</div>
</div>
{% endif %}
<audio id="coin-sound">
<source src="{% static 'assets/coin.mp3' %}">
</audio>
<div class="row centre-v">
<div class="card clock-card">
<div class="card-block">
<span class="motivation">Work hard, play hard.</span>
<div class="clock-timer" id="clock-timer">
<span class="minutes"></span>:<span class="seconds"></span>
</div>
<div class="options">
<button class="btn btn-success btn-lg start-pomodoro">Start Pomodoro</button>
<button class="btn btn-info btn-lg start-break1 hidden">Start Break</button>
<button class="btn btn-info btn-lg start-break2 hidden">Start Break</button>
<button class="btn btn-danger btn-lg reset hidden">Reset</button>
</div>
</div>
</div>
</div>
{% endblock %}
EDIT 2: My views.py:
#login_required(login_url='/users/login')
def update_coins(request):
"""
Function based view for increasing/decreasing a user's coin balance
"""
try:
user = request.user
except User.DoesNotExist:
raise Http404("No user matches the given query.")
if request.is_ajax() and request.method=='POST':
amount = request.POST.get("coins", 5)
user.profile.coins += amount
user.save()
return JsonResponse({'coins': user.profile.coins})
else:
raise Http404


It could be that your user app urls are overwriting the default login reverse view. Try renaming the login url name in users app's urls.py to something else and see if that works.

Related

Login modal content from another page with flask wtf on top of Bootstrap, how to get form answer?

I'm new to HTML programming so I'll try to describe my problem the best I can.
This is adapted from Miguel Grinberg's Flask tutorial, using Boostrap 4.6, through quite a good amount of research.
My pages are extended from a base template. My base contain a link to a login modal page, which is getting its content from a separate HTML file. I'm using Flask WTF for this login modal page. When I go to login and click on the "Sign Up" button, seems like it reloads the page I am.
I think its sending the form.submit answer to that page's route (in VS Code's terminal, it says there is a POST to /index for example), so the question is how can I get the 'Sign In' button answer to the login route? I've found answers to something alike this question, but not similar enough to implement them.
(Relevant) routes.py:
from app import app, db
from app.models import User, Notification, Rule
from flask import render_template, flash, redirect, url_for, request, g, jsonify
from flask_login import current_user, login_user, logout_user, login_required
from app.forms import LoginForm, RegistrationForm, RuleForm
#app.route('/')
#app.route('/index', methods=['GET', 'POST'])
def index():
if not current_user.is_authenticated:
current_user.username="Guest User"
return render_template('index.html', title='Home')
#app.route('/login', methods=['GET', 'POST'])
def login_modal():
print("login_modal init")
if current_user.is_authenticated:
return redirect(url_for('index'))
form = LoginForm()
if form.validate_on_submit():
print("validate form")
user = User.query.filter_by(username=form.username.data).first()
if user is None or not user.check_password(form.password.data):
flash('Invalid username or password!', 'warning')
return redirect(url_for('login'))
login_user(user, remember=form.remember_me.data)
flash('Successfull login!', 'success')
return redirect(url_for('index'))
return render_template('login-modal.html', title='Sign In', form=form)
This is my base:
<!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, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<!-- Custom fonts for this template-->
<link href="{{ url_for('static', filename='fontawesome-free/css/all.min.css') }}" rel="stylesheet" type="text/css">
<link
href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
rel="stylesheet">
<!-- Custom styles for this template-->
<link href="{{ url_for('static', filename='css/notificationservice.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/dataTables.bootstrap4.min.css') }}" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/gh/Eonasdan/tempus-dominus#master/dist/css/tempus-dominus.css"
rel="stylesheet" crossorigin="anonymous">
<!-- Bootstrap core JavaScript-->
<script src="{{ url_for('static', filename='js/jquery/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='bootstrap-v4.6.0-dist/js/bootstrap.bundle.min.js') }}"></script>
<script src="{{ url_for('static', filename='bootstrap-v4.6.0-dist/js/bootstrap.min.js') }}"></script>
<!-- Core plugin JavaScript-->
<script src="{{ url_for('static', filename='js/jquery-easing/jquery.easing.min.js') }}"></script>
<!-- Custom scripts for all pages-->
<script src="{{ url_for('static', filename='js/notificationservice.min.js') }}"></script>
<!-- Page level plugins -->
<script src="{{ url_for('static', filename='js/jquery/jquery.dataTables.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/dataTables.bootstrap4.min.js') }}"></script>
<!-- Page level custom scripts -->
<script src="{{ url_for('static', filename='js/datatables-demo.js') }}"></script>
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='smartphone.ico') }}">
<title>Notification Service - {{title}}</title>
</head>
<body id="page-top">
<!-- Page Wrapper -->
<div id="wrapper">
<!-- Sidebar -->
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
<!-- Sidebar - Brand -->
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="{{url_for('index')}}">
<div class="sidebar-brand-icon">
<i class="fas fa-satellite-dish"></i>
</div>
<div class="sidebar-brand-text mx-3">Notification Service</div>
</a>
<!-- Divider -->
<hr class="sidebar-divider">
<!-- Nav Item - Notifications -->
<li class="nav-item">
<a class="nav-link" href="{{url_for('notifications')}}">
<i class="fas fa-bullhorn"></i>
<span >Notifications</span></a>
<p></p>
</li>
<!-- Divider -->
<hr class="sidebar-divider d-none d-md-block">
<!-- Nav Item - Rules -->
<li class="nav-item">
<a class="nav-link" href="{{url_for('rules')}}">
<i class="fas fa-scroll"></i>
<span>Rules</span></a>
<p></p>
</li>
{%if current_user.username == 'admin' %}
<!-- Divider -->
<hr class="sidebar-divider">
<!-- Nav Item - Manage Accounts -->
<li class="nav-item">
<a class="nav-link" href="{{url_for('accounts')}}">
<i class="fas fa-tools"></i>
<span>Manage Accounts</span></a>
<p></p>
</li>
<!-- Divider -->
<hr class="sidebar-divider">
<!-- Nav Item - Manage Accounts -->
<li class="nav-item">
<a class="nav-link" href="{{url_for('rules_configure')}}">
<i class="fas fa-tools"></i>
<span>Configure Rules</span></a>
<p></p>
</li>
{% endif %}
<!-- Divider -->
<hr class="sidebar-divider d-none d-md-block">
<!-- Sidebar Toggler (Sidebar) -->
<div class="text-center d-none d-md-inline">
<button class="rounded-circle border-0" id="sidebarToggle"></button>
</div>
</ul>
<!-- End of Sidebar -->
<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column">
<!-- Main Content -->
<div id="content">
<!-- Topbar -->
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
<div class="container" style="display:flex;justify-content:center;">
<div class="container" style="display:inline;text-align:center;width:auto;">
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
{% if category == 'message' %}
<div class="alert alert-primary alert-dismissible" id="alert" role="alert"
style="margin-bottom: 0rem;">
{% else %}
<div class="alert alert-{{ category }} " id="alert" role="alert"
style="margin-bottom: 0rem;">
{% endif %}
{{ message }}
</div>
{% endfor %}
{% endif %}
{% endwith %}
</div>
</div>
<!-- Sidebar Toggle (Topbar) -->
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
<i class="fa fa-bars"></i>
</button>
<!-- Topbar Navbar -->
<ul class="navbar-nav ml-auto">
<div class="topbar-divider d-none d-sm-block"></div>
<!-- Nav Item - User Information -->
<li class="nav-item dropdown no-arrow">
<a class="nav-link dropdown-toggle" id="userDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="mr-2 d-none d-lg-inline text-gray-600 small">{% if current_user.is_authenticated %}
{{current_user.username}}{%else%}Guest User{% endif %}</span>
<div class="sidebar-brand-icon">
{% if current_user.is_authenticated %}
<i class="fas fa-user-check fa-2x"></i>
{%else%}
<i class="fas fa-user-times fa-2x"></i>
{% endif %}
<!--<i class="fas fa-user-check fa-2x"></i>-->
</div>
</a>
{% if current_user.is_authenticated %}
<!-- Dropdown - User Information -->
<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in"
aria-labelledby="userDropdown">
<a class="dropdown-item" href="{{url_for('profile', username=current_user.username)}}">
<i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
Profile
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{{url_for('logout')}}" data-toggle="modal" data-target="#logoutModal">
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
Logout
</a>
</div>
{% else %}
<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in"
aria-labelledby="userDropdown">
<a class="dropdown-item" href="{{url_for('login_modal')}}" data-toggle="modal"
data-target="#loginModal">
<i class="fas fa-sign-in-alt fa-sm fa-fw mr-2 text-gray-400"></i>
Login
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{{url_for('register')}}">
<i class="fas fa-book fa-sm fa-fw mr-2 text-gray-400"></i>
Register
</a>
</div>
{%endif%}
</li>
</ul>
</nav>
<!-- End of Topbar -->
<!-- Begin Page Content -->
<div class="container-fluid">
{% block app_content %}
{% endblock %}
</div>
</div>
<!-- End of Main Content -->
<!-- Footer -->
<footer class="sticky-footer bg-white">
<div class="container my-auto">
<div class="copyright text-center my-auto">
<span>NS 2022 ©</span>
</div>
</div>
</footer>
<!-- End of Footer -->
</div>
<!-- End of Content Wrapper -->
</div>
<!-- End of Page Wrapper -->
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
<!-- Login Modal-->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
</div>
</div>
</div>
<!-- Logout Modal-->
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-primary" href="{{url_for('logout')}}">Logout</a>
</div>
</div>
</div>
</div>
<script>
$('body').on('click', '[data-target="#loginModal"]', function(){
$($(this).data("target")+' .modal-content').load($(this).attr('href'));
});
</script>
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function() {
$('#alert').fadeOut('slow');
}, 3000); // <-- time in milliseconds
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#sidebarToggle").click(function(e) {
e.preventDefault();
$("#accordionSidebar").toggleClass("toggled");
$('#accordionSidebar.toggled').find("#sidebar").find(".collapse").collapse('hide');
});
});
</script>
</body>
</html>
This is my index.html:
{% extends 'base.html' %}
{% set active_page = "index" %}
{% block app_content %}
<h1 class="header_text">Some content...</h1>
{% endblock %}
The login page:
<div class="card-body p-0">
<!-- Nested Row within Card Body -->
<div class="row">
<div class="col-lg-12">
<div class="p-5">
<div class="text-center">
<h1 class="h4 text-gray-900 mb-4">Login</h1>
</div>
<form class="user" action="" method="post" id="loginForm" novalidate>
<div class="form-group has-validation">
<div>
{{ form.username(class="form-control form-control-user" +
(" is-invalid" if form.username.errors else ""), placeholder="Username",
id="inputValUsername", size=32, **{"aria-describedby": "inputValUsername",
"required": ""}) }}
</div>
{% for error in form.username.errors %}
<div class="text-danger">
<small>{{ error }}</small>
</div>
{% endfor %}
</div>
<div class="form-group has-validation">
<div>
{{ form.password(class="form-control form-control-user" +
(" is-invalid" if form.password.errors else ""), placeholder="Password",
id="inputValPassword", size=32, **{"aria-describedby": "inputValPassword",
"required": ""}) }}
</div>
{% for error in form.password.errors %}
<div class="text-danger">
<small>{{ error }}</small>
</div>
{% endfor %}
</div>
<div class="form-group">
<div class="custom-control custom-checkbox small">
{{ form.remember_me(class="form-check-input") }} {{ form.remember_me.label }}
</div>
</div>
{{ form.submit(class="btn btn-primary btn-user btn-block", id='form-submit') }}
</form>
<hr>
<div class="text-center">
<a class="small" href="{{url_for('forgot')}}">Forgot Password?</a>
</div>
<div class="text-center">
<a class="small" href="{{url_for('register')}}">Create an Account!</a>
</div>
<div class="text-center">
<a class="small" href="{{url_for('index')}}">Back to Notification Service Home</a>
</div>
</div>
</div>
</div>
</div>

In your form html element change action="" to action="/login"

How to handle JS script with Django template language?

I'm trying to use Django template language to manipulate JS scripts, but when I try appears the following error
I checked the error in case there is a miss typed code, but I couldn't detect it.
How is the best way to handle multiple JS script with multiple HTML files in Django template language?
Infraestructura.html
{% extends "Portafolio/layout.html" %}
{% block scripts %}
<script src = "{% static 'Portafolio/scriptinfra.js' %}" type="text/javascript"></script>
{% endblock %}
{% block content %}
<form class="form mt-5" id="infra">
<h1>Factibilidad Técnica y Operativa</h1>
<h2>Análisis de Infraestructura</h2>
<main class="container">
<section class="row">
<div class="col-lg-4 mb-2">
<input name='infs' class="form-control" type="text" placeholder="Infraestructura">
</div>
<div class="col-lg-4 mb-2">
<input name='time' class="form-control" type="text" placeholder="Tiempo">
</div>
<div class="col-lg-4 mb-2">
<input name='cost' class="form-control" type="text" placeholder="Costo Mensual">
</div>
</section>
</main>
<nav class="btn-group">
<button id='add' class='btn btn-success' type='button'>
<i class="fa fa-plus-square"></i> Añadir
</button>
<button id='rem' class='btn btn-danger' type='button'>
<i class="fa fa-minus-square"></i> Eliminar
</button>
</nav>
</form>
<form class="form mt-3">
<div class="d-grid gap-2 mt-3">
<a class="btn btn-lg btn-primary" href="tecnicoequipo.html">Siguiente</a>
</div>
<div class="d-grid gap-2 mt-3">
<a class="btn btn-lg btn-primary" href="financierobeneficio.html">Atrás</a>
</div>
</form>
{% endblock %}
layout.html
{% load static %}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href= "{% static 'Portafolio/style.css' %}">
{% block scripts %} <script src="{% static 'Portafolio/scriptinfra.js' %}" type="text/javascript"></script> {% endblock}
<title>{% block title %} {% endblock %}</title>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>

You have to load static at the top of your HTML document in your Infraestructura.html
like this
{% extends "Portafolio/layout.html" %}
{% load static %}

Cant figure out infinite scrolling with Waypoints

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.

image not displaying on the navbar with django include tag

I created a nav.html template,css.html template and js.html template. then i used the include template tag to render them in my base.html template.
(nav.html)
{% load staticfiles %}
<div class="container-fluid">
<nav class="navbar navbar-dark bg-primary py-1">
<a class="navbar-brand mb-0 h1" href="#">
<img src="{% static 'profiles/logo.png' %}" width="30" height="30" class='d-inline-block align-top' alt=""/>Hot-Minet Services Ltd
</a>
</nav>
</div>
(css.html)
link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
(js.html)
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
(base.html)
{% load staticfiles %}
<!Doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
{% include "snippets/css.html" %}
<title>{% block title %}My amazing site{% endblock %}</title>
</head>
<body>
{% include "snippets/nav.html" %}
<br>
{% block form %}
<div class="container">
<div class="row justify-content-md-center">
<div class="col-sm-6">
<form action="" method="POST">{% csrf_token %}
{{ form.as_p }}
<button type="button" class="btn btn-primary btn-lg">Save</button>
</form>
</div>
</div>
</div>
{% endblock %}
{% include "snippets/js.html" %}
</body>
</html>
(home.html)
{% extends "base.html" %}
{% block form %}
<div class="container">
<div class="row justify-content-md-center">
<div class="form-group col-sm-4">
<form action="/update/slug/" method="GET">
<input class="pt-3 form-control" type="text" name="" value="" placeholder="Type client name here"/>
<br>
<input class="btn btn-primary pt-2 mb-5" type="submit" value="Update"/>
</form>
</div>
</div>
</div>
{% endblock %}
(settings.py)
STATIC_URL = '/static/'
if DEBUG:
MEDIA_URL = '/media/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static' 'static-alone')
MEDIA_ROOT = os.path.join(BASE_DIR, 'static' 'media')
STATICFILES_DIR = [
os.path.join(BASE_DIR, "static" 'profiles'),
]
(urls.py)
from django.conf.urls import url, include
from django.conf import settings
from django.conf.urls.static import static
from django.contrib import admin
from profiles.views import(
home,
SendMail,
Add,
resultsPageView,
profileUpdate,
)
urlpatterns = [
#
# Examples:
# url(r'^$', 'myproject.views.home', name='home'),
# url(r'^blog/', include('blog.urls')),
url(r'^admin/',admin.site.urls),
url(r'^home/',home),
url(r'^SendMail/', SendMail.as_view(), name='SendMail'),
url(r'^Add/', Add.as_view(), name='Add'),
url(r'^results/', resultsPageView.as_view(), name='results'),
url(r'^update/(?P<slug>[\w-]+)/$', profileUpdate.as_view(), name='update'),
]
if settings.DEBUG:
urlpatterns +=static(settings.STATIC_URL,document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
everything is working fine but the logo in the navbar does not display can someone identify what am doing wrong here Thanks.

Django-JS-fade in menu don't work

I started a project on Django.
In one of my app, I did a template with a two menu, one black one white with fade in and fade out (using semantic ui )
here the code
<!-- Menu fixe -->
<div class="ui large top fixed hidden menu" >
<div class="ui container">
<a class="active item" id="acc_menu">Accueil</a>
<a class="item">Comment ça marche </a>
<a class="item">Vous voyagez ?</a>
<!-- <a class="item">besoin 1</a> -->
<div class="right item">
<a class="ui inverted red button" id="connexction1">Connecxion</a>
<a class="ui inverted red button" id="inscription1">Inscription</a>
</div>
</div>
</div>
<!-- Menu noir -->
<div class="pusher">
<div class="ui inverted segment" id="menu_fixe">
<div class="ui container">
<div class="ui large secondary inverted pointing menu">
<a class="active item" id="acc_menu">Accueil </a>
<a class="item">Comment ça marche </a>
<a class="item">Vous voyagez ?</a>
<!-- <a class="item">besoin 1</a> -->
<div class="right item">
<a class="ui inverted red button" id="connexction">Se connecter</a>
<a class="ui inverted red button" id="inscription">S'inscrire</a>
</div>
</div>
</div>
</div>
</div>
{% block extrahead %}
<! -- other loading --!>
<script src="{% static 'js/base.js' %} "></script>
<link rel="stylesheet" type="text/css" href="{% static 'css/base.css' %} "/>
{% endblock %}
with this js file : base.js
$(document).ready(function() {
// fix menu when passed
$('#menu_fixe')
.visibility({
once: false,
onBottomPassed: function() {
$('.fixed.menu').transition('fade in');
},
onBottomPassedReverse: function() {
$('.fixed.menu').transition('fade out');
}
})
;
})
;
that work fine,but when I add a slider on a homepage, with the template linked the fade in - fade out don't work anymore!
here my homepage code:
<!DOCTYPE html>
{% extends "home/base.html" %}
{% load static %}
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
</head>
<body>
{% block content %}
<!-- SLIDERSHOW -->
<ul class="skdslider">
<li>
<img src=" {% static 'img/slide/metro.jpg' %}" />
</li>
<li>
<img src=" {% static 'img/slide/preparation gateau.jpg' %}" />
</li>
<li>
<img src=" {% static 'img/slide/travelling-with-suitcase.jpg' %}" />
</li>
<li>
<img src=" {% static 'img/slide/velo.jpg' %}" />
</li>
<li>
<img src=" {% static 'img/slide/metro.jpg' %}" />
</li>
<li>
<img src=" {% static 'img/slide/more-travel-teddies-series.jpg' %}" />
</li>
</ul>
{% block extrahead %}
{{block.super}}
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="{% static 'js/accueil.js' %} "></script>
<link rel="stylesheet" type="text/css" href="{% static 'css/accueil.css' %} "/>
{% endblock %}
{% endblock %}
I have another js file : "accueil.js" for the slideshow and it's work fine.
all my setting are good too :
STATIC_URL = '/static/'
STATICFILES_DIRS = (BASE_DIR + '/static',)

Categories

Resources