like hyperscript that way to add about alpine-ajax HOT 7 CLOSED

Thanks so much!
I got the point now.

from alpine-ajax.

Hi Eric, the Alpine AJAX example uses a native HTML Dialog, no extra library is required.

There are a few ways you could add a class with Alpine. If the modal element already has an id I would use @ajax:before="document.getElementById('modal').classList.add('uk-open')" but you could also use x-ref to select the modal or :class to add the modal class.

from alpine-ajax.

Hi @imacrayon

I prefer the modal is got by alpine ajax, and then add the top element downloaded by alpine ajax has 'uk-open' class, so I prefer to use alpine ajax event to add class, not alpine event to add class.

Do you think it is possible?
The htmx && Hyperscript that case is using Hyperscript event to add class, after downloaded.

Thanks
Eric Xin

from alpine-ajax.

The htmx && Hyperscript that case is using Hyperscript event to add class, after downloaded.

You can listen for the ajax:after event instead of ajax:before to set your class after the download:

@ajax:after="document.getElementById('modal').classList.add('uk-open')"

from alpine-ajax.

Hi @imacrayon

This @Ajax:after is alpine.ajax has, or alpine has?

Thanks
Eric Xin

from alpine-ajax.

Hi @imacrayon

You know @Ajax:after then I need to extract the html string from response, then I need to place into the right element, I may need to wait for a bit, is there a wait function or something else I can use to delay 10 or 20ms after @Ajax:after?

Thanks
Eric Xin

from alpine-ajax.

This @Ajax:after is alpine.ajax has, or alpine has?

It's an event fired by Alpine AJAX, you can see them all here: https://alpine-ajax.js.org/reference/#ajax-events

I prefer the modal is got by alpine ajax

Sorry, i didn't understand this at first but, I get what you are saying now. I put together an example here: https://codepen.io/imacrayon/pen/KKrgmgZ

Instead of selecting the modal after the response, I would add x-init on the modal, the x-init will automatically run when the modal is added to the page. (see line 9 in the CodePen)

from alpine-ajax.