imacrayon
commented
1 month ago Hi Justis, thanks for the thorough write up!
This is an interesting proposal, I can definitely see a need for it in a "recursive" situation like you've got going on in your project. Feel free to take a shot at a PR! It would probably be best to work off of the next branch I just pushed. Sorry, I'm right in the middle of a big refactor, but that branch should be almost ready for release (just a few more tests to write).
Hey Christian! I saw you recently got married, congrats!
Loving alpine-ajax so far, but I've struggled a bit with the very first thing I wanted to use it for.
Using just alpine, I made myself a reusable component that simply wraps an arbitrary element and when clicked, provides a popup modal that contains the body of whatever page was linked to. It's a bit messy looking, but here it is: https://gist.github.com/justisr/a509c870cc20580fd3375d92c6ba4621
I wanted to switch this over to using Alpine-Ajax, but AA assumes that the response is going to contain the same element ID that I'm wanting to insert into on the client's page, which means I can't pass it an arbitrary url because:
I can solve # 1 by adding an ID to the body element of every template, so if I want to show the full body of any link, I can just specify the body element id. However, # 2 means that the result would be that I'm replacing my client's entire body with the response body, rather than being able to replace only the modal I'm trying to display.
So basically every url needs to be to a page that's uniquely designed to be inserted into specifically the modal I'm producing. Which means quite a bit of extra work if I want to make a page accessible with and without javascript, or embeddable in different modals/locations.
My thoughts on a flexible solution would be to provide the option of differentiating between the client's target element and the response's target element. Something like x-target="my-modal:page-body" where the colon indicates different targets (delimiter configurable since some projects might use the colon in ids). If you wanted to target multiple elements, you could still space separate them x-target="modal1:component1 modal2:component2" and perhaps a more concise syntax of targeting the id of the current element with x-target=":component1" or less commonly, the current element id in the target response x-target="modal1:"
If this sounds like it aligns with your goals for the project, I'd be happy to take a look at making a pull request.