Typo3 : display detail data in a modal pop up-CodePudding

I created a list of users in clickable cards, and when we click on the card, a modal popup appear.

I want now to display the detail of the user in theses popup but I don't really know how I have to do for displaying on the popup, the data of the user on which I click.

there is my List code :

<div >
    <div >
        <f:for each="{users}" as="user">
                <div >
                        <div >
                            <h5 >{user.firstname} {user.lastname}</h5>
                            <div >
                                <ul>
                                    <li >{user.address}</li>
                                    <li >{user.telephone}</li>
                                    <li >{user.title}</li>
                                    <li >{user.address}</li>
                                </ul>
                            </div>
                        </div>
                </div>
        </f:for>
    </div>
    <!-- Modal -->
    <div  id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <ul>
            <li ></li>
            <li ></li>
            <li ></li>
            <li ></li>
            <li ></li>
        </ul>
    </div>
</div>

controller :

    public function listAction()
    {
        $users = $this->frontendUser->findAll();
        $this->view->assign('users', $users);
    }

Is my request possible with my current code? My modal works perfectly, I just need to add my data

Someone have an Idea to how can I do it ?

Update : solved with some Jquery code to copy my data already existing :

        <script>
            const modal = $('#exampleModal');
            $('.card-annuaire').click(function () {
                const divAnnuaire = $(this);
                $('.modal-title', modal).text($('.card-title', divAnnuaire).text());
                $('li.tel', modal).text($('.tel', divAnnuaire).text());
                $('li.service', modal).text($('.service', divAnnuaire).text());
                $('li.loc', modal).text($('.loc', divAnnuaire).text());

            })
        </script>

CodePudding user response：

The handling of the modal is a question of javascript.
If you have all data in each block of the user list you can add some javascript to each block which copies this data from the current block (this) into your modal and then unhide the modal.

On hiding the modal you don't need to do anything to the included data, as the next click (which also can occur if the modal already is visible) will fill in the data from the clicked data block.

If in your modal more data should be visible than you stored in your list you need to do something more:
you need the ID of the data to get the whole user-record by ajax call.
but otherwise the handling is the same: on each list block you have an eventhandler, which is triggered by a click and which uses data from the block (all fields, or just the uid for an ajax-call to get all data) and insert this data into the modal.