Skip to content

Docs: Tiny fixes for Hotwire page. #2322

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
alexpetros merged 3 commits into from
Feb 21, 2024
Merged

Docs: Tiny fixes for Hotwire page. #2322

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e9b9a7f
Solve wrapping issues for small content area.
gnat Feb 15, 2024
0231397
Merge branch 'bigskysoftware:master' into docs_hotwire_revision_2
gnat Feb 19, 2024
8df4da7
Update migration-guide-hotwire-turbo.md
gnat Feb 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions www/content/migration-guide-hotwire-turbo.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@ addEventListener("htmx:afterOnLoad", (event) => {
})
```
* Or, [hx-on](@/attributes/hx-on.md) may be used:
* `hx-on:submit='event.target.querySelectorAll("button").forEach(node => { node.disabled = true })'`
* `hx-on:htmx:afterOnLoad='event.target.querySelectorAll("button").forEach(node => { node.disabled = false })'`
* `hx-on:submit= 'event.target.querySelectorAll("button").forEach(node => { node.disabled = true })'`
* `hx-on:htmx:afterOnLoad= 'event.target.querySelectorAll("button").forEach(node => { node.disabled = false })'`
* Or, [hyperscript](https://hyperscript.org) may be used: `_="on submit toggle @disabled <button/> in me until htmx:afterOnLoad"` See: [Cookbook](https://hyperscript.org/cookbook/)

## Turbo Frames
Expand All @@ -50,13 +50,13 @@ document.body.addEventListener('htmx:configRequest', (event) => {
```

* Or, use an [hx-trigger](@/attributes/hx-trigger.md) condition: `hx-trigger="submit[action(target)]"`
* Does not currently resolve async calls such as `fetch`. See: https://github.com/bigskysoftware/htmx/issues/912
Comment thread
gnat marked this conversation as resolved.
* Does not currently resolve async calls. See [issue](https://github.com/bigskysoftware/htmx/issues/912)
* Or, use [hx-on](@/attributes/hx-on.md): `hx-on:click="event.preventDefault(); action(this); htmx.trigger(this, 'ready')"` `hx-trigger="ready"`
* Or, use [hyperscript](https://hyperscript.org): `_="on submit halt the event action(target) trigger ready"` `hx-trigger="ready"`
* Will resolve async calls such as `fetch`. See: [async transparency](https://hyperscript.org/docs/#async)

## Stimulus

* [hx-on](@/attributes/hx-on.md) provides a simple, inline, vanilla substitute for a wide variety of front end use cases.
* [hx-on](@/attributes/hx-on.md) provides an inline, vanilla substitute for a wide variety of use cases.
* [hyperscript](https://hyperscript.org) is a close analogue and an official companion project to htmx, but the two projects are entirely separated and can be used exclusively from each other or any other library.
* For other options, see: [htmx: Scripting](/docs/#scripting)