フォームフィードバックによるモーダル更新

Question

私はDjangoのサインアップフォームにモーダルを使用しています。私がしたいのは、入力をチェックし、フォームがリフレッシュされてサインアップが成功したことを示したり、入力が不足している、または間違っていると不平を言うことです。私が作業しているコードからわかる限り、通常のページを使用していればこのフォーマットは正しいでしょうが、モーダルでは動作しません。ボタンをクリックすると、事物が間違いなく裏で確認されています（そして、データベースは更新されていますので、そのすべてがうまくいきます）が、最後には何もページに戻されません。

@requires_csrf_token 
def signup(request): 
error, success = '', '' 

    recap = request.POST.get('g-recaptcha-response') 
    [ETC] 

    if request.method == 'POST': 
     [CHECKING INPUTS] 

    if not error: 
     [OTHER STUFF] 
     success = "SUCCESS MESSASGE" 

    return render(request, 'signup_modal.html', 
     { 'firstname': firstname, 
      'lastname': lastname, 
      'email': email, 
      'phone': phone, 
      'error': error, 
      'success': success}) 

ここではリターンレンダリングリクエストビットの問題があると思います。

ありがとうございます。

ETA：

Javascriptを：

<script type="text/javascript"> 
$(function() { 
$(".submit-signup").on("click", function() { 
     var data = $("#signup-form").serialize(); 
     $.post("/signup/", data, function() { 

     }); 
    }); 
}); 
</script> 

応答]タブ：

<form id="signup-form"> 

    <input id="id_firstname" type="text" name="firstname" placeholder="First name" 
     value="firstname" > 
    <input id="id_lastname" type="text" name="lastname" placeholder="Last name" 
     value="lastname" > 
    <input id = "id_email" type="email" name="email" placeholder="e-mail" 
     value="user@gmail.com" > 
     <input id="id_password" type="password" name="password" placeholder="Password"> 
    <input id="id_password_repeat" type="password" name="password_repeat" placeholder="Repeat password"> 
    <div class="g-recaptcha" data-sitekey="KEY"></div> 

    <p class="success-message"> </p> 
    <p class="error-message"> Couldn't verify reCAPTCHA. Refresh the page and try again? </p> 

    <button type="button" class="submit-signup">Sign up</button>   
    </div> 
    </form> 

Answer 1

複数の理由が考えられます。

1. データは予期したとおりに返されません。
2. あなたのxhrコールは、現在のDOMデータを返されたデータで置き換えていません。

私は質問の内容からです。あなたのajax呼び出しは古いDOMデータを新しいデータで置き換えているわけではありません。

これを確認するためです。クロームコンソールを起動します。 Networksにアクセスし、サインアップボタンを押してください。送信された要求を探します。おそらくあなたはajax（xhr）リクエストを扱っているでしょう。その要求を選択し、Responseタブに切り替え、返されるデータが期待どおりであるかどうかを確認します。質問更新後

編集：

ので、新しいデータがDOMに置き換えられていないことを私たちの仮定は正しかったです。

何をする必要がある：

• 返された応答の状態を確認し、更新するために、あなたのJSを変更{'status': boolean, 'form': html}
• ようなJSONを返すために、あなたのビューを変更して交換する必要がありますDOMのdiv要素を見つけますあなたはHTMLを返しています。

例：

ビューは次のようになります。

def signup(request): 
    # do your stuff 
    html = render_to_string(YOUR_TEMPLATE, YOUR_CONTEXT) 
    response = {'status': true, 'form': html} 
    return JsonResponse(response) 

そして、あなたのJSは、AJAX呼び出しの内部でこれを含まれますために良いリソースの

success: function(response) { 
    if (response['status'] == 'true') { 
     target = $('#FIND_YOUR_MODAL_DIV_BY_ID') 
     data = response['form']; 
     target.html(data); 
    } 
} 

ワンあなたが達成しようとしているもの：https://impythonist.wordpress.com/2015/06/16/django-with-ajax-a-modern-client-server-communication-practise/

Answer 2

Responseタブが成功した場合にデータをレンダリングする際にhtmlを表示しているため、ビューでJsonResponseを使用してAJAX呼び出しに対する応答データを送信する必要があります。例は、AJAX呼び出しが成功した場合にreturn JsonResponse(data)を使用します。

私が助けてくれたら教えてください。