htmx
htmx copied to clipboard
bigskysoftware
Bootstrap dropdown is not working after navigate
Its fun to work with HTMX and I really want to use HTMX for my Codecanyon project.
but I am facing an issue.
I used hx-boost and hx-push-url in my anchor. The navigation working fine in my project but when I want to click on dropdown its not showing. I need to reload the page then it works.
Here is the screenshot of my page.
Another example:
https://github.com/bigskysoftware/htmx/assets/43857625/d12ef85a-efbf-4b2c-bb43-df6fda553b12
let me know if I missed something.
I've also encounterd this issue before. It seems all extra javascript is not loaded into the DOM when you use hx-boost and hx-push-url.
I encountered an issue where htmx's default AJAX behavior was interfering with our JavaScript functionality on a specific link that generates bulk PDFs. To temporarily address this problem, I set hx-boost="false" for that link, allowing it to perform a full page reload instead of an AJAX request. This ensured that our JavaScript worked correctly, and it served as a quick and practical solution to move forward with the project. However, it's worth noting that we're temporarily bypassing some of htmx's advantages for this specific use case, and we may need to explore a more comprehensive solution in the future to maintain the benefits of partial page updates while addressing the JavaScript issue. Have you in anyway encounter such problem before? If so how did you address the problem without causing a full page reload?
Problem:
<body hx-boost="true">
<a href="{% url 'academics:generate_bulk_pdf' %}"
class="btn btn-sm bg-blue-black border-0"
style="text-transform: none;"
> Generate Bulk PDF
</a>
</body>
Temporal solution:
<a href="{% url 'academics:generate_bulk_pdf' %}"
class="btn btn-sm bg-blue-black border-0"
hx-boost="false"
style="text-transform: none;"
> Generate Bulk PDF
</a>
Have you tried adding the HTMX head-support extension? The problem is probably that the extra JavaScript is in the <head> tag, which is normally not swapped in by HTMX.
I just encountered this problem myself today. The issue for me was that the bootstrap JavaScript wasn't in the head. It was in the body, which meant it got duplicated every time the page was swapped. Moving the script tag to the head with a defer attribute fixed the issue with the dropdowns.
I just encountered this problem myself today. The issue for me was that the bootstrap JavaScript wasn't in the head. It was in the body, which meant it got duplicated every time the page was swapped. Moving the script tag to the head with a defer attribute fixed the issue with the dropdowns.
Nice! I have been having a headache trying to solve this problem all day today. Just came across your solution and it worked!!! Thanks a lot!
