2013-07-02 3 views
0

Я использую Django и Javascript в Google Closure, и я хочу сделать некоторую обработку формы через AJAX.Django/Closure: Как проверить форму AJAX через AJAX?

В настоящее время у меня есть кнопка на странице с надписью «Добавить оценку». Когда вы нажимаете на него, он запускает запрос goog.net.Xhrio для загрузки другого URL-адреса с формой на нем и отображения содержимого в небольшом всплывающем окне по вызову loadForm().

loadForm = function(formId) { 
    var form = goog.dom.getElement(formId); 
    goog.style.setElementShown(goog.dom.getElement('popup-box'), true); 
    goog.net.XhrIo.send(form.action, displayForm, form.method); 
} 

displayForm = function(e) { 
    goog.dom.getElement('popup-box').innerHTML = e.target.getResponseText(); 
} 

Форма Джанго, который загружается очень простой вид модели, с помощью простого «забить» атрибутом, который получает сверяется диапазоном чисел. Вот код, я должен обрабатывать данные формы:

def Score(request): 
    obj = ScoreModel.get(pk=request.POST['obj_id']) 
    form = ScoreForm(request.POST, instance=obj) 

    if form.is_valid(): 
    form.save() 
    messages.success(request, 'Score saved!') 
    return shortcuts.redirect('index') 
    else: 
    context_vars = {'score': score, 'form': quarter_form} 
    shortcuts.render_to_response(
     'score_form.html', context_vars, 
     context_instance=context.RequestContext(request)) 

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

И наоборот, если я отправлю форму через мой метод JS loadForm() выше, он отлично работает, если форма недействительна (и отображает недопустимую форму во всплывающем окне), но не работает, если форма действительна (потому что главная индексная страница заканчивается тем, что отображается в моем внутреннем HTML-всплывающем окне).

Я не могу понять, как заставить код работать в обоих сценариях. Итак, как я могу получить свой торт и съесть его? :)

Это странная проблема, поэтому, если я не объясню ее достаточно хорошо, дайте мне знать, и я попытаюсь уточнить. Заранее спасибо.

+0

почему вы должны поп форму? – silviud

+0

Вот как настраивается пользовательский интерфейс. Все формы выходят за контент, именно для этой формы нам действительно нужна проверка в первый раз. – Chad

+0

ok - когда вы делаете сообщение на сервер, django запустит проверку, а затем отобразит форму с ошибками (если проверка не выполнена), я не уверен, как вы можете сделать это во всплывающем окне, так как вам нужно отобразить шаблон формы еще раз. Другой способ сделать это, чтобы иметь AjaxMixin - посмотрите https://docs.djangoproject.com/en/dev/topics/class-based-views/generic-editing/#ajax-example. – silviud

ответ

0

Я получил его для работы. Основной трюк заключался в том, что если представление формы было успешным, вместо возврата перенаправления я вернул базовый объект ответа с кодом статуса перенаправления и URL-адресом для перенаправления. Затем я изменил свой displayForm(), чтобы найти его и перенаправить, если он был найден.

Вот модифицированный код функции Score():

if form.is_valid(): 
    form.save() 
    messages.success(request, 'Score saved!') 
    redirect = shortcuts.redirect('index') 
    return http.HttpResponse(content=redirect['Location'], 
          status=redirect.status_code) 

И модифицированное displayForm():

var displayForm = function(e) { 
    var responseText = e.target.getResponseText(); 

    if (e.target.getStatus() == 302) { 
    // If this was a redirect form submission, the response text will be the URL 
    // to redirect to. 
    window.location.href = responseText; 
    } else { 
    // Regular form submission. Show the response text. 
    goog.dom.getElement('popup-box').innerHTML = responseText; 
    } 
}; 
Смежные вопросы