Skip to content

Instantly share code, notes, and snippets.

@cyberfly

cyberfly/article_list.html

Last active May 14, 2024 02:44
Show Gist options
  • Save cyberfly/47f47e326f51c61eabe2c76e1edd60df to your computer and use it in GitHub Desktop.
Save cyberfly/47f47e326f51c61eabe2c76e1edd60df to your computer and use it in GitHub Desktop.
Download ZIP
example use case: after polling get how many pending article left, once it become zero, trigger event to ask article list to get latest data
Raw
article_list.html
<div
hx-get="/api/v2/{{ACTIVE_PROJECT_CODE}}/refresh_article_list"
hx-trigger="finishArticleGeneration from:body"
hx-select="#article_list_content"
hx-target="this"
>
<div id="article_list_content">
<!--do something-->
</div>
</div>
Raw
common.js
const HTMX_STOP_POLLING = 286;
window.pendingArticlesCountAfterRequest =
function pendingArticlesCountAfterRequest(e) {
const status = e.detail.xhr.status;
if (status === HTMX_STOP_POLLING) {
document.body.dispatchEvent(new Event("finishArticleGeneration"));
}
};
Raw
generating_count.html
<div
hx-get="/api/v1/pending_articles_count"
hx-trigger="every 10s"
hx-select="#pending_articles_count_content"
hx-target="this"
hx-on::after-request="pendingArticlesCountAfterRequest(event)"
class="header-menu">
<!--do something-->
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment