1

I'm new to Django and I have a problem moving my stuff to the front end of my website.

I want to do fantasy-style website. My main page will display a list of NHL players. These players will be picked by the user and added to their team in order .

My problem is this: I want a popup-style modal to open when a user clicks a player on the main page. This modal would contain a confirmation before this specific player is added to the user's team.

Here is my player model:

class Player(models.Model):
    name = models.CharField(max_length=30)
    position = models.CharField(max_length=5)

Here is my main page view:

def main_page(request):
    players = Player.objects.all()
    my_dict = {"players":players}
    return render(request, 'my_app/main_page.html', context=my_dict)

Here is my template for the main page:

{% extends "my_app/base.html" %}
{% block body_block %}

<button onclick="document.getElementById({{player.name}}).style.display='block'" class="w3-button w3-black">Open Modal</button>
    <div class="w3-modal-content">
      <div class="w3-container">
        <span onclick="document.getElementById({{player.name}}).style.display='none'" class="w3-button w3-display-topright">&times;</span>
                  <p>{{player.position}}</p>
      </div>
    </div>

{% for player in players %}

<tr>
    <th>{{player.name}}</th>
    <th onclick="document.getElementById({{player.name}}).style.display='block'" class="w3-button w3-black" width="100%">Open Modal</th>
</tr>

{% endif %}

{% endblock %}

As you can see, I would like the modal popup to display the player's position.

Unfortunately, not only is the modal not working, I have no clue how to make it display attributes of my Player model.

Would anybody know how to modify my html to fix the modal?

Thank you very much for your help!

EDIT: found a very interesting answer on How do I integrate Ajax with Django applications?

chenard612
  • 101
  • 2
  • 15

0 Answers0