Question

今天我在互联网上花了大约3个小时，寻找解决方案，但没有运气。我想有bootstrap模式（弹出）和我有形式的模态，选择1-6之间的数字和上传图片文件。到目前为止，我有这些文件： Views.py：

SUJECTS = ["subject1", "subject3", "subject55",] 
@login_required
def create_exam(request, letnik_id, classes_id, subject_id):
    response_data = {}
    if subject_id in SUBJECTS:
        path = letnik_id + '/' + classes_id + '/' + subject_id
        form = ExamForm(request.POST or None, request.FILES or None)
        if form.is_valid():
            exam = form.save(commit=False)
            exam.exam_user = request.user
            exam.exam_path = path
            exam.exam_file = request.FILES['exam_file']
            file_type = exam.exam_file.url.split('.')[-1]
            file_type = file_type.lower()
            if file_type not in IMAGE_FILE_TYPES:
                context = {
                'error_message': 'File must be PNG, JPG ali JPEG',
                }
                return ??
            if Exam.objects.filter(exam_path=path, exam_number=exam.exam_number):
                context = {
                'form': form,
                'error_message': 'Exam already exists!',
                }
                ??return??
            exam.save()
            return redirect('subject_id', letnik_id=letnik_id, classes_id=classes_id, subject_id=subject_id)
        context = {
        "form": form
        }
        return render(request, 'exam_form.html', context)
    raise Http404("Site does not exist")`

我有exam_form.html：

<!-- Modal -->
<div class="modal fade" id="myModalHorizontal" tabindex="-1" role="dialog" 
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <button type="button" class="close" 
                   data-dismiss="modal">
                       <span aria-hidden="true">&times;</span>
                       <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    Dodaj Test
                </h4>
            </div>

            <!-- Modal Body -->
            <div class="modal-body">
            {% if error_messages %}
                        <p style="color: #cc0000;" id="error_message">{{ error_message }}</p>
                    {% endif %}

                <form id="form" class="form-horizontal" role="form" method="post" enctype="multipart/form-data" action="{% url 'create_exam' letnik_id=letnik_id classes_id=classes_id subject_id=subject_id %}" id="post-form">
                {% csrf_token %}
                  <div class="form-group">
                    <label  class="col-sm-2 control-label"
                              for="inputEmail3">Number</label>
                    <div class="col-sm-10">
                        <select class="form-control" id="" name="exam_number">
                          <option>1</option>
                          <option>2</option>
                          <option>3</option>
                          <option>4</option>
                          <option>5</option>
                          <option>6</option>
                        </select>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-xs-2 control-label"
                          for="inputPassword3" >Picture</label>
                    <div class="col-sm-10">
                        <input  name="exam_file" type="file" required>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                    </div>
                  </div>






            </div>

            <!-- Modal Footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                            CLose
                </button>
                <button type="submit" class="btn btn-primary">
                    Submit
                </button>
            </div>
            </form>
        </div>
    </div>
</div>

包含在tests.html中（我刚刚传入按钮，因为test.html的其余部分无关紧要：

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalHorizontal" href="">
    Add Exam
</button>
{% include 'exam_form.html' %}

my views.py：

url(r'^(?P<letnik_id>[1-4])/(?P<classes_id>[A-G])/(?P<subject_id>[\w\-]+)/dodaj$', views.create_exam, name="create_exam"),

所以我想添加bootstrap模式。当我单击提交时，将创建考试。但是，如果我发错，例如，如果考试已经存在或文件不是png / jpg / jpeg格式，它会给我一个错误，因为我不知道如何配置模式显示错误而不关闭，如果有任何错误。我见过一些使用AJAX但我不知道如何实现它。我很喜欢它，如果可以从视图中传递错误，而不需要重新加载页面，因为重新加载页面时，模态会关闭。

Answer 1

在javascript中抓取submit

$('#form').on('submit', function(e) {
    e.preventDefault();
    $.ajax({
        url : "/url/",
        type: "POST",
        data: $(this).serialize(),
        success: function (data) {
            //here data is the response. Based on this data, do your logic;
        },
        error: function (jXHR, textStatus, errorThrown) {
            alert("error");
        }
    });
});

Answer 2

我尝试了两种方式（通过ajax和通过动作），但问题是相同的，只是删除data-dismiss =＆＃34; modal＆＃34;会工作..，

<div class="modal-footer">
                <button type="button" class="btn btn-default">CLose</button>

Django bootstrap模态文件上传表单

2 个答案: