How to execute a JS instead of a AJAX request after trigger? #3289

gumbarros · 2025-04-23T22:56:20Z

gumbarros
Apr 23, 2025

I have the following working example in prod:

    <tr
        @if (isLast && ViewData.ContainsKey("NextPage"))
        {
            <text>
                hx-get="@Url.Action("LoadMore", new { Page = ViewData["NextPage"]})"
                hx-trigger="revealed"
                hx-indicator=".tr-indicator"
                hx-include="[name='Action'], [name='SearchText']"
                hx-swap="afterend"
            </text>
        }>

But in a legacy app, for my own reasons, I want to do something like this:

    <tr
       @if (isLast && ViewData.ContainsKey("NextPage"))
       {
           <text>
               hx-javascript-that-will-run-on-revealed="paginate(@ViewData["NextPage"])"
               hx-trigger="revealed"
               hx-indicator=".tr-indicator"
               hx-include="[name='Action'], [name='SearchText']"
               hx-swap="afterend"
           </text>
       }>

Where the paginate function that I don't want to change for my reasons will do the AJAX.
Is it possible?

yawaramin · 2025-04-23T23:04:39Z

yawaramin
Apr 23, 2025

Did you try https://htmx.org/attributes/hx-on/ ?

Also it looks like you have a syntax error in your HTML?

<text> <!-- tag has end '>', so hx-get attribute is outside it -->
  hx-get="@Url.Action("LoadMore", new { Page = ViewData["NextPage"]})"

1 reply

gumbarros Apr 23, 2025
Author

Did you try https://htmx.org/attributes/hx-on/ ?

Also it looks like you have a syntax error in your HTML?
<text> 
  hx-get="@Url.Action("LoadMore", new { Page = ViewData["NextPage"]})"

I'm using ASP.NET Core, <text> is a server side tag to render inside another tag.

gumbarros · 2025-04-23T23:19:18Z

gumbarros
Apr 23, 2025
Author

0 replies

gumbarros · 2025-04-23T23:59:01Z

gumbarros
Apr 23, 2025
Author

On click works fine:

<tr id="row4" hx-trigger="revealed" hx-on:click="alert('aaaa')">
      <td>Placeholder for example purposes</td>         
 </tr>

hx-on:revealed, hx-on::revealed and similars do not.


<tr id="row4" hx-trigger="revealed" hx-on::revealed="alert('aaaa')">
      <td>Placeholder for example purposes</td>         
 </tr>

0 replies

gumbarros · 2025-04-24T00:13:08Z

gumbarros
Apr 24, 2025
Author

Log:

htmx:beforeProcessNode 
<body>
 
Object { elt: body }
htmx.min.js:1:6167
htmx:beforeProcessNode 
<input id="menu-search-box" class="form-control search-inpu…ed-pill form-control-sm" name="menu-search-box" hx-get="/Search" hx-trigger="input changed delay:500ms, search" hx-target="#menu-search-box-results" hx-swap="innerHTML" hx-indicator=".menu-search-indicator" type="search" placeholder="Procurar..." aria-label="Search">
 
Object { elt: input#menu-search-box.form-control.search-input.rounded-pill.form-control-sm }
htmx.min.js:1:6167
htmx:beforeProcessNode 
<form id="languageForm" method="post" action="/Language/SetLanguage">
 
Object { elt: form#languageForm }
htmx.min.js:1:6167
htmx:beforeProcessNode 
<button id="language-button" class="nav-link" data-bs-placement="bottom" title="Idioma" type="submit" aria-expanded="false" data-bs-toggle="dropdown">
 
Object { elt: button#language-button.nav-link }
htmx.min.js:1:6167
htmx:beforeProcessNode 
<button class="dropdown-item " type="submit" name="culture" value="en-US">
 
Object { elt: button.dropdown-item }
htmx.min.js:1:6167
htmx:beforeProcessNode 
<button class="dropdown-item " type="submit" name="culture" value="es-ES">
 
Object { elt: button.dropdown-item }
htmx.min.js:1:6167
htmx:beforeProcessNode 
<button class="dropdown-item active" type="submit" name="culture" value="pt-BR">
 
Object { elt: button.dropdown-item.active }
htmx.min.js:1:6167
htmx:beforeProcessNode 
<button class="dropdown-item " type="submit" name="culture" value="es-MX">
 
Object { elt: button.dropdown-item }
htmx.min.js:1:6167
htmx:beforeProcessNode 
<div class="d-flex justify-content-center mt-3" hx-get="/Notifications/Unread" hx-trigger="intersect once" hx-swap="outerHTML">
 
Object { elt: div.d-flex.justify-content-center.mt-3 }
htmx.min.js:1:6167
htmx:beforeProcessNode 
<form id="logoutForm" action="/Account/Logout" method="post">
 
Object { elt: form#logoutForm }
htmx.min.js:1:6167
htmx:beforeProcessNode 
<button class="btn btn-secondary d-flex flex-center w-100" type="submit">
 
Object { elt: button.btn.btn-secondary.d-flex.flex-center.w-100 }
htmx.min.js:1:6167
htmx:beforeProcessNode 
<form id="masterdata-form" action="/DataDictionary/Log?isModal=False" method="post">
 
Object { elt: form#masterdata-form }
htmx.min.js:1:6167
htmx:beforeProcessNode 
<button class=" btn btn-secondary ms-1" type="submit" role="button" onclick="GridViewFilterHelper.fil…',false,);return false;">
 
Object { elt: button.btn.btn-secondary.ms-1 }
htmx.min.js:1:6167
htmx:beforeProcessNode 
<tr id="row4" hx-trigger="revealed" htmx-on:revealed="alert('aaaa')">
 
Object { elt: tr#row4 }
htmx.min.js:1:6167
revealed 
<tr id="row4" hx-trigger="revealed" htmx-on:revealed="alert('aaaa')" data-hx-revealed="true">
 
Object { elt: tr#row4 }
htmx.min.js:1:6167
htmx:trigger 
<tr id="row4" hx-trigger="revealed" htmx-on:revealed="alert('aaaa')" data-hx-revealed="true">
 
Object { elt: tr#row4 }
htmx.min.js:1:6167
htmx:load 
<body>
 
Object { elt: body }
htmx.min.js:1:6167

0 replies

yawaramin · 2025-04-24T00:24:37Z

yawaramin
Apr 24, 2025

See #3131

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

How to execute a JS instead of a AJAX request after trigger? #3289

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 5 comments 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

How to execute a JS instead of a AJAX request after trigger? #3289

Uh oh!

Uh oh!

gumbarros Apr 23, 2025

Replies: 5 comments · 1 reply

Uh oh!

yawaramin Apr 23, 2025

Uh oh!

gumbarros Apr 23, 2025 Author

Uh oh!

gumbarros Apr 23, 2025 Author

Uh oh!

Uh oh!

gumbarros Apr 23, 2025 Author

Uh oh!

gumbarros Apr 24, 2025 Author

Uh oh!

yawaramin Apr 24, 2025

gumbarros
Apr 23, 2025

Replies: 5 comments 1 reply

yawaramin
Apr 23, 2025

gumbarros Apr 23, 2025
Author

gumbarros
Apr 23, 2025
Author

gumbarros
Apr 23, 2025
Author

gumbarros
Apr 24, 2025
Author

yawaramin
Apr 24, 2025