Как открыть форму Django в диалоговом окне jQuery, если проверка формы не удалась в бэкэнде?

Question

У меня есть форма Django, которую я динамически загружаю в диалоговое окно jQuery после того, как пользователь щелкнул ссылку на веб-странице. Ссылка на ссылку указывает на страницу 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 я обычно делаю это следующим образом (хотя примеров кода нет, но я думаю, что вы поймете идею).

• создайте другой шаблон только для рендеринга этой формы(без блоков, без расширения из другого шаблона)
• в вашем представлении, которое отображает шаблон для отображения формы, визуализирует эту форму в html через django.template.loader.render_to_string (используя шаблон, который я упомянул).Поместите эту визуализированную форму в контекст, вставив ее в шаблон.
• В вашем шаблоне создайте контейнер для формы и визуализируйте html внутри него.
• , когда вы сейчас отправляете свою форму через AJAX makeубедитесь, что обработчик, который отправляет форму, также отображает форму (как в исходном представлении через 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 %}
});

Или, если у вас есть набор форм:

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

Примечание: formset.errors всегда будет истинным (это список пустых словарей, если ошибок нет), поэтому вы должны использовать is_bound и is_valid таким образом, или вы всегда будете открывать диалоговое окно после отправки набора форм .

Edit: Это на самом деле не совсем отвечает на первоначальный вопрос. Я наблюдал, что ваша форма была загружена с другого URL. Мое решение работает, если вы обрабатываете форму в том же виде и просто отображаете ее в диалоговом окне jQuery на той же странице.