'how to navigate html pages without loading using htmx

I want to load an html page without refreshing the page using htmx. So for example, If I am at http://localhost/sample/home and I want to navigate to contact us page, I click on the contact link and the contact page content gets loaded without refreshing the page. Is it possible?

htmx


Solution 1:[1]

Yes, this is possible with htmx. Take a look at the hx-get tag as an example.

<html>
<body hx-target="this">
<a hx-get="/contact-us">Contact Us</a>.  When this link is clicked, the document body will be swapped with whatever you have in the file named /contact-us
</body>
</html>

Solution 2:[2]

I think you are talking about hx-boost.

The hx-boost attribute allows you to "boost" normal anchors and form tags to use AJAX instead.

It reminds me of the react-router approach.

https://htmx.org/attributes/hx-boost/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ben Pate
Solution 2 Luca Fedrizzi

Related Questions