时间戳

首页 > 解决方案 > 插入/更新数据后 Django 弹出模式

python - 插入/更新数据后 Django 弹出模式

问题描述

我一直在谷歌搜索用户提交时的弹出消息，但是当我将它应用到我的代码时它不起作用，我只想在用户更新/插入数据时出现弹出模式消息

我的 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")

标签： pythondjango

解决方案

您可以使用 ajax 和引导模式，在您的 html 页面的某处创建一个通用模式（我通常将它放在我的 base.html 中，因此它将包含在所有页面中）然后使用 ajax 提交您的 from 然后 ajax 将提供成功或错误有关响应的功能将从服务器端接收。将该消息放入模态中。一个例子是：

base.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函数

$("#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">

当然你需要修改这个答案来创建你需要的功能

推荐阅读