Filtering multicheckbox on datable - javascript

I have a problem with my code, I try to make a datable with multiple checkbox filter on Django environment.
I have tried multiple code, but for now, I have this code, for each column there is a list and I can check or not the checkbox, but the filter is not applied.
Here's the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/fixedheader/3.2.3/css/fixedHeader.dataTables.min.css"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
.dropdown-menu {
max-height: 200px;
overflow-y: auto;
}
</style>
</head>
<body>
<h1>Liste des matches</h1>
<table id="table_id" class="display">
<thead>
<tr>
<th>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownPAYSEQP" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
PAYSEQP
</button>
<div class="dropdown-menu" aria-labelledby="dropdownPAYSEQP">
{% for match in matches %}
<div class="form-check">
<input class="form-check-input" type="checkbox" value="{{ match.PAYSEQP }}" id="{{ match.PAYSEQP }}">
<label class="form-check-label" for="{{payseqp}}">
{{ match.PAYSEQP }}
</label>
</div>
{% endfor %}
</div>
</div>
</th>
<th>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownJOUEURS" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
JOUEURS
</button>
<div class="dropdown-menu" aria-labelledby="dropdownJOUEURS">
{% for match in matches %}
<div class="form-check">
<input class="form-check-input" type="checkbox" value="{{ match.JOUEURS }}" id="{{ match.JOUEURS }}">
<label class="form-check-label" for="{{joueur}}">
{{ match.JOUEURS }}
</label>
</div>
{% endfor %}
</div>
</div>
</th>
<th>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownNMATCHS" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
NMATCHS
</button>
<div class="dropdown-menu" aria-labelledby="dropdownNMATCHS">
{% for match in matches %}
<div class="form-check">
<input class="form-check-input" type="checkbox" value="{{ match.NMATCHS }}" id="{{ match.NMATCHS }}">
<label class="form-check-label" for="{{nmatch}}">
{{ match.NMATCHS }}
</label>
</div>
{% endfor %}
</div>
</div>
</th>
<th>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMINTOTAL" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
MINTOTAL
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMINTOTAL">
{% for match in matches %}
<div class="form-check">
<input class="form-check-input" type="checkbox" value="{{ match.MINTOTAL }}" id="{{ match.MINTOTAL }}">
<label class="form-check-label" for="{{mintotal}}">
{{ match.MINTOTAL }}
</label>
</div>
{% endfor %}
</div>
</div>
</th>
</tr>
</thead>
<tbody>
{% for match in matches %}
<tr>
<td>{{ match.PAYSEQP }}</td>
<td>{{ match.JOUEURS }}</td>
<td>{{ match.NMATCHS }}</td>
<td>{{ match.MINTOTAL }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<script>
$(document).ready(function(){
$(document).ready(function() {
var table = $('#table_id').DataTable();
$('input[type="checkbox"]').on('change', function() {
var colIndex = $(this).closest('th').index();
var values = [];
$('input[type="checkbox"]:checked').each(function() {
values.push($(this).val());
});
if (values.length > 0) {
table.column(colIndex).search(values.join('|'), true, false).draw();
} else {
table.column(colIndex).search('').draw();
}
});
});
</script>
</body>
</html>
It's been two days that I've been struggling with this.

Related

Twitter-Bootstrap 5 carousel indicators and controls not working. Why?

I am making a ecommerce website with Django framework.
I cannot make my bootstrap carousel work. Clicking on indicators and controls has no effect.
I have pulled in Bootstrap source files with NPM.
main.html
<!DOCTYPE html>
{% load static %}
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="{% static 'css/main.css' %}" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>
{% block title %}
{% endblock title %}
</title>
</head>
<body class="mt-sm-5 mt-md-5 mt-lg-5 mt-xl-5">
<header>
<div class="container border-bottom border-primary border-1">
</div>
</header>
<section class="page-content" id="page-content">
{% block content %}
{% endblock content %}
</section>
<script src="{% static 'js/bootstrap.js' %}"></script>
</body>
</html>
product_details.html
{% extends 'main.html' %}
{% load static %}
{% block title %}
Boutique - {{ product.title }}
{% endblock title %}
{% block content %}
<div class="container">
<div class="row" >
<div id="product-carousel" class="col-sm-12 col-md-6 border border-danger carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#product-carousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
{% if product.image2 %}
<button type="button" data-bs-target="#product-carousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
{% endif %}
{% if product.image3 %}
<button type="button" data-bs-target="#product-carousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
{% endif %}
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="{{ product.image.url }}" class="img-fluid" alt="...">
</div>
{% if product.image2 %}
<div class="carousel-item">
<img src="{{ product.image2.url }}" class="img-fluid" alt="...">
</div>
{% endif %}
{% if product.image3 %}
<div class="carousel-item">
<img src="{{ product.image3.url }}" class="img-fluid" alt="...">
</div>
{% endif %}
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#product-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#product-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="col-sm-12 col-md-6 border border-warning">
<h3> {{ product.title }} </h3>
<h4> {{ product.price }} € </h4>
<h5> {{ product.description }} </h5>
<h6> {{ product.category }} </h6>
{% if product.stock > 0 %}
<div class="container border border-success">
<div class="row" >
<div class="col">
<label for="select-qty">Quantity</label>
</div>
<div class="col">
<select class="form-select form-select-sm" aria-label=".form-select-sm example" id="select-qty">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div class="col">
<button id="add-to-cart-button" value="{{ product.id }}" type = "button" class="btn btn-success">Ajouter au panier</button>
</div>
</div>
</div>
{% endif %}
<div class="container">
<div class="row" >
<div class="col-sm-12 col-md-6">
<a class="btn btn-dark" href="{% url 'basket:basket_summary' %}">Panier</a>
</div>
<div class="col-sm-12 col-md-6">
<a class="btn btn-light" href="{% url 'store:all_products' %}">Voir les produits</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// Add to cart
$(document).on('click', '#add-to-cart-button', function (e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: '{% url "basket:basket_add" %}',
data: {
productid: $('#add-to-cart-button').val(),
productqty: $('#select-qty option:selected').val(),
csrfmiddlewaretoken: "{{csrf_token}}",
action: 'post',
},
success: function (json) {
document.getElementById("cart-count").innerHTML = json.qty;
},
error: function (xhr, errmsg, err) {
},
});
})
</script>
<script type="text/javascript">
$(function(){
$('#product-carousel').carousel();
});
</script>
{% endblock content %}
The products have at least to images (image and image 2) and the controls and indicators show. But nothing happens when clicking on them.
EDIT
In the browser console, I have two errors.
Uncaught SyntaxError: import declarations may only appear at top level of a module
Uncaught TypeError: $(...).carousel is not a function

You are getting an Uncaught TypeError: $(...).carousel is not a function because you called that function before you loading the boostrap.js.
Give this a try, first load the boostrap.js (you can load it from your local)
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
then add your custom script
<script type="text/javascript">
$(function(){
$('#product-carousel').carousel();
});
</script>

django error: cart.js:4 Uncaught TypeError: updateBtns[i].addEventListner is not a function at cart.js:4

I have never worked with js until now and i keep getting this error
cart.js:4 Uncaught TypeError: updateBtns[i].addEventListner is not a function
at cart.js:4
I have searched it and none of the answers that i used helped.
cart.js
var updateBtns = document.getElementsByClassName('update-cart')
for (var i = 0; i < updateBtns.length; i++) {
updateBtns[i].addEventListner('click', function(){
var productId = this.dataset.products
var action = this.dataset.action
console.log('productId: ', productId, 'action: ', action)
})
}
store.html
{% extends 'store/main.html' %}
{% load static %}
{% block content %}
<div class="row">
<form method="GET" action=".">
<div class="row">
<div class="column">
<button type='submit' class='btn btn-primary btn2'>Search</button>
</div>
<div class="column">
<input type="text" name="search" class="form-control" placeholder="search" />
</div>
</div>
</form>
</div>
<div class="row">
{% for product in products %}
<div class="col-lg-4">
<img class="thumbnail" src="{{ product.imageURL }}">
<div class="box-element product">
<h6><strong>{{ product.name }}</strong></h6>
<hr>
<button data-product={{product.id}} data-action="add" class="btn btn-outline-secondary add-btn update-cart">Add to Cart</button>
<a class="btn btn-outline-success" href="#">View</a>
<h4 style="display: inline-block; float: right"><strong>R{{ product.price|floatformat:2 }}</strong></h4>
</div>
</div>
{% endfor %}
</div>
{% endblock content %}
part of store.html
<button data-product={{product.id}} data-action="add" class="btn btn-outline-secondary add-btn update-cart">Add to Cart</button>
i am using python django and trying to make a cart system for my ecom store

Update only one element inside same div classes using jQuery

I am trying to update the DOM, whenever a user likes a post and displays the number of likes on a post. However, I realized my function will update all the classes on the pages and not only the certain post being liked (When a user clicks on thmbs up, all the thumbs up buttons change to dumbs down)
my function for changing the like:
function like_post() {
// newly added
$('#like-section #likeBtn').on("click", function (e) {
e.preventDefault();
if($("#like-section #likeBtn i").hasClass("fa-thumbs-up")){
($("#like-section #likeBtn i").removeClass("fa-thumbs-up"))
($("#like-section #likeBtn i").addClass("fa-thumbs-down"))
} else {
($("#like-section #likeBtn i").removeClass("fa-thumbs-down"))
($("#like-section #likeBtn i").addClass("fa-thumbs-up"))
}
});
// end
}
my posts HTML template in Django:
{% load static %}
<link rel="stylesheet" href="{% static 'css/post/style.css' %}">
<script src="{% static 'js/like-api.js' %}"></script>
<script src="{% static 'js/post.js' %}"></script>
{% for post in posts %}
<script>
$(document).on('click', '.post-detail-clickable-details-view', function () {
var url = $(this).attr("data-url")
document.location.href = url
});
</script>
<div class="row ml-2">
<div class="col-sm-2">
<div class="float-right mb-3 mt-3">
<div>
<img class="img-create-post rounded-circle mr-2" src="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg"
alt="Profile image">
</div>
<div>
<p class="text-muted post-card-date small mr-2">{{ post.get_created_on }} ago</p>
</div>
</div>
</div>
<div class="col-md-10" style="margin-left: -1.6rem;">
<div class="card rounded-0 mb-3 mt-3">
<div class="card-header bg-transparent" style="height: 3rem;">
<h5 style="margin-bottom: 0px;">
<a class="text-dark" style="text-decoration: none;" href="{% url 'home:post-detail' post.guid_url %}">{{ post.title }}</a>
<span class="small text-muted">#{{ post.author.username }}</span>
</h5>
</div>
<div class="card-body post-detail-clickable-details-view text-dark" data-url="{% url 'home:post-detail' post.guid_url %}"
style="margin-top:-0.5rem;">
<a id="post-detail-view-link" href="{% url 'home:post-detail' post.guid_url %}"></a>
<p class="mr-1 text-dark font-weight-bolder">{{ post.author.first_name }} {{ post.author.last_name }}</p>
<p class="card-text pt-2" style="margin-top: -0.9rem;">{{ post.content }}</p>
</div>
<hr style="margin: 0;">
<div class="d-flex align-items-center justify-content-between" >
<div class="row mx-1">
<div id="like-section" class="px-1">
{% include 'home/posts/likes.html' with post=post %}
</div>
<div class="px-1">
<a class="btn btn-md" href="{% url 'home:post-detail' post.guid_url %}">
<span class="text-secondary">
<i class="fas fa-comment"></i> {{ post.comments.count }}
</span>
</a>
</div>
</div>
<div>
<a class="btn btn-md" href="#">
<span class="text-secondary">
<i class="fas fa-share-square"></i>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
{% empty %}
<div class="d-flex justify-content-center">
<h5 class="h5 font-weight-lighter my-3 text-muted">No posts to show</h5>
</div>
{% endfor %}
my likes.html:
{% load static %}
<!-- static file were here -->
{% if request.user.is_authenticated %}
<script src="{% static 'js/post.js' %}"></script>
<script src="{% static 'js/comment.js' %}"></script>
<form action="{% url 'home:post-like' post.id %}" method="POST">
{% csrf_token %}
{% if request.user in post.likes.all or is_liked %}
<button type="submit" id="likeBtn" data-url="{% url 'home:post-like' post.guid_url %}" data-token="{{ csrf_token }}" name="post_id" value="{{ post.id }}" class="btn btn-md">
<span class="text-secondary">
<i class="fas fa-thumbs-down"></i>
<span id="like-count">
{{ post.likes.count }}
</span>
<input type="hidden" id="input-like-count" value=" {{ post.likes.count }} " />
</span>
</button>
{% else %}
<button type="submit" id="likeBtn" data-url="{% url 'home:post-like' post.guid_url %}" data-token="{{ csrf_token }}" name="post_id" value="{{ post.id }}" class="btn btn-md">
<span class="text-secondary">
<i class="fas fa-thumbs-up"></i>
<span id="like-count">
{{ post.likes.count }}
</span>
<input type="hidden" id="input-like-count" value=" {{ post.likes.count }} " />
</span>
</button>
{% endif %}
</form>
<div class="modal fade" id="modal-post-detail">
<div class="modal-dialog modal-dialog-scrollable modal-md adjusted-modal-detail">
<div class="modal-content"></div>
</div>
</div>
{% endif %}
my plan is to change the display for a user so there is no need to refresh the page and update the number of counts as well before refreshing the page. But currently, all the #likeBtn elements are being updated and not the one for the single post. How can I update the button of the post being liked only?
EDIT: I updated my jQuery to this, and it's still not working:
$('#like-section #likeBtn').on("click", function (e) {
e.preventDefault();
if($(this).find("#i").hasClass("fa-thumbs-up")){
($(this).find("i").removeClass("fa-thumbs-up").addClass("fa-thumbs-down"))
} else {
($(this).find("i").removeClass("fa-thumbs-down").addClass("fa-thumbs-up"))
}
});
EDIT: jsfiddle link: https://jsfiddle.net/mf0xvpho/1/
This seems to be working now

Consider the following example.
Fiddle: https://jsfiddle.net/Twisty/2hg60be3/13/
HTML
<div class="like-section">
<button type="submit" class="likeBtn btn btn-md">
<span class="text-secondary">
<i class="red">Button</i>
<span class="like-count">
3
</span>
</span>
</button>
</div>
<div class="like-section">
<button type="submit" class="likeBtn btn btn-md">
<span class="text-secondary">
<i class="blue">Button</i>
<span class="like-count">
2
</span>
</span>
</button>
</div>
<div class="like-section">
<button type="submit" id="likeBtn" class="btn btn-md">
<span class="text-secondary">
<i class="red">Button</i>
<span class="like-count">
1
</span>
</span>
</button>
</div>
JavaScript
$(function() {
$('.like-section').on("click", ".likeBtn", function(e) {
var like_count = parseInt($(".like-count", this).text());
e.preventDefault();
if ($("i", this).hasClass("blue")) {
like_count++;
$("i", this).removeClass("blue").addClass("red");
$(".like-count", this).text(like_count);
} else {
like_count--;
$("i", this).removeClass("red").addClass("blue");
$(".like-count", this).text(like_count);
}
});
});
Using classes will allow you to group elements. You can use .find() or shorthand, $("i", this). It's the same as $(this).find("i"), just shorter.

Bootstrap radio button isn't working in flask

I am using Bootstrap 4 radio button radio button in a flask application. and below is the snippet I used
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-outline-secondary">
<input type="radio" onclick="javascript:toggleElements();" name="toggle" id="twitter"/> Twitter
</label>
<label class="btn btn-outline-secondary" >
<input type="radio" onclick="javascript:toggleElements();" name="toggle" id="facebook"/> Facebook
</label>
</div>
and the javascript code
<script type="text/javascript">
function toggleElements() {
alert('hurray');
if(document.getElementBId('twitter').checked) {
document.getElementById('twitterrows').style.display = 'block';
document.getElementById('facebookrows').style.display = 'none';
}
if(document.getElementById('facebook').checked) {
document.getElementById('facebookrows').style.display = 'block';
document.getElementById('twitterrows').style.display = 'none';
}
}
</script>
Initially,I tried with simple html radio buttons and was able to trigger Javascript function toggleElements(). However, after replacing the normal radio buttons with the bootstrap radio, nothing is triggered.
Below is the entire html code
{% from 'helper/forms.html' import render_field with context %}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sharjah Tourism Search Results</title>
<script src="{{ url_for('static', filename='js/jquery-3.2.1.min.js') }}"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="{{ url_for('static',filename='styles/home.css')}}"/>
<script type="text/javascript">
function toggleElements() {
alert('hurray');
if(document.getElementBId('twitter').checked) {
document.getElementById('twitterrows').style.display = 'block';
document.getElementById('facebookrows').style.display = 'none';
}
if(document.getElementById('facebook').checked) {
document.getElementById('facebookrows').style.display = 'block';
document.getElementById('twitterrows').style.display = 'none';
}
}
</script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="{{ url_for('home')}}"><strong>Search</strong></a>
<button class = "navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-7"
aria-controls="navbarSupportedContent-7" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent-7">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="{{url_for('add_url')}}">Add<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('file_render')}}">Import</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Websites
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="{{ url_for('list_urls') }}">List</a>
<a class="dropdown-item" href="{{ url_for('list_crawled_websites')}}">Selected</a>
</div>
</li>
</ul>
</div>
</nav>
<!-- Header -->
<div class="container">
<br />
<div class="row">
<!-- Logo -->
<div class="col-sm">
<img class="w-50 h-60" src="{{url_for('static',filename='images/sctda_logo.jpg')}}" />
</div>
<!-- Search Bar -->
<div class="col-sm-5 searchbar">
<form action="{{url_for('fetch_results')}}" method="POST">
<div class="input-group">
<input type="search" placeholder="Search" class="form-control" name="search" id="search" value="{{data['search_term']}}" class="w-75 h-75" required>
<div class="input-group-append">
<button type="submit" class="btn btn-outline-secondary btn-sm"><i class="fa fa-search"></i></button>
</div>
</div>
</form>
</div>
</div>
<div id="container">
<div class="row">
{%set data = data['results'] %}
<div class="col-md-4">
<div class="btn-group-toggle" data-toggle="buttons">
<label class="btn btn-outline-secondary active">
<input type="radio" checked autocomplete="off"> Internal
</label>
</div>
<hr>
{% set internals = data['internal'] %}
{% if internals is defined and internals|length %}
{% for internal in internals %}
<div class="card">
<div class="card-body">
<h5 class="card-title">{{ internal['title'] }}</h5>
<p class="card-text">{{ internal['description'] }}</p>
{{ internal['title'] }}
</div>
</div>
<br/>
{% endfor %}
{% else %}
<div class="card">
<div class="card-body">
<h5 class="card-title">No Records Found</h5>
</div>
</div>
<br/>
{% endif %}
</div>
<div class="col-md-4">
{% set externals = data['external'] %}
{% if externals is defined and externals|length %}
<div class="btn-group-toggle" data-toggle="buttons">
<label class="btn btn-outline-secondary active">
<input type="radio" checked autocomplete="off"> External
</label>
</div>
<hr>
{% for external in externals %}
<div class="card">
<div class="card-body">
<h5 class="card-title">{{ external['title'] }}</h5>
<p class="card-text">{{ external['description'] }}</p>
{{ external['title'] }}
</div>
</div>
<br/>
{% endfor %}
{% else %}
<div class="card">
<div class="card-body">
<h5 class="card-title">No Records Found</h5>
</div>
</div>
<br/>
{% endif %}
</div>
<div class="col-md-4">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-outline-secondary">
<input type="radio" onclick="javascript:toggleElements();" name="toggle" id="twitter"/> Twitter
</label>
<label class="btn btn-outline-secondary" >
<input type="radio" onclick="javascript:toggleElements();" name="toggle" id="facebook"/> Facebook
</label>
</div>
<hr>
(<input type="radio" onclick="javascript:toggleElements();" name="toggle" id="twitter"/> Twitter,
<input type="radio" onclick="javascript:toggleElements();" name="toggle" id="facebook"/> Facebook)
<div id="twitterrows">
{% set tweets = data['twitter'] %}
{% if tweets is defined and tweets|length %}
{% for tweet in tweets %}
<div class="card">
<div class="card-body">
<h5 class="card-title">{{ tweet['title'] }}</h5>
<p class="card-text">{{ tweet['description'] }}</p>
{{ tweet['title'] }}
</div>
</div>
<br/>
{% endfor %}
{% else %}
<div class="card">
<div class="card-body">
<h5 class="card-title">No Records Found</h5>
</div>
</div>
<br/>
{% endif %}
</div>
<div id="facebookrows">
{% set posts = data['facebook'] %}
{% if posts is defined and posts|length %}
{% for post in posts %}
<div class="card">
<div class="card-body">
<h5 class="card-title">{{ post['title'] }}</h5>
<p class="card-text">{{ post['description'] }}</p>
{{ post['title'] }}
</div>
</div>
<br/>
{% endfor %}
{% else %}
<div class="card">
<div class="card-body">
<h5 class="card-title">No Records Found</h5>
</div>
</div>
<br/>
{% endif %}
</div>
</div>
</div>
</div>
<center>Developed by School of Information Technology Team,Skyline University College</center>
</body>
</html>
I strongly suspect with the order of scripts being called under the head tag. Can someone help me to fix this please.

make sure you have included the correct version of bootstrap. Please check if there is any error in the browser console.
https://getbootstrap.com/docs/4.4/components/input-group/#checkboxes-and-radios.
I am suspecting that the javascript click is not properly binded to the click event.

I fixed it by replacing the three script tags in the above html page with the below
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

How can I clearly switch between two forms in one template (Django)?

When several html forms (signup and login) in one template, login_signup.html
Also I have two views (signup and login) which direct template, login_signup.html.
This is how it works.
When I do login (http://example.com/login), it direct to login_signup.html and show just login form. (hide signup form)
When I do signup (http://example.com/signup), it direct to login_signup.html and show just signup form. (hide login form)
I implement it using javascript
$(document).ready(function(){
if ((window.location.pathname).indexOf('login') >= 0) {
$('#signupbox').hide();
$('#loginbox').show();
} else {
$('#loginbox').hide();
$('#signupbox').show();
}
});
Problem is though, when I want go to signup page(http://example.com/signup), it shows login forms in very few second and hide it and show signup form. I think this is not good User Interface.
How can I deal with it clearly?
Here is my whole template and javascript code.
login_signup.html
{% extends 'chacha_dabang/skeleton/base.html' %}
{% load pipeline%}
{% block content %}
<div class="container">
<div id="loginbox" class="mainbox">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">Sign In</div>
</div>
<div class="panel-body">
<div id="login-alert" class="alert alert-danger col-sm-12"></div>
<form id="loginform" class="form-horizontal" role="form" method="post" action="{% url 'users:login' %}">
{% csrf_token %}
<!-- id / pw -->
<div class="input-group">
<span class="input-group-addon"><i class="icon-user"></i></span>
<input id="id_username" type="text" class="form-control" name="username" value="" placeholder="username">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="icon-lock"></i></span>
<input id="id_password" type="password" class="form-control" name="password" placeholder="password">
</div>
<div class="form-group">
<!-- Button -->
<div class="btn-controls">
<div class="row">
<input id="btn-login" class="btn btn-success" type="submit" name="login_submit" value="로 그 인" />
<input type="hidden" name="next" value={{ request.GET.next}} />
<a id="btn-fblogin" href="{% url 'social:begin' backend='facebook' %}" class="btn btn-primary col-xs-12"><i class="icon-facebook"></i> 1초만에 페이스북으로 로그인 </a>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12 control">
<div class="signup">
아직 차차다방 회원이 아니세요? &nbsp
가입하기
</div>
<div class="forget">
비밀번호를 잊어버리셨나요?
</div>
</div>
</div>
</form>
</div> <!-- <div class="panel-body" > -->
</div> <!-- <div class="panel panel-info"> -->
</div> <!-- <div id="loginbox"> -->
<!-- Sign up Form -->
<div id="signupbox" class="mainbox">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">Sign Up</div>
</div>
<div class="panel-body">
<form id="signupform" class="form-horizontal" role="form" method="post" action="{% url 'users:signup' %}">
{% csrf_token %}
<!-- signup -->
<div id="signupalert" class="alert alert-danger">
<p>Error:</p>
<span></span>
</div>
<!-- id / pw -->
<table id="signup-table">
<col width="30%">
<col width="70%">
<tr>
<td class="label-tag">{{ form.username.label_tag }}</td>
<td class="value">{{ form.username }}</td>
{{ form.errors.username }}
</tr>
<tr>
<td class="label-tag">{{ form.password1.label_tag }}</td>
<td class="value">{{ form.password1 }}</td>
{{ form.errors.password1 }}
</tr>
<tr>
<td class="label-tag">{{ form.password2.label_tag }}</td>
<td class="value">{{ form.password2 }}</td>
{{ form.errors.password2 }}
</tr>
<tr>
<td class="label-tag">{{ form.name.label_tag }}</td>
<td class="value">{{ form.name }}</td>
{{ form.errors.name }}
</tr>
<tr>
<td class="label-tag">{{ form.gender.label_tag }}</td>
<td class="value">{{ form.gender }}</td>
{{ form.errors.gender }}
</tr>
<tr>
<td class="label-tag">{{ form.birth.label_tag }}</td>
<td class="value">{{ form.birth }}</td>
{{ form.errors.birth }}
</tr>
<tr>
<td class="label-tag">{{ form.phone_number.label_tag }}</td>
<td class="value">{{ form.phone_number }}</td>
{{ form.errors.phone_number }}
</tr>
<tr>
<td class="label-tag">{{ form.job.label_tag }}</td>
<td class="value">{{ form.job }}</td>
{{ form.errors.job}}
</tr>
</table>
<div class="form-group">
<!-- Button -->
<div class="btn-controls">
<div class="row">
<input id="btn-signup" class="btn btn-success" type="submit" name="signup_submit" value="가 입 하 기" />
<a id="btn-fblogin" href="{% url 'social:begin' backend='facebook' %}" class="btn btn-primary col-xs-12"><i class="icon-facebook"></i>1초만에 페이스북으로 로그인</a>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12 control">
<div class="login">
이미 차차다방 회원이신가요? &nbsp
로그인하기
</div>
</div>
</div>
</form>
</div> <!-- <div class="panel-body"> -->
</div> <!-- <div class="panel panel-info"> -->
</div> <!-- <div id="signupbox"> -->
</div> <!-- <div class="container"> -->
{% endblock %}
{% block custom_js %}
{% javascript "login_signup" %}
{% endblock %}
login_signup.js
$("#signuplink").click(function(){
$('#loginbox').hide();
$('#signupbox').show();
});
$("#loginlink").click(function(){
$('#signupbox').hide();
$('#loginbox').show();
});
$(document).ready(function(){
if ((window.location.pathname).indexOf('login') >= 0) {
$('#signupbox').hide();
$('#loginbox').show();
} else {
$('#loginbox').hide();
$('#signupbox').show();
}
});

Try:
<div id="signupbox" class="mainbox" style="display: none">
<div id="loginbox" class="mainbox" style="display: none">
Then use javascript:
$(document).ready(function(){
if ((window.location.pathname).indexOf('login') >= 0) {
$('#loginbox').css("display", "auto");
} else {
$('#signupbox').css("display", "auto");
}
});
But I still recommend use different html file to handle signup and login.

Categories

Resources