hx-pod

Let's your server know what the id is of the hx-target!You need 2 things to send this request header:1. Use the attribute: hx-target="some_id"2. Use a DOM id as the target: some_id needs to be an id, not another css selector

You can use these headers to conditionally branch your response based on *which element* the request was triggered fromexample of format:Request Headers:Hx-Trigger: search_inputHx-Trigger-Name: search

An example in the wild: The Laravel blade documentation:https://laravel.com/docs/11.x/blade#rendering-blade-fragments

We're (Me're) 43 episodes in. What's next?

We talk integrating htmx with Wordpress!Andrew Rhyand https://andrewrhyand.com/Mentioned links:HTMX movies demo: (very slick & educational)https://htmx.andrewrhyand.com/Author of the Wordpress/Inertia Adapter:https://github.com/boxybird/inertia-wordpressAlpine/Livewire in Wordpress:https://github.com/boxybird/morph

Advanced htmx: Recap & grouping each of the 13 advanced attributes we went over this "season" This means we have now gone through every attribute! (not counting extensions)1. Browser & HistoryHx-push-url - set your urlHx-replace-url - replace your url, save no snapshotHx-history-elt - change snapshot from default to particular elementHx-history - prevent something from being saved in the htmx snapshot2. Customizing RequestsHx-request - set no headers or timeout on requestHx-headers - set custom headers, dynamic or static jsonHx-sync - allows you to set rules for multiple htmx requests at once3. Submitting DataHx-validate - allows you to use validation rules outside of formsHx-disabled-elt - disables a button once you’ve clicked itHx-encoding - allows you to upload files via Ajax4. Overriding HtmxHx-disable - allows you to disable htmx for user comments, posts, etcHx-disinherit - breaks inheritance chain for one or more attributes5. Fun!Hx-select-oob - lets you place element from your response wherever you want

Reddit thread with an example:https://www.reddit.com/r/htmx/comments/1bukz76/hxselect_reset/

What if you wanted a part of your site to persist even using the back and forward on your browser?Here is the reddit thread I mention in the episode, with an example:https://www.reddit.com/r/htmx/comments/1bu14sg/how_to_make_a_audio_player_that_survives_the_back/

This one might actually be essential, not just an advanced attribute. Keeps you and your users from accidentally submitting things multiple times.

An amazingly simple file uploading form *with a progress bar* using htmx:<form id='form'       hx-encoding='multipart/form-data'       hx-post='/[where-you-want-post-it]'      hx-target='#target-div'>    <input type="hidden" name="_token" value="" />    <input type='file' name='file'>    <button>        Upload    </button>    <progress id='progress' value='0' max='100'></progress></form><script>    htmx.on('#form', 'htmx:xhr:progress', function(evt) {      htmx.find('#progress').setAttribute('value', evt.detail.loaded/evt.detail.total * 100)    });</script>