# HTMX Tabs Demo

## Example Overview

This example demonstrates how to use Bootstrap 5 tabs with **[HTMX](https://htmx.org/)** to load tab content (including `django_tomselect` fields) dynamically without full page reloads. Each tab fires its own HTMX request when selected, and the initially active tab loads on page load. Use this when you want to defer rendering a form until its tab is actually opened.

---

## Key Code Segments

### Main Template with Tabs Structure

The main template sets up the Bootstrap 5 tabs and configures HTMX requests for each tab.

:::{admonition} HTMX Tabs Template
:class: dropdown

```html
<div class="card card-action mb-4">
    <div class="card-body p-0">
        <div class="nav-align-top">
            <ul class="nav nav-tabs nav-fill tabs-line border-bottom-0" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active"
                       data-bs-toggle="tab"
                       aria-selected="true"
                       data-hx-get="{% url 'demo-htmx-form-fragment' %}?tab=1"
                       data-hx-trigger="click"
                       data-hx-target="#tabContent"
                       role="tab">Tab 1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link"
                       data-bs-toggle="tab"
                       aria-selected="false"
                       data-hx-get="{% url 'demo-htmx-form-fragment' %}?tab=2"
                       data-hx-trigger="click"
                       data-hx-target="#tabContent"
                       role="tab">Tab 2</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link"
                       data-bs-toggle="tab"
                       aria-selected="false"
                       data-hx-get="{% url 'demo-htmx-form-fragment' %}?tab=3"
                       data-hx-trigger="click"
                       data-hx-target="#tabContent"
                       role="tab">Tab 3</a>
                </li>
            </ul>
            <div class="tab-content border-0 px-4 pt-5 mt-2 mx-1" id="tabContent">
                <div class="tab-pane fade show active"
                     role="tabpanel"
                     data-hx-get="{% url 'demo-htmx-form-fragment' %}?tab=1"
                     data-hx-trigger="load"></div>
            </div>
        </div>
    </div>
</div>
```
:::

- **Purpose**: Creates a tabbed interface where each tab triggers an HTMX request to load content dynamically.
- **Key HTMX Attributes**:
  - `data-hx-get`: The URL to fetch content from when the tab is clicked
  - `data-hx-trigger`: When to trigger the request (on click or load)
  - `data-hx-target`: Where to place the loaded content

---

### Tab Content Fragment Template

The fragment template defines the content that will be loaded into each tab.

:::{admonition} Tab Content Fragment Template
:class: dropdown

```html
{% load static %}

{{ form.media }}

<div class="card">
    <div class="card-header">
        <h2>Loading content via htmx Demo</h2>
    </div>
    <div class="card-body">
        <div class="pb-5">This page demonstrates loading the form using htmx.</div>
        <form>
            {% csrf_token %}
            {{ form.as_div }}
        </form>
    </div>
</div>
```
:::

---

### View Functions

The view functions handle both the main page and the tab content fragments.

:::{admonition} HTMX Tabs Views
:class: dropdown

```python
def htmx_tabs_view(request: HttpRequest) -> HttpResponse:
    """View for the htmx tabs demo page."""
    template = "example/basic_demos/htmx_tabs.html"
    context = {}

    return TemplateResponse(request, template, context)


def htmx_form_fragment_view(request: HttpRequest) -> HttpResponse:
    """View for the htmx form fragment page."""
    template = "example/basic_demos/htmx_fragment.html"
    context = {}

    form = Bootstrap5StylingHTMXForm(request.POST or None)

    if request.POST:
        if form.is_valid():
            messages.success(request, "Form submitted successfully!")
        else:
            messages.error(request, "Please correct the errors in the form before proceeding.")

        return HttpResponseRedirect("/")

    # Get the tab parameter to customize content if needed
    tab = request.GET.get('tab', '1')
    context["form"] = form
    context["tab_id"] = tab
    context["tab_title"] = f"Tab {tab} Content"

    return TemplateResponse(request, template, context)
```
:::

---

## Implementation Notes

- Each tab link contains the necessary HTMX attributes to trigger content loading
- The initially active tab loads its content via the `data-hx-trigger="load"` attribute
- Bootstrap's tab styling and behavior are preserved while enhancing with dynamic content loading

## Related

- {doc}`htmx` - the base HTMX demo, covering the `use_htmx=True` config flag for HTMX-swapped content.