2013-07-02 95 views
0

我正在使用Django和Google的Closure JavaScript庫,並且我想通過AJAX做一些表單處理。Django/Closure:如何通過AJAX驗證AJAX表單?

目前,我在頁面上有一個按鈕「添加分數」。當你點擊它時,它會觸發一個goog.net.Xhrio請求,通過調用loadForm()來加載另一個帶有表單的URL,並在彈出框中顯示內容。

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(); 
} 

該被加載Django的形式是一個非常基本的模型形式,條件是得到對許多範圍驗證一個簡單的「得分」屬性。這是我必須處理表單提交的代碼:

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提交按鈕),如果數據是有效的,它工作正常。但是,如果數據無效,而不是在彈出窗口中顯示帶有錯誤的表單,它只會在主瀏覽器窗口中加載僅在彈出窗口中顯示的文本 - 帶有錯誤的窗體 - 而不是彈出。相反,如果我通過上面的我的loadForm() JS方法提交表單,如果表單無效(並在彈出框中顯示無效表單),但它在表單有效時無效因爲主索引頁面最終顯示在彈出窗口的innerHTML中)。

我似乎無法弄清楚如何讓代碼在這兩種情況下工作。那麼,我怎樣才能擁有我的蛋糕並將它吃掉呢? :)

這是一個奇怪的問題,所以如果我沒有解釋得不夠好,讓我知道,我會盡力澄清。提前致謝。

+0

爲什麼你需要彈出的形式? – silviud

+0

這就是UI的設置。所有的表格都會在內容上彈出,只是這個表單我們實際上需要第一次驗證。 – Chad

+0

好的 - 當你做一個帖子到服務器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; 
    } 
};