Dynamic load the modal from the backend

[adlecluse]

Hi!

Do you have some recommendations on how to load a modal server side? More specific, the contents of the modal when the modal is opened. I would like to do e.g. GET https://something.com/my-employee-selection-modal where the modal body has a list of employees where I will be able to select employees with a checkbox. Not sure how to do it (of if it is even possible) as we need a ModalTrigger to toggle the modal purely on the frontend.

@components.ModalTrigger("modal-user-selection-for-planning") {
	@components.Button(components.ButtonProps{Text: "Open Modal"})
}

Or does the Modal have something like a load function where it would be able to fetch the content?
Or are there other options?

Also: Keep up the good work!

[adlecluse]

I have tried something out myself by using HTMX.

I have added an id to refer my modal content:

@components.ModalBody() {
	<div id="modalContent"></div>
}

And added an eventlistener for the open-modal event that is being dispatched by the modal

<script>
	document.addEventListener('open-modal', (event) => {
	       htmx.ajax('GET', '/get-form', { target: '#modalContent' });
	});
</script>

Is this a good approach?

[dimmerz92]

Assuming you want to lazy load into the ModalBody after the initial page load, you could just add a lazy loading child element and use htmx for the load trigger.

@components.ModalBody() {
    <div hx-get="/your-endpoint-here" hx-trigger="load"></div>
}

hx-trigger will make a request to your endpoint after the initial page load, regardless of the modal being open or not. This will insert the response inside of the <div>. If you want it to replace the <div> then add hx-swap="outerHTML".

[adlecluse]

I'm getting that part now, thanks!

But let's say I want the modal loaded server side, how would I open it? As it uses AlpineJS with the open variable that is by default set to false. Don't I need something to trigger that modal to become visible?

[dimmerz92]

That's a toughie based on the current implementation.

If you're simply just copying the code into your codebase, you could just initialise it as true, but if you're importing it as a package, there may not be a nice elegant solution.

Perhaps @axzilla could expose an open/closed endpoint as part of the modal props?

Perhaps something to also try as a work around would be to trigger a click of the modal button using htmx after the swap event using hx-on? I don't know if this would work or not, it would probably depend on the alpine code being fully initialised.

Try give this a crack an see how it goes?

@components.ModalBody() {
    <div
        hx-get="/your-endpoint-here"
        hx-trigger="load"
        hx-on::after-request="document.querySelector('#modal-open-button').click()"
    ></div>
}

It's a little bit hacky, but it feels like the most straight forward way to do it to me, without having access to the internal implementation of the component.

If alpine has loaded by the time the hx-on is triggered, I think this should work. If it hasn't worked, try putting a delay on the trigger? hx-trigger="load delay:1s".

[axzilla]

If I understand your problem correctly, you want to dynamically load content (specifically an employee selection list) into a modal after it opens, rather than including it in the initial page load.

@components.ModalBody() {
  <div
    hx-get="/api/employees" 
    hx-trigger="intersect once"
    hx-indicator="#loading"
  >
    <div id="loading" class="flex justify-center p-4">
      <div class="animate-spin h-8 w-8 border-4 border-primary border-t-transparent rounded-full"></div>
    </div>
  </div>
}

What do you think about this solution?

[dimmerz92]

It reads to me as if he wants to render the modal on the server with a htmx request on the front to get the content, but have it render as default open instead of closed.

Maybe some clarification the request is needed?

[adlecluse]

@axzilla and @dimmerz92 yes, both interpretations are a solution for me

1. Have the modal already in the frontend and fire a request for the content when the modal is shown with a loading spinner at first and when the content response is there we will show it.
2. Request the full modal with content from the backend and open it directly when the request resolves

I have a small preference for option 1 as the user will see the dialog immediately with a loading spinner inside of it after some button click. This way the user feels the application responding "quicker". But that is just an assumption.

But option 2 would be a simple solution as it would be just firing a request and the modal pops up when the response is there.

@axzilla I will try you solution to see how that works!

[axzilla]

Option 1 is IMO the way how a modal should work. Happy coding!

[adlecluse]

If I understand your problem correctly, you want to dynamically load content (specifically an employee selection list) into a modal after it opens, rather than including it in the initial page load.

@components.ModalBody() {
  <div
    hx-get="/api/employees" 
    hx-trigger="intersect once"
    hx-indicator="#loading"
  >
    <div id="loading" class="flex justify-center p-4">
      <div class="animate-spin h-8 w-8 border-4 border-primary border-t-transparent rounded-full"></div>
    </div>
  </div>
}

What do you think about this solution?

It does the job, thanks!