Generate data when button/link is clicked Django-CodePudding

I'm very new to Django and web apps. I have an HTML page that allows users to search database for player names. An HTML table is returned. Each entry is a player's performance in relation to a game they played. Each game has 10 players associated with it

search_db.html

<h1>Search Results for: {{searched}}</h1>
        <table>
            {% for player in match %}
            <tr> 
                <td>
                  <a href=search_player_db/{{player.match_id}}>{{player.match_id}}</a> 
                  </td>
                
                <td>{{ player.name}}</td>
                <td>{{ player.role}}</td>
                <td>{{ player.win_or_loss}}</td>
            </tr>
            {% endfor %}
        </table> 
    {{IM TRYING TO GENERATE DATA HERE}}

The match id is a link that brings the user to a page with additional details related to the match match_details.html

{%block stats%}
<body>
    <h1>Winning team</h1>
        {%for player in winners %}
        <li>
            {{player.name}}
            {{player.role}}
            </li>
        {%endfor%}
    <h1>Losing team</h1>
        {%for player in losers %}
        <li>
            {{player.name}}
            {{player.role}}
            </li>
    {%endfor%}
 </body>
{%endblock%}

Instead of being redirected to a new page when clicking the link, I'd like to load the content from match_details.html into the page below the table on search_db.html through the button/link in search_db.html. That way the user can click through search results

views.py


    def search_playerdb(request):
        if request.method == "POST":
            searched = request.POST['searched']
            players = PlayerInfo.objects.filter(player_name__contains=searched)
        context={
            'searched': searched, 
            'players': players}
            return render(request, 'searchdb.html', context)

        else:
            return render(request, 'searchdb.html', {})

    def display_match(request, matchid):
        match = PlayerInfo.objects.filter(match_id=matchid)
        winners = match.filter(win_or_loss=True)
        losers = match.filter(win_or_loss=False)
        context = {
            'match': match,
            'winners': winners,
            'losers': losers,}
        return render(request, 'match_details.html', context)

CodePudding user response：

In order to do this you'll need to use Javascript to make an AJAX call. In case you're unaware, an AJAX call allows a web page to send or receive data without having to refresh the page.

This can be done using pure javascript - Example https://www.w3schools.com/xml/ajax_intro.asp

Or you could use a library to abstract some of the complexity away. One example of this would be JQuery https://www.w3schools.com/jquery/ajax_ajax.asp

In either case, you will be calling a new URL on your site.