Adocasts Adocasts
Series Topics Lessons Streams News Requests
Sign In Sign Up
Series Topics Lessons Streams News Requests
Sign In Sign Up

Company

  • What We Use
  • Contact Us
  • Analytics
  • Sitemap
  • Guidelines

HTMX & AdonisJS Filters

5 Lessons

20 minutes

In this mini-series, we'll learn how to install HTMX within an AdonisJS project. Once installed, we'll implement a basic filtering system with AdonisJS and initiate form handlers with HTMX to update our DOM.

Start Series View Repository View Playlist
Installing HTMX
HTMX & AdonisJS Filters #1.0

Installing HTMX & Project Overview

In this lesson, we'll briefly outline the project structure and then install HTMX inside our project.

HTMX & AdonisJS Filters #2.0

Creating Our Filter Query with AdonisJS

In this lesson, we'll create the route and query we'll need to get filtered results with our filter form using the Lucid ORM and AdonisJS.

AdonisJS Filter Form Handler
HTMX & AdonisJS Filters #3.0

Defining Our AdonisJS Filter Form Handler

In this lesson, we'll expand on the filter query we built in the last lesson by reusing the query within a service for our filter form handler.

Updating Content with HTMX
HTMX & AdonisJS Filters #4.0

Posting & Swapping Filtered Content with HTMX

In this lesson, we'll utilize the filter form handler we defined in our last lesson by adding an HTMX post handler to our filter form that will retrieve the filtered results HTML and swap it with the pre-existing results.

Syncing URL & Field Values
HTMX & AdonisJS Filters #5.0

Updating Our URL & Populating Filter Field Values

In this lesson, we'll learn how we can use HTMX to easily update our URL via our AdonisJS response. Then, we'll use our URL's query string to pre-populate our filter form field values.

Content

  • Home
  • Series
  • Topics
  • Lessons

 

  • News
  • Streams
  • Lesson Requests

Company

  • What We Use
  • Contact Us
  • Analytics
  • Sitemap

Legal

  • Cookies
  • Privacy
  • Terms
  • Guidelines

Subscribe to our newsletter

It contains the a monthly roundup of our latest lessons.

    Built with ConvertKit

    Adocasts Adocasts Adocasts © 2023 Adocasts. All Rights Reserved.
    YouTube account Twitter page Mastodon account GitHub account RSS feed