提交表单后刷新数据表的 Django 和 htmx 消息

问题描述 投票：0回答：1

我是 django 编程语言的初学者，请需要一些帮助。

我有一个数据，在验证表单后显示一条成功消息：来自 

return httpReponse
的“操作成功完成”，但不刷新页面。

但是，通过在表单中添加此脚本

<form hx-post="{{ request.path }}" class="modal-content" hx-on="htmx:afterRequest:location.reload()"\>

数据表刷新但未显示成功信息

views.py

def index(request):
    all_person = Personne.objects.all()
    context = {'all_person': all_person}
    return render(request, 'index.html', context)

    def add_personne(request):
    if request.method == "POST":
        form = PersonneForm(request.POST)
        if form.is_valid():
              form.save()
              return HttpResponse(status=204,
                                headers={'HX-Trigger': json.dumps({
                                         "personList": None,
                                        "showMessage": "Opération effectuée avec succès",
                                     })  
                                })
            
    else:
        form = PersonneForm()
    return render(request, 'form_personne.html', {'form':form})

index.html

    {% extends "base.html" %}

{% block title %}Tableau-Dynamique{% endblock title %}

{% block content %}

<div class="col md-12">
    <button type="button" class="btn btn-primary" hx-get="{% url 'add_personne' %}" hx-target="#dialog"
        style="width:300px;">
        Add New
    </button>

</div>
<br>
<h3 class="mt-3">Option de recherche</h3>

<!--HTML table with student data-->


<table id="tableID" class="display">
    <thead>
        <tr>
            <th class="px-2 py-2 text-center">N°</th>
            <th class="px-2 py-2 text-center">Nom</th>
            <th class="px-2 py-2 text-center">Age</th>
        </tr>
    </thead>

    <tbody>
        {% for personne in all_person %}
        <tr>
            <td>{{ forloop.counter }}</td>
            <td>{{personne.nom}}</td>
            <td>{{personne.age}}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>


{% endblock content %}

{% block ScriptBlock %}

<script>
    $(document).ready(function () {

        var personDataTable = $("#tableID").DataTable({
            language: {
                "url": 'https://cdn.datatables.net/plug-ins/2.0.3/i18n/fr-FR.json'
            },

            "aLengthMenu": [[3, 5, 10, 25, -1], [3, 5, 10, 25, "All"]],
            "iDisplayLength": 3
        });

        
    });

    {% endblock ScriptBlock %}
javascript django htmx
1个回答
0
投票

base.html

    <!-- identification/templates/base.html  -->
{% load static %}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{% endblock %}</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />


    <!-- DataTables CSS -->

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.0/css/jquery.dataTables.min.css" />


</head>

<body>
    <div class="container">
        <div class="row">
            <h1 style="color: green;">Test sur tableau dynamique</h1>
            {% block content %}{% endblock %}
        </div>
    </div>


    <!-- DataTables cdn jquery -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.datatables.net/1.12.0/js/jquery.dataTables.min.js"></script>



    {% block ScriptBlock %}


    {% endblock ScriptBlock %}



    <!-- Placeholder for the modal -->
    <div id="modal" class="modal fade" tabindex="-1">
        <div id="dialog" class="modal-dialog" hx-target="this"></div>
    </div>


    <!-- Empty toast to show the message   -->
    <div class="toast-container position-fixed top-0 end-0 p-3">
        <div id="toast" class="toast align-items-center text-white bg-success border-0" role="alert"
            aria-live="assertive" aria-atomic="true">
            <div class="d-flex">
                <div id="toast-body" class="toast-body"></div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
                    aria-label="Close"></button>
            </div>
        </div>
    </div>


    <!--     <script src="https://unpkg.com/[email protected]"></script> -->
    <script src="https://unpkg.com/[email protected]"
        integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
        crossorigin="anonymous"></script>

    <script src="{% static 'dialog.js' %}"></script>
    <script src="{% static 'toast.js' %}"></script>

    
</body>

</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.