Alternative to jQuery .empty()

[simonferndriger]

I'm using a widget that needs to be re-initialized once the input data changes. In jQuery I used $container.empty().append($widget); to do that. Now with AlpineJS I struggle to do so. In the console there is this error message:

There already is a globally defined variable with the name "JustWatch".
Aborting widget initialization.

So, is there a way to make this work, i.e. remove an initialized widget completely, in order to re-initialize it again differently?

https://codepen.io/simonferndriger/pen/yLdJjyP

[ekwoka]

Normal Javascript.

Replace an elements children:
https://developer.mozilla.org/en-US/docs/Web/API/Element/replaceChildren

Replace an element:
https://developer.mozilla.org/en-US/docs/Web/API/Element/replaceWith

99.9% of what jquery could do is already really simple to do in plain javascript.

for your specific example, I'd jsut use x-for and have flick be an array one on element (the id) and have the buttons just change the whole array.

Key the x-for to the actual value inside.

then the x-for will remove and create the new ones for that widget to see.

[SimoTod]

the error has nothing to do with the question though.
you are just re-adding the same script tag <script src="https://widget.justwatch.com/justwatch_widget.js" async></script> which is not supported by that SDK

[ekwoka]

Ah right.

Yeah, don't change the script. Just remove and re-add the element, which x-for solved tidely.

[simonferndriger]

Thanks a lot for your quick and top support guys! I actually ended up changing the iframe url directly.

[ekwoka]

iframe!?!?!?!

oh lawdy

[simonferndriger]

Yeah, well, turns out the widget just generates an iframe and places the div attributes as params in the url. Since it takes quite a bit to do that it's even way faster that way 😅

[simonferndriger]

PS: You can see the result on https://matchflix.ch/ now 😊 Just click any movie or show...