Djangoジェネリックビュー+ JQueryUIダイアログ+ Ajax

Question

誰でも簡単にウォークスルーできますか？

私は、ajax経由でdjango形式でロードされるJQueryUIダイアログを持っています。

jqueryの

$("#project_add").on(
    "click", {url: "/projects/project_create"}, open_dialog 
); 

function open_dialog(event) { 
    //create the div that will hold the dialog box 
    var projectDialog = $('#project_dialog'); 
    if ($('#project_dialog').length == 0) { 
     projectDialog = $('<div id="project_dialog"></div>').appendTo('body'); 
    } 

    // load the passed url into the dialog 
    projectDialog.load(event.data.url); 

    // create the dialog box and display it 
    projectDialog.dialog({ 
     title: "Create Project", 
     position: ['center', 'top'], 
     closeOnEscape: true, 
     close: function() {projectDialog.dialog("destroy");} 
    }); 
} 

Djangoのビュー

class CreateProject(CreateView): 
template_name = "projects/project_create.html" 
form_class = ProjectCreateForm 

def form_valid(self, form): 
    self.object = form.save() 
    return HttpResponse() 

Djangoテンプレート

<form action="project_create/" method="post"> 
{{ form.as_p }} 
<input type="submit" value="Save" id="dialog-save"> 
</form> 

私がやりたいすべてがありますダイアログ内のすべてのアクティビティを保持します。つまり、フォームエントリが無効な場合、ダイアログに検証メッセージがポップアップ表示されます。フォームが有効な場合は、ダイアログを閉じてダイアログを呼び出したページに戻ります。私は、リダイレクトに従わなければならないのを避けるために、form_validを無効にしていたが、役に立たなかった。私は、フォームアクション属性で渡されたURLと等しいURLを持つ空白のページになります。 js内のフォーム検証を処理するために、送信ボタンのjqueryにリスナーを追加しないようにしたいと思います。 js側で検証を行い、保存するためにデータをdjangoに渡すことを提案する数多くの投稿を見てきました。私はdjangoで検証と保存をしたいと思います。

私はそれを行う方法を理解することができた場合、フォーム提出の成功時にダイアログを破棄するリスナーを追加することができますが、検証とjqueryをプレゼンテーションに使用したいと考えています。任意のヒント？

Answer 1

フォームをAJAX経由で送信し、ダイアログのcontenetsをHTTP応答に置き換える必要があります。例：

$(document).on('click', '#dialog-save', function(event) { 
    event.preventDefault(); 
    var $form = $(this).closest('form'); 
    $.ajax({ 
     url: $form.prop('action'), 
     type: 'POST', 
     data: $form.serialize() 
    }).done(function (data) { 
     $form.replaceWith(data); 
    }); 
};