Display modal with information from a specific button

Question

I have a Django template that renders a little bit of data about the user. It is a for list that goes through and creates this element for each user. I want to be able to click on that and have a modal appear with all of their information. So if I click on user1 I get user1's information, and so on. I am not sure how to do this.

I am currently trying to use JavaScript to do this. The problem is that I cannot get the data from the specific element into JavaScript. I have the modal working, in that it pops up. However, I cannot find a way to retrieve the data from the specific user clicked on.

#dashboard.html
{% for party in parties %}
    <div class="userInfo">
        <img user="{{party}}" src="{% static 'restaurants/images/userIcon.png' %}">
        <div class="userText">
            <p>{{party.lastName}} </p></br>
        </div>
        <button name="remove"><a href="/restaurants/removeParty/{{party.id}}">Remove</a></button>
    </div>
{% endfor %}

I just need to get data from a specific user into the js from the specifc button clicked. Maybe there is a better way to do this? I am not sure. I just need be able to populate a modal with data from the specific user clicked. The above code shows the html for the loop that creates the user info.

Answer 1

It may be a bit verbose depending on how large your object is but you could use data attributes:

{% for party in parties %}
    <div class="userInfo" data-lastName="{{party.lastName}}" data-etc="{{party.etc}}">
        <img user="{{party}}" src="{% static 'restaurants/images/userIcon.png' %}">
        <div class="userText">
            <p>{{party.lastName}} </p></br>
        </div>
        <button name="remove"><a href="/restaurants/removeParty/{{party.id}}">Remove</a></button>
    </div>
{% endfor %}

and then just access them when you click to open the modal:

const users = document.querySelectorAll('.userInfo');

for (let i = 0; i < users.length; i++) {
  users[i].addEventListener('click', function() {
    const userData = {
           lastName: this.dataset.lastName,
           etc: this.dataset.etc
        }
    openMyModal(userData);
  })
}
})