My Issue:
I am trying to use Swup Library with Django's templating engine and everything worked well; except for the fetching of new content.
The animations worked perfectly; I could see my contents getting faded out. The addresses in which the get requests are fetching worked perfectly as well; I could see the HTTP response code of 200 being returned in my console. However, the main content, after being faded out, were not being replaced.
An example of Django Renderings: Base URL: http://127.0.0.1:8000
<!-- What is written in my code -->
<a href="{% url 'home_view' %}" >
<!-- What Django renders in the browser -->
<a href="/" >
in my urls.py:
urlpatterns = [
path('', views.homeView, name='home_view'),
]
A worthy note: Using dev tools, when hovering over the href rendered, it shows http://127.0.0.1:8000/
Another strange thing I encountered when trying to debug was that my html element has the following attributes added to it but it stay there even after the animation ends.
<html lang="en" class="swup-enabled is-changing is-leaving is-animating to-homepage">
Swup config or any additional relevant code used:
let options = {
LINK_SELECTOR: 'a',
debugMode: true,
};
const swup = new Swup(options);
The Scripts loaded perfectly; I was able to see them in my developer tools, under the Sources tab.
<head>
<script defer src="{% static 'swup.min.js' %}"></script>
<script defer src="{% static 'script.js' %}"></script>
<link rel="stylesheet" href="{% static 'style.css' %}"/>
</head>
Before creating this issue, I did the following::
- [x] Checked closed issues for similar/related problems.
- [x] Changing LINK_SELECTOR as stated in the docs.
- [x] Changing the href to using '/' at the start so that it will get picked up.
I have tried and exhausted all possible means of solutions found googling around and in stack overflow as well. Please do point me to a more appropriate resource if there are any suggestions! Thank you if you have read this far!