fgm
/
htmx-demo


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title id="page-title">HTMX | Chapter 5 demos</title>
  <script src="js/htmx-1-9-12.min.js"></script>
  <link rel="stylesheet" href="css/styles.css"/>
</head>
<body>
<h1 id="title">Chapter 5 demos</h1>
<h2>Attribute inheritance with <code>hx-boost</code></h2>
<nav hx-get="/autonum/nav" hx-trigger="load"></nav>

<div id="main">
  <ul hx-boost="true" hx-target="#main">
    <li><a href="/contacts">Contacts</a></li>
    <li><a href="/settings">Settings</a></li>
    <li><a href="/help">Help</a></li>
    <li><a href="/blank.pdf" hx-boost="false">Download Blank docs</a></li>
  </ul>
</div>
<p>Notice :</p>
<ul>
  <li>how the successful first 2 links replace the div#main</li>
  <li>how the 404 on Help does not replace it like a plain a.href normally would,
    but the others do.
  </li>
  <li>How the PDF download is not an AJAX call</li>
</ul>
</body>
</html>