Day 13: Tabs & Active Search

Welcome to Day 13. Let’s build some common app interfaces.

Tabs

You don’t need JS for tabs.

<div id="tabs">
    <button hx-get="/tab1" hx-target="#tab-content" class="selected">Tab 1</button>
    <button hx-get="/tab2" hx-target="#tab-content">Tab 2</button>
    <button hx-get="/tab3" hx-target="#tab-content">Tab 3</button>
</div>

<div id="tab-content">
    <!-- Content loads here -->
</div>

Bonus: Use hx-push-url="true" so the URL updates (e.g. /settings/profile, /settings/account) and the back button works!

Active Search

We touched on this on Day 2, but let’s make it robust.

<h3>Search Contacts</h3>
<input class="form-control" 
       type="search" 
       name="search" 
       placeholder="Begin Typing To Search Users..." 
       hx-post="/search" 
       hx-trigger="keyup changed delay:500ms, search" 
       hx-target="#search-results" 
       hx-indicator=".htmx-indicator">

<table class="table">
    <thead>
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
    </tr>
    </thead>
    <tbody id="search-results">
        <!-- Initial rows or empty -->
    </tbody>
</table>

Challenge for Day 13

1. Create a “Dashboard” with 3 tabs: Stats, Reports, Settings.
2. The generic container is <div id="main">.
3. Each tab button loads a fragment into #main.
4. Use hx-push-url="true" to make it feel like a real router.

Solution: Just standard htmx. The magic is in the URL management.

Tomorrow: The Final Project.