Download the PHP package zunnu/cake-htmx without Composer
On this page you can find all versions of the php package zunnu/cake-htmx. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Informations about the package cake-htmx
cake-htmx
CakePHP integration for htmx.
Supported CakePHP Versions >= 4.x and 5.x.
Installing Using Composer
cd
to the root of your app folder (where the composer.json
file is) and run the following command:
Then load the plugin by using CakePHP's console:
To install htmx please browse their documentation
Usage
Main functionality is currently wrapped inside Htmx component.
To load the component you will need to modify your src/Controller/AppController.php
and load the Htmx component in the initialize()
function
Request
You can use detector to check if the request is Htmx.
Using the component you can check more specific details about the request.
Response
redirect
Htmx can trigger a client side redirect when it receives a response with the HX-Redirect
header.
clientRefresh
Htmx will trigger a page reload when it receives a response with the HX-Refresh
header. clientRefresh
is a custom response that allows you to send such a response. It takes no arguments, since Htmx ignores any content.
stopPolling
When using a polling trigger, Htmx will stop polling when it encounters a response with the special HTTP status code 286. stopPolling
is a custom response with that status code.
See the documentation for all the remaining available headers.
Additionally, you can trigger client-side events using the addTrigger
methods.
If you want to pass details along with the event you can use the second argument to send a body. It supports strings or arrays.
You can call those methods multiple times if you want to trigger multiple events.
CSRF token
To add CSRF token to all your request add below code to your layout.
Rendering blocks and OOB Swap
The setBlock()
function allows you to render a specific block while removing other blocks that might be rendered. This is particularly useful when you need to update only a portion of your view.
The addBlock()
function allows you to add a specific block to the list of blocks that should be rendered.
The addBlocks()
function allows you to add multiple blocks to the list of blocks that should be rendered
OOB Swap
Htmx supports updating multiple targets by returning multiple partial responses with hx-swap-oop
.
See the example Users index search functionality with pagination update
Note if you are working with tables like in the example. You might need to add
In your template or layout.
Examples
Users index search functionality
In this example, we will implement a search functionality for the users' index using Htmx to filter results dynamically. We will wrap our table body inside a viewBlock called usersTable
. When the page loads, we will render the usersTable
viewBlock.
In out controller we will check if the request is Htmx and if so then we will only render the usersTable
viewBlock.
Users index search functionality with pagination update
In this example, we will implement a dynamic search functionality for the users' index using Htmx. This will allow us to filter results in real-time and update pagination accordingly. We will wrap our table body inside a viewBlock called usersTable
and our pagination to pagination
block. When the page loads, we will render both the usersTable
and pagination
viewBlock.
In out controller we will check if the request is Htmx and if so then we will only render the usersTable
viewBlock.
License
Licensed under The MIT License.