tabs-hateoas load data

[johntom]

Hi, Doing a POC with htmx and its going failry well, Looking at source of https://htmx.org/examples/tabs-hateoas/ example shows a function call for each tab, I'm trying to emulate that in my nodejs example but it does not load. I know I can load each tab with call to an actual file with hx-get="./tab1.html" or hx-get="https://gethtmxpayload/tab1" where I serve it up from an api endpoint but curious to using the fuctions shown in demo, TIA John verion htmx.org@1.4.1

<div id="tabs" hx-get="/tab1" hx-trigger="load after:100ms" hx-target="#tabs" hx-swap="innerHTML"></div>
--
  | <script>
  | onGet("/tab1", function() {
  | return `
  | <div class="tab-list">
  | <a hx-get="/tab1" class="selected">Tab 1</a>
  | <a hx-get="/tab2">Tab 2</a>
  | <a hx-get="/tab3">Tab 3</a>
  | </div>
  |  
  | <div class="tab-content">
  | Commodo normcore truffaut VHS duis gluten-free keffiyeh iPhone taxidermy godard ramps anim pour-over.
  | Pitchfork vegan mollit umami quinoa aute aliquip kinfolk eiusmod live-edge cardigan ipsum locavore.
  | Polaroid duis occaecat narwhal small batch food truck.
  | PBR&B venmo shaman small batch you probably haven't heard of them hot chicken readymade.
  | Enim tousled cliche woke, typewriter single-origin coffee hella culpa.
  | Art party readymade 90's, asymmetrical hell of fingerstache ipsum.
  | </div>`
  | })
  |  
  | onGet("/tab2", function() {
  | return `
  | <div class="tab-list">
  | <a hx-get="/tab1">Tab 1</a>
  | <a hx-get="/tab2" class="selected">Tab 2</a>
  | <a hx-get="/tab3">Tab 3</a>
  | </div>
  |  
  | <div class="tab-content">
  | Kitsch fanny pack yr, farm-to-table cardigan cillum commodo reprehenderit plaid dolore cronut meditation.
  | Tattooed polaroid veniam, anim id cornhole hashtag sed forage.
  | Microdosing pug kitsch enim, kombucha pour-over sed irony forage live-edge.
  | Vexillologist eu nulla trust fund, street art blue bottle selvage raw denim.
  | Dolore nulla do readymade, est subway tile affogato hammock 8-bit.
  | Godard elit offal pariatur you probably haven't heard of them post-ironic.
  | Prism street art cray salvia.
  | </div>`
  | })
  |  
  | onGet("/tab3", function() {
  | return `
  | <div class="tab-list">
  | <a hx-get="/tab1">Tab 1</a>
  | <a hx-get="/tab2">Tab 2</a>
  | <a hx-get="/tab3" class="selected">Tab 3</a>
  | </div>
  |  
  | <div class="tab-content">
  | Aute chia marfa echo park tote bag hammock mollit artisan listicle direct trade.
  | Raw denim flexitarian eu godard etsy.
  | Poke tbh la croix put a bird on it fixie polaroid aute cred air plant four loko gastropub swag non brunch.
  | Iceland fanny pack tumeric magna activated charcoal bitters palo santo laboris quis consectetur cupidatat portland aliquip venmo.
  | </div>`
  | })
  |  
  | </script>

[gone]

The functions are just being used to mock out the server responses. You might want to check out the demo toolkit (https://htmx.org/docs/#creating-demos) which was created after the examples, and does the same thing in a more structured manner

[1cg]

thank you @gone