Question

我有一个Django表单，我在用户单击网页上的链接后动态加载到jQuery对话框。链接中的href指向仅包含表单内容的Django页面，而不是整个站点布局。

        $('#add-note').click(function() {
            $('#dialog').load($(this).attr('href')).dialog({
                title: 'Add a note',
                modal: true,
                draggable: false,
                minWidth: 500,
            });

            return false;
        });

如果用户提交在后端验证的表单，这可以正常工作。但是，如果表单包含验证错误，Django会将浏览器转发回表单页面，在这种情况下，表单页面实际上并不是用户当前正在查看的页面。

看，用户在一个完全不同的页面上，表单只是动态加载到jQuery对话框。所以问题是，处理这种情况的最佳方法是什么？如何打开包含验证错误的表单回到对话框而不是表单页面本身？

所有帮助都非常赞赏！

Answer 1

当使用AJAX和Django表单时，我通常采用以下方法（虽然没有代码示例，但我认为你会得到这个想法）。

创建一个不同的模板，仅用于渲染此表单（无块，不从其他模板扩展）
在您的视图中呈现模板以显示表单，通过django.template.loader.render_to_string将此表单direclty呈现为html（使用我提到的模板）。将此呈现的表单放入上下文中，将其推送到模板。
在模板中为表单创建一个容器，并在其中呈现html。
当您现在通过AJAX提交表单时，请确保提交表单的处理程序也会呈现表单（如通过django.template.loader.render_to_string在原始视图中），并至少返回此为html。如果表单无效，Thls将包含错误。
获取AJAX响应时，只需完全替换容器中的表单即可。之后你得到了Django表格，包括原始django表单提交中的所有错误。

这种方法的优点是Django仍在处理表单验证和错误显示，你不需要通过Javascript来处理它（特别是对于字段错误可能有点烦人）。缺点当然是你必须为它编写更多的后端代码。：）

Answer 2

如果表单无效，我会返回错误和消息，而不是返回200，成功等。在视图中，它是这样的：

if form.is_valid():
    ...hooray!
else:
    return HttpResponse(json.dumps({'error': msg}), status=400, 
                        mimetype='application/json')

在ajax请求中，我刚刚发出请求将失败，并且我会在某处（通常在对话框中）向用户显示错误，并且javascript将如下所示：

$.ajax({
  type: 'POST',
  data: form,
  error: function(data) {
    var error = $.parseJSON(data.responseText);
    $('#error').text(error.error);
    $('#error').show();
  }
});

Answer 3

快速而肮脏的非ajax解决方案将是：

$(function() {
    {% if form.errors %}
        $( "#form" ).dialog( "open" );
    {% endif %}
});

或者如果你有一个formset：

{% if formset.is_bound and not formset.is_valid %}
    $( "#formset" ).dialog( "open" );
{% endif %}

注意：formset.errors将始终为true（如果没有任何错误，则为空字典列表），因此您必须以这种方式使用is_bound和is_valid，否则您将始终在提交formset后打开对话框

修改这实际上并没有完全回答原始问题。我监督你的表单是从不同的URL加载的。如果您在同一视图中处理表单并且只是在同一页面上的jQuery对话框中显示它，我的解决方案就可以正常工作。

当后端的表单验证失败时，如何在jQuery对话框中重新打开Django表单？

3 个答案: