Trigger Javascript function when component has loaded

I’ll try to explain the use case as much as I can.

Using Sprig, I’ve ‘upgraded’ a page that used to build a bunch of (hidden) data in table rows on a page, and when a user clicked a button, a JavaScript function would grab the data and spit out a CSV file to download.

The data is coming from Craft Commerce Orders which (currently) is several thousand rows, and is likely to increase - this cause the page to take some time to fully load.

Sprig to the rescue! I’ve replaced the rows to use a component instead. Now the hidden data isn’t fetched until the button is clicked - making the page load in seconds. The problem I have is when the button is clicked, the component updates with the hidden data (this works), but when the data is captured I want the JS function to be called. I wasn’t sure which HTMX trigger would be used in this instance?

Pseudo code is as follows:

show the row of text 
show a button to download with a s-vars of download=true

if download=true
  build the hidden data
  trigger the download
endif

I assumed sticking some {% js %} tags in the component would mean when the component re-loads (with download set to true) the JS will be executed, but it’s not.

[bencroker]

Yeah that makes sense, you want the button to re-render the entire component, not just itself.

[jamiematrix]

Think I have it. I’ve taken out the s-* attributes from the button after ‘sprig’ attribute and the JS is being called once. I guess having those in there are making the component reload/change too?

I’m now left with: <button id="festibutton" class="button" sprig> That’s the only change to the component.