undefined

HTMX

HTMX is a lightweight JavaScript library that simplifies adding AJAX capabilities to web pages, enabling real-time content updates without full page reloads.

1 Series
5 Lessons
HTMX

Lessons

Syncing URL & Field Values
Syncing URL & Field Values

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.

Updating Content with HTMX
Updating Content with HTMX

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.

AdonisJS Filter Form Handler
AdonisJS Filter Form Handler

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.

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.

Installing HTMX
Installing HTMX

Installing HTMX & Project Overview

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

Showing 1 to 5 of 5 results