私は Django と Google の Closure JavaScript ライブラリを使用しており、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();
}
ロードされる 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送信ボタンを介して)単純なフォーム送信を行うだけで、データが有効であれば問題なく動作します。ただし、データが有効でない場合は、エラーのあるフォームをポップアップに表示する代わりに、ポップアップに表示されるはずだったテキスト (エラーのあるフォーム) のみを、メインのブラウザー ウィンドウではなく、メインのブラウザー ウィンドウに読み込みます。現れる。
逆に、上記の JS メソッドを使用してフォームを送信するとloadForm()
、フォームが無効な場合 (およびポップアップ ボックスに無効なフォームが表示される場合) は完全に正常に機能しますが、フォームが有効な場合は機能しません (メイン インデックス ページが私のポップアップのinnerHTMLに表示されることになります)。
両方のシナリオでコードを機能させる方法がわかりません。では、どうすればケーキを手に入れて食べることができますか? :)
これは一種の奇妙な問題です。十分に説明していない場合はお知らせください。明確にしようと思います。前もって感謝します。