How to update an Alpine component when loaded by ajax

[jsantari]

I've been pulling my hair out for days on this. I have been trying dynamically load a component that uses an external data function and the html that goes with it using ajax using the htmx.org library. If all the code is in the initial page it works fine. When using the htmx.org library to load the js function code and html dynamically you always get a function not found error from Alpine on my function (named calc) as it apparently can not see it. If I move the js code into the main page and still load the html with htmx then it works but that defeats the purpose of trying to make it into a standalone component package. I've tried to define my function using window.calc = function() {...} but no luck with that either. Is there no way to get this to work?

[BartChris]

Have you used
<script type="text/javascript">
inside your htmx-Template? The "text/javascript" is necessary for htmx to actually evalute the javascript code.

[KevinBatdorf]

Is dropdown available if you type it into the browser console? If yes, then it's probably loading too late, so it's not there when Alpine is looking for it.

edit: Just saw Ryan's reply above mine, so if that's the case you just need to load things differently.

[Saeven]

@jsantari you solve this one? I'm running into a similar issue. Interestingly, loading partials like this with jQuery.load works just fine.

[jsantari]

No never did - I was just trying some things out so it wasn't a priority and I didn't bother to pursue it further.

[dmzone]

window.dropdown =... maybe?

[BartChris]

Maybe the latest changes in HTMX allow that? bigskysoftware/htmx#603