장고 양식 마법사 아약스 다음 단계

Question

장고 양식 마법사를 사용하여 9 단계 제안서 양식을 작성합니다. Ajax를 사용하여 다음 단계를로드하기 전까지는 모든 것이 잘되었습니다. 장고 양식에 양식 태그에 포함 된 작업 URL이 없기 때문에 jquery에서 ajax 호출을 구성하는 데 어려움을 겪고 있습니다. 어쨌든 그렇게되는 이유는 무엇입니까? 나를위한 윈 - 윈 상황은 다음 단계에 대한 로딩 화면이 있고 단계에 업로드 파일 프로세스가있는 경우 업로드 된 파일의로드 비율을 표시하는 것입니다. 감사!

Answer 1

저는이 코드를 사용하고 있으며, 저에게 효과적입니다. 나는 당신이 볼 수 있듯이, 폼 안에 어떤 행동도하지 않습니다. 모든 양식이 div # 생성 내부에서 다시로드되고 변경되기 때문에 양식이 제출 될 때 jquery 'on'함수를 사용합니다. 그런 다음 ajax URL은 양식을 표시하는 URL이어야합니다.

필자의 경우 폼의 첫 번째 단계는 일부 버튼을 클릭 할 때 get을 사용하여 ajax를 통해 렌더링됩니다. 그래서 div에 처음에는 양식이없는 것입니다. (저는 부트 스트랩의 모달을 사용하고 있습니다). 여기

<form id="creation-form" action="#" method="post"> 
    {% csrf_token %} 
    <table> 
     {{ wizard.management_form }} 
     {{ wizard.form }} 
    </table> 

    {% if wizard.steps.prev %} 
     <button name="wizard_goto_step" class="btn btn-primary" aria- hidden="true" type="submit" value="{{ wizard.steps.first}}">First</button> 
     <button name="wizard_goto_step" class="btn btn-primary" aria-hidden="true" type="submit" value="{{ wizard.steps.prev}}">Previous</button> 
    {% endif %} 
    <input id="create-submit" class="btn btn-primary" type="submit" value="submit" /> 
</form> 

내 아약스 호출입니다 :

template_name = 'creation_form.html' 

코드 포의 creation_form.html :

<div id="creation"> 
    <!-- form to be display through ajax --> 
</div> 

보기에서 FormWizard 클래스에서 다시로드되는 템플릿은 다음과 같은 HTML입니다

$('#creation').on('submit', '#creation-form' , function(e){ 
    e.preventDefault(); 
    var fd = new FormData($('#creation-form').get(0)); 
    $.ajax({ 
     url: '/create/', 
     data: fd, 
     type: "POST", 
     success: function(data){ 
      $('#creation').html(data); 
      }, 
     processData: false, 
     contentType: false 
    }); 
}); 

희망 당신의 대답에 대한 적절한 대답.

현재 처음/이전 단계로 진행하는 데 어려움을 겪고 있습니다. 알아 내면 방법을 알려주세요.

찾고 계신 것이 있으십니까?