장고 일반보기 + JQueryUI 대화 + Ajax

Question

누구나 신속한 워크 스루를 제공 할 수 있습니까?

나는 ajax를 통해 장고 양식으로로드되는 JQueryUI 대화 상자를 가지고있다.

JQuery와 장고보기 장고 템플릿

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

내가하고 싶은 모든

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

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

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

입니다 대화 상자에 모든 활동을 유지합니다. 즉, 유효하지 않은 양식 항목은 유효성 검사 메시지를 대화 상자에 표시합니다. 양식이 유효한 경우 대화 상자를 닫고 대화 상자를 호출 한 페이지로 돌아가겠습니다. 나는 리디렉션을 따라야 만하는 것을 피하기 위해 form_valid를 재정의하면서 혼란스러워했지만 아무 소용이 없었다. 나는 폼 액션 속성에 전달 된 URL과 동일한 URL을 가진 빈 페이지를 보게된다. js 내에서 양식 유효성 검사를 처리하기 위해 제출 단추의 jquery에 리스너를 추가하지 않도록하십시오. js 측면에서 유효성 검사를 수행 한 다음 저장을 위해 장고에 데이터를 전달하는 여러 게시물을 보았습니다. 나는 장고로 유효성 검사와 절약을하고 싶다.

어떻게해야 할지를 알 수 있다면 성공적인 양식 제출 대화 상자를 없애기 위해 리스너를 추가 할 수는 있지만 프레젠테이션에 대해서만 유효성 검사와 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); 
    }); 
};