Django модальное всплывающее окно после вставки / обновления данных

Question

Я искал в Google и SO всплывающее сообщение, когда пользователь отправлял, но это не работает, когда я применяю его к своему коду, я просто хочу, чтобы, если пользователь обновляет / вставляет данные, появляется всплывающее модальное сообщение

У меня есть эта форма в моем html

<form method="post" id="myform" class="myform" style="width: 100%" enctype="multipart/form-data">{% csrf_token %}
    <table  id="blacklistgrids" border="2px">
    <tr>
        {% for v in table.0 %}
            {% if forloop.first %}
                <th id="thupdate">{{v}}</th>
            {% else %}
                <th ><input type="text" name="updatedate" value="{{ v }}"></th>
            {% endif %}
        {% endfor %}
        <th  hidden></th>
        <th data-id='headerss' id='headerave'>Average</th>
    </tr>
    <tbody>
    {% for row in table|slice:"1:" %}
        <tr class="tr2update">
            <td><input type="text" value="{{row.0}}" name="students" hidden>{% for n in teacherStudents %}{{n.Students_Enrollment_Records.Student_Users}}{% endfor %}</td>
             <td class="tdupdate" hidden><input type="text" hidden></td>
            {% for teacher in students %}
            <input type="hidden"  name="id"   value="{{teacher.id}}"/>
            <td>
                <input type="text"  data-form-field="{{teacher.id}}" name="oldgrad" class="oldgrad"  value="{{teacher.Grade|floatformat:'2'}}"/>
            </td>
            {% endfor %}
            {% for avg in average %}
            <td data-id='row' id="ans"><input type='number' class='averages' step="any" name="average" value="{{average.average_grade|floatformat:'2'}}" readonly/></td>
            {% endfor %}
        </tr>
     {% endfor %}
    </tbody>

</table>
    <div class="buttons">
    <input type="submit" value="&nearrow;&nbsp;Update" class="save"   formaction="/updategrades/">
    </div>
        </form>

<script>
if (typeof jqXhr.success != 'undefined') {
    $('#thanksModal').modal('show');
} else {
    $('#myform').html(jqXhr);
}
</script>

, и это мои views.py

import json
def updategrades(request):
    /some logic/
   return HttpResponse(json.dumps({"success":True}), content_type="application/json")

Answer 1

вы можете использовать модалы ajax и bootstrap, создать общий модал где-нибудь на вашей странице html (у меня обычно это есть в моей базе. html, так что он будет включен на всех страницах), а затем отправить ваш с помощью ajax, тогда ajax обеспечит функцию успеха или ошибки в отношении ответа, полученного от серверной стороны. поместите это сообщение в модальное. Например:

где-то внутри базы. html

    <!-- Info General modal -->
    <div id="general_modal" class="modal fade " >
      <div class="modal-dialog ">
        <div class="modal-content ">
          <div class="modal-header bg-info">
            <h6 class="modal-title">Info header</h6>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>
          <div class="modal-body">
          <!-- Empty will be field by Js -->
          </div>
        </div>
      </div>
    </div>
    <!-- /info General modal -->

js и ajax function

$("#your-form").on('submit',function(e){
    e.preventDefault();
var ajax_link = this.getAttribute("data-ajax-link");
var target = this.getAttribute("data-target");
var title = this.getAttribute("data-modal-title");
var size = this.getAttribute("data-modal-size");
var bg = this.getAttribute("data-modal-content-bg");
// $(target+" .modal-body").load(ajax_link);
$.ajax({
    url:ajax_link,
    type:'POST',
    // data: $("#your-form-feilds").serialize(),

    success: function (response){
        $(target+" .modal-body").html(response);
    },
    /*
    error:function (response){
        new PNotify({
            title: 'oops',
            text:' Unable to load',
            type: 'error'
        });
    }
   */
});

$(target+" .modal-content").addClass(bg);
$(target+" .modal-title").html(title);
$(target+" .modal-dialog").removeClass().addClass("modal-dialog");
$(target+" .modal-dialog").addClass(size);

});

html форма

<form action="." method="post" id="your-form" class="btn btn-info  modal-ajax-load"
                        data-ajax-link="url"
                        data-toggle="modal"
                        data-modal-title="tilte"
                        data-target="#general_modal">

ofcurse вам нужно изменить этот ответ, чтобы создать нужные вам функции