I am currently working on a project of two apps, a blog and a translator app. I have a common home page that serves the two apps. But the apps don’t open if I click on any of from the home page.
I need assistance on how to overcome the problem.
Is this an SPA using a JavaScript front end, or a traditional Django multi-page application?
What specifically happens? Do the buttons not do anything? Is an error message produced on the server? Do you see the requests being issued?
It is a traditional Django multi-page application.
Nothing happens if I click on the buttons and the buttons don’t do anything either.
The browser doesn’t show any error messages. If I inspect the browser console, it doesn’t show any errors.
The request is also issued.
I think we need to start with seeing the template for your home page and your root urls.py file.
Here are my home page template and root urls ```{% load static%}
Home {% load bootstrap5 %} {% bootstrap_css %} {% bootstrap_javascript %} ```,from django.urls import path, include
from django.views.generic.base import RedirectView
from django.contrib.staticfiles.storage import staticfiles_storage
from blog import urls as blog_urls
from translator import urls as translator_urls
from accounts import urls as accounts_urls
from django.conf import settings
from django.conf.urls.static import static
from django.contrib import admin
from .views import home_view
urlpatterns = [
path('admin/', admin.site.urls),
path('accounts/', include('django.contrib.auth.urls')), # Include default auth URLs
path('accounts/', include(accounts_urls)),
path('blog/', include(blog_urls)),
path('translator/', include(translator_urls)),
path('', home_view, name='home'), # Root URL for the home view
]
# Use += to concatenate the lists
if settings.DEBUG:
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)```If you review your post, you’ll see that your template cannot be read because you did not enclose the template between lines of three backtick characters. Please fix your post.
Sorry about that. Here are the codes in triple back ticks {% load static%}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
{% load bootstrap5 %}
{% bootstrap_css %}
</head>
<body>
<div class="container">
<h1>Welcome to My Site</h1>
<p>Choose an application to visit:</p>
<a href="{% url 'blog:index_view' %}" class="btn btn-primary">Blog</a>
<a href="{% url 'translator:translator_index' %}" class="btn btn-secondary">Translator</a>
</div>
{% bootstrap_javascript %}
</body>
</html>```,
```from django.contrib import admin
from django.urls import path, include
from django.views.generic.base import RedirectView
from django.contrib.staticfiles.storage import staticfiles_storage
from blog import urls as blog_urls
from translator import urls as translator_urls
from accounts import urls as accounts_urls
from django.conf import settings
from django.conf.urls.static import static
from django.contrib import admin
from .views import home_view
urlpatterns = [
path('admin/', admin.site.urls),
path('accounts/', include('django.contrib.auth.urls')), # Include default auth URLs
path('accounts/', include(accounts_urls)),
path('blog/', include(blog_urls)),
path('translator/', include(translator_urls)),
path('', home_view, name='home'), # Root URL for the home view
]
# Use += to concatenate the lists
if settings.DEBUG:
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)```Close, not quite. See side note #2 at Reverse for 'update_profile_picture' not found - #4 by KenWhitesell
Sorry about that. Here are the codes in triple back ticks {% load static%}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
{% load bootstrap5 %}
{% bootstrap_css %}
</head>
<body>
<div class="container">
<h1>Welcome to My Site</h1>
<p>Choose an application to visit:</p>
<a href="{% url 'blog:index_view' %}" class="btn btn-primary">Blog</a>
<a href="{% url 'translator:translator_index' %}" class="btn btn-secondary">Translator</a>
</div>
{% bootstrap_javascript %}
</body>
</html>```,
```from django.contrib import admin
from django.urls import path, include
from django.views.generic.base import RedirectView
from django.contrib.staticfiles.storage import staticfiles_storage
from blog import urls as blog_urls
from translator import urls as translator_urls
from accounts import urls as accounts_urls
from django.conf import settings
from django.conf.urls.static import static
from django.contrib import admin
from .views import home_view
urlpatterns = [
path('admin/', admin.site.urls),
path('accounts/', include('django.contrib.auth.urls')), # Include default auth URLs
path('accounts/', include(accounts_urls)),
path('blog/', include(blog_urls)),
path('translator/', include(translator_urls)),
path('', home_view, name='home'), # Root URL for the home view
]
# Use += to concatenate the lists
if settings.DEBUG:
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)```If you use the “View source” in your browser to look at the page in the browser, what do you see for these lines?
Focusing on only the blog app for now, what does your blog/urls.py file have in it?
Also, as a very quick test, and just to verify that there isn’t some problem being created by the bootstrap module, do these links work if you remove those tags from your template?
The ‘view source’ on my browser is showing me the home page and here is the 'blog/urls.py code
from . import views
app_name = 'blog'
urlpatterns = [
path('', views.index_view, name='index_view'),
path('base_view/', views.base_view, name = 'base_view'),
path('posts/', views.post_list, name='post_list'),
path('post/<slug:slug>,<int:pk>/', views.post_detail, name='post_detail'),
path('post/<int:pk>/comment/', views.add_comment, name='add_comment'),
path('template_list/', views.template_list, name='template_list'),
path('create/', views.create_post, name='create_post'),
path('<slug:slug>/edit/', views.post_edit, name='post_edit'),
path('post/<int:pk>/delete/', views.PostDeleteView.as_view(), name='post_delete'),
path('my-view/', views.my_view, name='my_view'),
path('update-profile-picture/', views.update_profile_picture, name='update_profile_picture'),
path('comment/<int:pk>/delete/', views.delete_comment, name='delete_comment'),
]```
The links links still don't open if I remove bootstrapYes. I want to see the specific HTML that was rendered by those lines referenced above. How do those lines appear in the browser?
Also, please post your home_view.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Welcome to My Site</h1>
<p>Choose an application to visit:</p>
<a href="/blog/" class="btn btn-primary">Blog</a>
<a href="/translator/" class="btn btn-secondary">Translator</a>
</div>
<script crossorigin="anonymous" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>```
```from django.shortcuts import render
def home_view(request):
return render(request, 'home.html')```
Above are the 'view source' script and the 'home_view'Unfortunately, I can’t recreate the symptoms you are describing here with the information provided.
If I create a page identical to yours, the buttons work as expected. This implies that there is something else involved, either in the browser you are using or the environment in which you are accessing this.
What browser are you using? You could try a different browser, disabling all extensions, or trying it with “private” / “incognito” mode.
Whatever is happening is not, strictly speaking, a Django issue. Django is creating the page that it’s supposed to create. The page is valid, and in a basic lab environment it works. Whatever is going wrong is happening outside of Django.
After I opened ‘inspect’>‘performnce’>‘details’ in the browser, I got the following information 'Render blocking CSS
File:
bootstrap.min.css
Issue:
Stylesheet blocking rendering ’
How can I fix the above problem
This is less a “problem” than it is just letting you know what’s happening.
See: