so i recently got into HTMX, i like the simplicity of it, now i am trying to load the home page content using HTMX, it loads the 1st 6 items but the footer overlaps on the last 3.
my views.py file
def partials_home(request):
prods = retailer.objects.all()
prods = paginify_simple(request, prods)
context = {
"prods": prods,
}
return render(request, 'partials/home.html', context)
def home(request):
return render(request, 'testing/home.html')
my html files
partials/home html
<div class="flexbox-container infinite-container" hx-get="{% url 'partials-home' %}" hx-trigger = "load" hx-target=".flexbox-container">
{% for item in prods %}
<div class="flexbox-item infinite-item">
<a href="/{{item.slug}}"><img src="{{item.image.url}}"></a>
<div class="Main-Info">
<div class = "Shop"><b>{{item.shop}}</b></div>
<div class = "Title">{{item.title | truncatechars:29}}</div>
<div class = "Price">
{% if user.is_authenticated %}
<button id="like-unlike-{{item.id}}" name = "item-id" link = "/{{item.slug}}" value = "{{item.id}}" class = 'btn btn-primary'> {{item.no_of_likes}} <i class="fa fa-heart small-heart"></i> </button>
{% else %}
<i class="fa fa-heart small-heart" link = "/{{item.slug}}" style="font-size: 24px;"></i>
{% endif %}
{% if item.price == 0 %}
<a href="/{{item.slug}}" target="_blank"><b>"Click Here To Find Price" </b></div> </a>
{% elif item.country == "USA" %}
<a href="/{{item.slug}}" target="_blank"><b>${{item.price}}</b></div></a>
{% else %}
<a href="/{{item.slug}}" target="_blank"><b>£{{item.price}}</b></div></a>
{% endif %}
</div>
</div>
{% endfor %}
</div>
my testing/home.html file
{% extends "testing/base.html" %}
{% load static %}
{% block title %}
<title> Home Page </title>
{% endblock title %}
{% block scripts %}
<link rel="stylesheet" type="text/css" href="{% static 'testing/square.css' %}">
<script src ="{% static 'js/async_notifications.js' %}" defer></script>
{% endblock scripts %}
{% block content %}
<div class = "flexbox-Buttons">
{% for cat in shop_cat_01 %}
{% if cat == "Boots" %}
<a href="/category/{{cat}}"> <button type="button" class="btn btn-primary btn-lg">Boots</button> </a>
{% elif cat == "Slippers" %}
<a href="/category/{{cat}}"> <button type="button" class="btn btn-success btn-lg">Slippers</button> </a>
{% elif cat == "Heels" %}
<a href="/category/{{cat}}"> <button type="button" class="btn btn-warning btn-lg">Heels</button> </a>
{% else %}
<a href="/category/{{cat}}"> <button type="button" class="btn btn-danger btn-lg">{{cat}}</button> </a>
{% endif %}
{% endfor %}
{% include "partials/home.html" %}
{% endblock content %}
Image for further Clarification
EDIT: And i have one more major problem in the console Part, it just keeps on loading the error or in the INFO tab of the console, Please take a look
You might have included footer in the base.html as you are extending it {% extends "testing/base.html" %} in your home.html or your footer part is in some other file.
1 Like
hi my footer is actully in my base html itself, so when i extend both my navbar and footer appear on every page as i want it to.
the thing is when i dont use HTMX and load it normally everything works, so i dont know what could be the problem.
here is my base html for reference
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% block title %}
<title> Base Page </title>
{% endblock title %}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<link rel="stylesheet" href="{% static 'testing/style.css' %}">
<script src ="{% static 'js/jquery-3.2.1.min.js' %}" defer></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" defer></script>
<script src ="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous" defer></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js" defer></script>
<script src ="{% static 'js/jquery.waypoints.min.js' %}" defer></script>
<script src ="{% static 'js/infinite.min.js' %}" defer></script>
<script src="https://unpkg.com/htmx.org@1.8.6" defer></script>
<script src ="{% static 'js/search_results.js' %}" defer></script>
<script src ="{% static 'js/async_like_a_post.js' %}" defer></script>
<script src ="{% static 'js/like_a_post_login.js' %}" defer></script>
<script src ="{% static 'js/Scroll.js' %}" defer></script>
{% block scripts %}
{% endblock scripts %}
{% block head %}
{% endblock head %}
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand burn" href="{% url 'earn-money-page' %}">EARN MONEY</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{% url 'home-view' %}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'shop-list' %}">Shop-List</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'shop-by-color' %}">Shop-By-Color</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Shop By Category
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
{% for cat in shop_cat_01 %}
<a class="dropdown-item" href="/category/{{cat}}">{{cat}}</a>
{% endfor %}
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="https://s3.eu-central-1.amazonaws.com/bootstrapbaymisc/blog/24_days_bootstrap/fox.jpg" width="40" height="40" class="rounded-circle">
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<div id = "user_surfing" value = {{user}}> </div>
{% if user.is_authenticated %}
<a class="dropdown-item" name = {{user}} href= "{% url 'user-profile' username=user %}" >Profile Page</a>
{% comment %} <a class="dropdown-item" name = {{user}} href= "{% url 'profile_dashboard' username=user %}" >Dashboard</a> {% endcomment %}
<a class="dropdown-item" name = {{user}} href="{% url 'account_logout' %}">Log Out</a>
{% else %}
<a class="dropdown-item" name = {{user}} href="{% url 'account_login' %}">Log In</a>
<a class="dropdown-item" href="{% url 'contact-us-page' %}">Contact Us</a>
{% endif %}
</div>
</li>
</ul>
{% if user.is_authenticated %}
<div class="notification-icon">
<i class="fas fa-bell"></i>
</div>
{% endif %}
{% csrf_token %}
<form class="form-inline my-2 my-lg-0 search-form" action="{% url 'search_results' %}" method="get">
<input class="form-control mr-sm-2" type="search" placeholder="Search" name = "q" aria-label="Search" id="search-input">
<ul id="suggestions"></ul>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<br>
{% block message %}
{% if messages %}
{% for msg in messages %}
<div class="alert alert-{{ msg.tags }}">
<center>{{msg}}</center>
</div>
{% endfor %}
{% endif %}
{% endblock message %}
{% block content %}
{% endblock content %}
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<!-- Footer Start Here -->
</br>
</br>
</br>
</br>
<footer class="footer">
<div class="container">
<div class="row">
<div class="footer-col">
<h4>company</h4>
<ul>
<li><a href="{% url 'about-us-page' %}">about us</a></li>
<li><a href="{% url 'privacy-policy-page' %}">privacy policy</a></li>
<li><a href="{% url 'advertise-shop-here-page' %}">Advertise Your Shop Here</a></li>
</ul>
</div>
<div class="footer-col">
<h4>get help</h4>
<ul>
<li><a href="{% url 'FAQ-page' %}">FAQ</a></li>
<li><a href="{% url 'contact-us-page' %}">Contact Us</a></li>
</ul>
</div>
<div class="footer-col">
<h4>How to Shop</h4>
<ul>
<li><a href="{% url 'shop-list' %}">Shop List</a></li>
<li><a href="{% url 'shop-by-category' %}">Shop By Category</a></li>
<li><a href="{% url 'shop-by-color' %}">Shop By Color</a></li>
</ul>
</div>
<div class="footer-col">
<h4>follow us</h4>
<div class="social-links">
<a href="https://www.facebook.com/profile.php?id=100067639134889" target="_blank"><i class="fab fa-facebook-f"></i></a>
<a href="https://twitter.com/Cheapforme_net" target="_blank"><i class="fab fa-twitter"></i></a>
<a href="https://www.instagram.com/cheapforme/" target="_blank"><i class="fab fa-instagram"></i></a>
<a href="#" target="_blank"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>
The easiest way to start to diagnose this would be to compare the html between the working version and the not working version by examining them through your browser’s developer tools. I find it easiest to copy the html to a text editor (I use Notepad++), to compare the two versions. It also helps to examine the css that is being applied to each element.
1 Like
everything is the same only difference is the
{% include partials/home/html %}
i did not change anything else. (and also can you see why in my console tab the INFO just keeps on adding)
I’m not talking about the template here, I’m talking about the html as it has been sent to the browser. That’s why you need to use the browser’s developer tools to look at this.
1 Like
hey thanks a lot i fixed the footer part, as there was a div i forgot to close 
but now the INFO tab in the console still keeps on loading and also in the terminal i just noticed, it will keep on HTTP GET the url
